Как передавать дизайн разработчику в Figma 

В этой статье мы поговорим о передаче дизайна в разработку. Когда проект готов и все пиксели идеально подобраны, следующее, что вам предстоит сделать, — превратить его в настоящий сайт. С чего же начать?

Если вы испытываете трудности при передаче дизайна разработчику, ниже вы найдёте несколько лучших практик из этой области.

Разрешение экрана по умолчанию

Прежде чем приступить к проектированию, необходимо выбрать разрешение экрана по умолчанию. Как правило, работу начинают с разрешения 1440 x 1024 px, но это личное предпочтение автора статьи. Почему? Вы узнаете чуть позже.

Сетка

Оставляйте значительные боковые отступы так, чтобы основной контент поместился в область контейнера. Наиболее распространенная ширина контейнера, которую дизайнеры используют для создания сайтов (Elementor/Webflow), составляет 1140 px или 1240 px. Отразите это в макете в Figma. На картинке ниже размер отступов от краёв (margin) равен 100 px.

Модель расположения контента блоками

При проектировании страниц подумайте о том, как разработчик сверстает ваш контент. Представьте, что он поместит все элементы дизайна в блоки. Не слишком увлекайтесь сложными композициями, потому что разработчики возненавидят вас за это.

Масштабирование дизайна

Всякий раз, когда мы создаём дизайн для небольших экранов, необходимо помнить и о более высоких разрешениях. Как сделать дизайн отзывчивым и как изменится его композиция, если предоставить ему больше места?

Давайте в качестве примера рассмотрим страницу ниже.

Как он будет масштабироваться в более высоких разрешениях?

Такая же ширина контейнера в высоких разрешениях будет выглядеть странно, особенно в разрешении, равном 4k. Вот как дизайн будет выглядеть в разрешении, равном 2k.

Используйте минимальную и максимальную ширину контейнера

Есть такая штука, как максимальная ширина контейнера. При переходе к размеру экрана разрешением 1920 x 1080 pх в качестве границы можно использовать максимальную ширину контейнера. Допустим, мы хотим остановиться на ширине контейнера, равной 1920 px.

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

Подготовьте дизайн в разработку

При подготовке к передаче макетов в разработку убедитесь, что у вас есть документация по сетке и набор макетов во всех необходимых разрешениях.

Для разработчиков этого будет достаточно, чтобы начать работать над сайтом.

Научитесь передавать дизайн правильно

Конечно, это — вершина айсберга. Добавьте также систему шрифтов и информацию по сеткам для мобильных экранов, гайд по стилю и ссылки на сайты-референсы, чтобы показать разработчику, как должны работать анимации, визуальные элементы, codepens и другие элементы на сайте

Не забудьте присвоить соответствующие названия всем элементам и слоям!