Чтение макета Figma

Заказ «верстка по макету»: покупатель даёт дизайн в Figma, исполнитель делает рабочую страницу.

Что нужно от покупателя

• Ссылка на макет с доступом на просмотр.
• Макеты для телефона и компьютера (если только один, согласуйте, как вести себя на других ширинах).
• Шрифты и изображения в исходном виде.

Порядок работы

1. Просмотрите весь макет: страницы, состояния кнопок, формы.
2. Выпишите цвета, шрифты, размеры, отступы.
3. Составьте список блоков и компонентов, которые повторяются.
4. Если подключён коннектор Figma, используйте навык figma:figma-design-to-code для чтения макета.

Типичные ошибки

• Верстать, не изучив макет целиком.
• Игнорировать состояния (наведение, ошибка, пустой список).
• Забыть про мобильную версию.

Чек-лист

• Макет изучен
• Список компонентов
• Согласованы поведение на разных ширинах и анимации