Как я проектирую сайт в Figma: автолэйаут, компоненты и переменные

Все сайты я проектирую в Figma. Но макет в Figma может быть просто картинкой, а может быть почти готовой системой, по которой сайт собирается быстро и без потерь. Расскажу, как я устраиваю файл, чтобы получалось второе

01Автолэйаут вместо ручной расстановки

Auto Layout в Figma работает так же, как флексбокс в вёрстке: элементы выстраиваются в строку или столбец с заданными отступами и сами подстраиваются под содержимое. Если в карточке стало больше текста, карточка вытягивается, а соседние блоки сдвигаются

Я собираю на автолэйауте почти всё: кнопки, карточки, шапку, целые секции. У этого два плюса. Макет легко править: заменил текст, и ничего не поехало. А разработчик видит в макете ту же логику, что будет в коде, и ему не нужно угадывать отступы

02Компоненты и варианты

Всё, что повторяется, я делаю компонентом: кнопки, поля ввода, карточки кейсов, пункты меню. У компонента есть варианты: обычное состояние, наведение, нажатие, неактивная кнопка, светлая и тёмная версия. Когда нужно поменять кнопку, я меняю её в одном месте, и она меняется во всём файле

Для сайта театра, над которым я работал, так были собраны карточка показа в афише, кнопка «Купить билет» с состояниями и плашки статусов вроде «премьера» и «мало билетов»

03Переменные: цвета, отступы и темы

Переменные, Variables, это способ хранить в Figma точные значения: цвета, размеры, отступы, скругления. Вместо того чтобы красить кнопку в конкретный красный, я назначаю ей переменную «акцент». Это те самые дизайн-токены, о которых я писал в статье про дизайн-систему

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

04Адаптив

Я рисую как минимум два крайних макета: телефон шириной 390 и компьютер шириной 1440. Иногда добавляю планшет, если сетка там сильно меняется. Благодаря автолэйауту и ограничениям размеры элементов в Figma ведут себя почти как в браузере, и проверить поведение можно прямо в файле, растягивая фрейм

В коде я потом связываю эти два макета плавной шкалой: размеры шрифтов и отступов растут пропорционально ширине экрана. Так сделан и этот сайт

05Прототип

Ключевые сценарии я связываю в интерактивный прототип: выбрать спектакль в афише, открыть страницу, нажать «Купить билет». Заказчик проходит путь пользователя сам, до разработки. Ошибки в логике на этом этапе исправляются за минуты

06Передача в разработку

В режиме разработчика, Dev Mode, программист видит размеры, отступы, переменные и может скопировать значения в код. Я помечаю готовые к разработке экраны, чтобы было понятно, что уже согласовано, а что ещё в работе. Как устроен переход от макета к коду и при чём тут нейросети, я разбираю в статье от макета к коду без потерь

07Итог

Хорошо собранный файл Figma экономит время на каждом следующем шаге: правках, адаптиве, разработке и развитии сайта. Если хотите сайт, собранный именно так, посмотрите, как я работаю над сайтами, или напишите мне