Коротко: перенос дизайна из Figma в WordPress — это не «импорт файла», а процесс: получить из Figma размеры, цвета, шрифты и картинки, затем перенести их в тему (или блочную тему) кодом. Есть плагины-конвертеры, но аккуратный результат обычно делают вручную: сначала структура, потом стили, потом адаптив.
Что забрать из Figma
| Что | Где в Figma | Куда в WordPress |
|---|---|---|
| Цвета | палитра стилей | CSS-переменные :root |
| Шрифты и размеры | текстовые стили | font-family, font-size |
| Отступы | режим Inspect | padding, gap |
| Картинки и иконки | экспорт SVG/PNG/WebP | медиатека темы |
| Сетка | layout grid | контейнер и grid/flex |
Вкладки: как переносить
Начните с «дизайн-токенов» — базовых значений, из которых состоит макет:
:root {
--color-blue: #003F8F;
--color-red: #992222;
--color-text: #505050;
--radius-1: 6px;
--container: 1200px;
--space-3: 16px;
}Так цвета и отступы правятся в одном месте, и весь сайт «подстраивается» под макет.
Идите от общего к частному:
- Контейнер и общая сетка (ширина, отступы по краям).
- Крупные блоки: шапка, герой, секции, подвал.
- Внутри — flex/grid для карточек и форм.
- Только потом мелочи: кнопки, ссылки, иконки.
Не переносите «пиксель в пиксель» — переносите логику: где строка, где колонки, где перенос.
Если тема блочная (Full Site Editing), вёрстку собирают блоками в редакторе сайта: шапка, подвал и шаблоны страниц набираются визуально, а токены задаются в theme.json.
{
"settings": {
"color": { "palette": [
{ "slug": "brand", "color": "#003F8F", "name": "Brand" }
] }
}
}Плюс: заказчик может править контент и стили из админки. Минус: сложные макеты требуют аккуратности в настройке блоков.
Плагины-конвертеры (разного рода «Figma to WordPress») умеют генерировать черновую вёрстку. Это удобно для быстрого прототипа, но дают они «грязный» код и не всегда адаптив.
Используйте их как заготовку, а не как финальное решение. Чистый код всё равно быстрее и легче поддерживать.
Экспорт картинок из Figma
- Иконки и логотипы — в SVG (масштабируются без потери качества).
- Фото — в WebP или сжатый JPG, в 2 размерах (обычный и 2x).
- Декоративные элементы — SVG или CSS (градиенты лучше кодом).
- Назовите файлы понятно:
icon-cart.svg,hero-bg.webp.
Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Сайт не адаптивен | перенесли только десктоп | продумать сетку и медиа-запросы |
| Тексты «прыгают» | не заданы размеры шрифтов и line-height | перенести текстовые стили |
| Картинки тяжелые | экспорт PNG больших размеров | SVG/WebP и сжатие |
| Правки «плывут» по всему сайту | значения захардкожены | вынести в переменные |
Проверьте себя
Вопросы и ответы
Полностью — нет. Есть плагины-конвертеры, но они дают черновую вёрстку, которую обычно дорабатывают вручную.
Если меняете существующую тему — да, обязательно, иначе обновление затрёт ваши правки. Если делаете свою тему — она и есть «чистовик».
Обычно 1200–1280px, как в дизайн-системе. Ту же ширину задайте в CSS-переменной, чтобы не расходилось по файлам.
Сведите их к системе: базовый класс кнопки плюс модификаторы (--primary, --ghost, --small). Так вёрстка остаётся управляемой.
Итоги
- Перенос из Figma — это процесс, а не импорт файла.
- Сначала токены (цвета, шрифты, отступы), потом структура, потом мелочи.
- Иконки — SVG, фото — сжатые, лучше WebP.
- Обязательно продумайте адаптив, даже если макет один.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.