Коротко: перенести макет из Figma в WordPress удобнее всего через блочную тему (FSE): токены из макета переносят в theme.json, а секции собирают блоками и паттернами. Второй путь — свой шаблон в дочерней теме или конструктор (Elementor). Конвертеры «Figma → WordPress» дают только черновик.
Три маршрута
| Маршрут | Кому подходит |
|---|---|
| Блочная тема (FSE) | нужно редактирование из админки |
| Классическая дочерняя тема | нужен точный контроль кода |
| Конструктор (Elementor) | быстро и визуально |
Вкладки: пошагово
- Включите в Figma режим разработки (Dev Mode) для точных значений.
- Выпишите палитру, размеры шрифтов и отступы.
- Экспортируйте иконки в SVG, фото — в WebP/JPG.
- Проверьте, есть ли в макете состояния (hover, focus, disabled).
- Соберите таблицу «дизайн-токен → CSS-переменная».
В блочной теме базовые настройки задают в theme.json: палитра, шрифты, отступы, радиусы. Эти же значения появятся в редакторе как доступные опции.
{
"settings": {
"color": {
"palette": [
{ "slug": "brand", "name": "Brand", "color": "#003F8F" }
]
},
"typography": {
"fontSizes": [
{ "slug": "m", "name": "Средний", "size": "18px" }
]
}
}
}Плюс: дизайнерские токены становятся нативными настройками блоков.
- Соберите крупные секции из блоков (группа, обложка, колонки).
- Сохраните повторяющиеся секции в виде паттернов.
- Проверьте адаптив: колонки должны превращаться в столбик.
- Настройте шаблоны (главная, страница, архив) в редакторе сайта.
- Отдайте клиенту инструкцию: что можно менять, что нет.
Для нестандартных блоков подключают свой блок на ACF или функциях — тогда дизайн точнее.
Если контроль кода важнее:
- создайте дочернюю тему;
- перенесите цвета и шрифты в CSS-переменные;
- свёрстайте секции в
front-page.phpи частях шаблона; - контент-часть вынесите в блоки, чтобы клиент мог править текст;
- используйте ACF для «гибких» секций.
Практика: порядок работы
- Согласуйте дизайн-токены и заведите их в переменные/theme.json.
- Соберите каркас: шапка, подвал, контейнеры.
- Свёрстайте 2–3 типовые секции и покажите клиенту.
- Перенесите остальные секции по шаблону.
- Проверьте адаптив и состояния.
- Настройте редактируемость контента (блоки/поля).
- Протестируйте на реальных устройствах.
Частые ошибки: причина → решение
| Ошибка | Последствие | Решение |
|---|---|---|
| Значения захардкожены | сложно менять дизайн | токены в переменных |
| Нет мобильного макета | вёрстка «сломана» | продумать адаптив |
| Игнор состояний | нет hover/focus | описать состояния |
| Клиент не может править | постоянные правки от вас | использовать блоки/поля |
Проверьте себя
Вопросы и ответы
Есть конвертеры и сервисы, но они дают «грязный» код и слабый адаптив. Их разумно использовать как заготовку.
Блочная тема — чище и быстрее, но требует навыка. Конструктор — быстрее в работе, но добавляет свой код и вес.
Делайте контент блоками и используйте поля для данных. Тогда клиент меняет тексты и фото, не ломая вёрстку.
Три размера (десктоп/планшет/мобильный), состояния элементов, таблицу токенов и экспорт иконок в SVG.
Итоги
- Оптимальный маршрут — блочная тема +
theme.json+ паттерны. - Альтернативы: дочерняя тема с ACF или конструктор.
- Переносите систему, а не «пиксели».
- Продумывайте адаптив и редактируемость контента.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.