Видео этого урока скоро появится
Конспект урока доступен ниже
Из Figma в код без потери дизайна
Передашь макет из Figma в Cursor и получишь вёрстку, совпадающую с дизайном, а не «по мотивам». Разберёшь, какие данные о макете нужны модели: отступы, шрифты, состояния элементов. Соберёшь чек-лист сверки результата с исходником.
Конспект урока
- 1
Что забрать из макета
Из панели инспектора нужны числа: размеры, отступы, цвета в HEX, шрифт с начертанием и высотой строки, радиусы, тени. Скриншот без этих чисел даёт вёрстку по мотивам.
- 2
Подключаем Figma к Cursor
Figma отдаёт данные выделенного фрейма через MCP-сервер, который добавляется в настройках Cursor. После подключения агент читает макет по ссылке на фрейм, а не угадывает по картинке.
- 3
Стили макета в переменные
Перенеси палитру, шкалу отступов и типографику в переменные темы до вёрстки страниц. Иначе числа из макета разъедутся по файлам и станут неуправляемыми.
- 4
Состояния, а не только вид
В макете обычно нарисован покой. Опиши модели явно: наведение, нажатие, фокус с клавиатуры, ошибка, загрузка, пустое состояние.
- 5
Сначала компоненты, потом экраны
Кнопка, поле, карточка собираются как отдельные компоненты, экран складывается из них. При другом порядке каждая правка размножается по десятку файлов.
- 6
Чек-лист сверки с макетом
Отступы кратны шкале, размеры шрифтов совпадают, цвета точные, ничего не ломается на трёх ширинах экрана и при вдвое более длинном тексте.
Практика
Возьми один экран из Figma и сверстай его карточку в трёх состояниях: обычное, при наведении и с очень длинным текстом. Сверь отступы и цвета с макетом по числам, а не на глаз.
Сделал? Отметь урок пройденным и переходи дальше