Как пользоваться: Figma CSS в Webflow
- В Figma выберите слой и откройте Dev Mode → Code → CSS (или правый клик → Copy as → Copy as code → CSS). При необходимости можно скопировать сразу несколько слоёв.
- Вставьте CSS сюда. Каждый комментарий
/* Layer name */становится отдельным блоком. - Выберите, нужно ли переводить px в rem и сохранять фиксированные размеры (обычно они не нужны).
- Скопируйте отдельные значения из таблицы панели Style или чистый CSS для собственного кода.
Зачем очищать CSS из Figma перед переносом в Webflow
Figma генерирует CSS, который описывает слой точно таким, каким он нарисован на холсте, — включая position: absolute с координатами left/top, фиксированные пиксельные ширину и высоту, а также остатки авто-лейаута вроде flex: none; order: 0; flex-grow: 0;. Если перенести это в Webflow, получатся жёсткие макеты, которые ломаются на небольших экранах. Из дизайн-передачи действительно нужны дизайнерские решения: размеры шрифтов, начертания, высоты строк, цвета, отступы, скругления и тени.
Что конвертируется
| Результат Figma | Превращается в | Почему |
|---|---|---|
font-size: 32px | 2rem | rem учитывает размер шрифта в браузере пользователя и масштабируется согласованно. |
line-height: 120% или 38.4px | 1.2 | Безразмерный line-height масштабируется вместе с размером шрифта там, где он наследуется. |
letter-spacing: -0.64px | -0.02em | Трекинг в em остаётся пропорциональным при изменении размера шрифта (плавная типографика). |
var(--Text-Primary, #141827) | #141827 + список переменных | Показывает, какие переменные Figma нужно воссоздать на панели Variables в Webflow. |
position: absolute; left; top, flex: none | удаляется | Позиционирование на холсте, а не намерение по макету. |
Соответствие панели Style в Webflow
Значения сгруппированы по разделу панели Style, в котором их нужно вводить: Layout (display, direction, gap, alignment), Spacing (padding, margin), Size, Typography, Backgrounds, Borders и Effects (тени, opacity). В Webflow можно вводить единицы прямо в поля, поэтому 2rem или 1.2 работают без изменений.
Что дальше
Для отступов и типографики, которые адаптируются между мобильной и десктопной версией, превратите пары значений из Figma в плавный clamp() с помощью Clamp Calculator. Для разовых конвертаций используйте PX to REM, а для иконок — SVG to Webflow.
Также ищут как: figma в webflow, figma dev mode css, стили figma в webflow, px в rem, line height webflow, letter spacing webflow, передача дизайна figma.
Инструменты, которые хорошо сочетаются с Figma CSS в Webflow
- Конвертер цветов — Вставьте любой CSS-цвет — HEX, rgb(), hsl(), hwb(), oklch() или название вроде tomato — и сразу получите все остальные форматы, а также готовую палитру 50–950.
- Генератор box-shadow — Добавляйте несколько слоёв теней, меняйте смещение, размытие, spread и непрозрачность на живой карточке, затем скопируйте CSS для box-shadow или text-shadow.
- Редиректы с WordPress на Webflow — При переносе сайта с WordPress на Webflow меняется почти каждый URL: даты в путях блога, архивы /category/, закрывающие слэши и слаги страниц.
- HTML и CSS в Webflow — Вставьте HTML и его CSS, нажмите Скопировать в Webflow и вставьте результат в Designer.
Часто задаваемые вопросы
Где найти CSS в Figma?
Почему ширина и высота удаляются?
Можно вставить несколько слоёв сразу?
/* Layer name */ начинает новый блок, и для каждого блока создаётся отдельная таблица панели Style.