Вёрстка сайта из Figma: что подготовить

Хороший макет сокращает вёрстку на дни: меньше вопросов, меньше правок, меньше расхождений между дизайном и сайтом. Вот что стоит проверить в Figma, прежде чем отправлять ссылку разработчику.

1. Стили текста и цветов

Все заголовки, абзацы, подписи — через Text styles, все цвета — через Color styles или переменные. Тогда в коде появятся те же токены, и смена цвета кнопки не превратится в поиск по сотне слоёв.

2. Компоненты и их состояния

Кнопки, поля, карточки — компонентами с вариантами состояний:

• обычное, наведение, нажатие, неактивное;
• для полей — фокус, ошибка, заполненное;
• для карточек — с картинкой и без, с длинным и коротким текстом.

Если состояния нет в макете, разработчик его придумает. Лучше, чтобы придумали вы.

3. Auto Layout и отступы

Auto Layout показывает, как блоки ведут себя при изменении текста: что растягивается, что переносится. Отступы — из одной шкалы (например, 4, 8, 12, 16, 24, 32…), а не 13 и 27 пикселей.

4. Хотя бы два размера экрана

Минимум — десктоп и телефон. Ещё лучше — планшет или узкий ноутбук для сложных блоков: таблиц, меню, многоколоночных сеток. Промежуточные размеры разработчик доработает, но ключевые решения должны быть вашими.

5. Реальные тексты

Lorem ipsum прячет проблемы: русские слова длиннее английских, а заголовки из реальной жизни не помещаются в одну строку. Положите в макет настоящие тексты или хотя бы близкие по длине.

6. Изображения и иконки

• фото — в лучшем качестве, без встроенных в картинку текстов;
• иконки — векторные (SVG), одного размера сетки;
• иллюстрации — отдельными фреймами, чтобы их можно было экспортировать.

7. Шрифты и лицензии

Укажите, откуда шрифт и можно ли использовать его на сайте. Google Fonts — бесплатно; коммерческие шрифты требуют веблицензии.

8. Интерактив и анимации

Что открывается, что появляется при прокрутке, как ведёт себя меню на телефоне. Прототип в Figma или короткое описание текстом — достаточно и того, и другого.

Чек-лист перед отправкой

• стили текста и цветов
• компоненты с состояниями
• Auto Layout и шкала отступов
• десктопная и мобильная версия
• реальные тексты
• изображения в хорошем качестве, иконки в SVG
• шрифты с лицензией
• описание интерактива

Готовый макет можно отправить мне — сделаю вёрстку сайта из Figma с адаптивом и чистым кодом.