Figma в Код: Лучшие практики передачи макетов
Как подготовить макет так, чтобы разработчики сказали спасибо. Auto Layout, именование слоев и экспорт ассетов.
Проблема передачи макетов
Часто между дизайнерами и разработчиками возникает недопонимание. Дизайнер рисует “красиво”, а разработчик не может это сверстать. Чтобы этого избежать, нужно следовать нескольким правилам.
1. Используйте Auto Layout
Это самое главное правило. Если ваш макет сделан на Auto Layout, он уже ведет себя как веб-сайт. Разработчик сразу видит отступы (padding, margin) и поведение элементов при изменении размера.
2. Именуйте слои
Frame 1234 никому ни о чем не говорит. Называйте слои осмысленно: Header, Button, Card. Это поможет разработчику быстрее ориентироваться в структуре.
3. Dev Mode
Используйте Dev Mode в Figma. Он позволяет разработчикам копировать CSS-код, смотреть параметры анимации и скачивать ассеты в нужном формате.
Чек-лист перед передачей
- Все экраны на Auto Layout
- Слои названы понятно
- Стили цветов и шрифтов привязаны к библиотеке
- Иконки в векторе (SVG)