Figma стандарт индустрии, и на собесе часто просят открыть свой файл. По устройству компонентов и автолэйаута сразу видно, работали ли вы с системой или рисовали вручную.
Автолэйаут
Фрейм с автолэйаутом раскладывает детей по горизонтали, вертикали или в сетку с заданными отступами и паддингами. Это близко к flexbox.
Размеры детей:
- Hug contents: по содержимому (кнопка растёт с текстом);
- Fill container: на всё доступное место в родителе (поле на ширину карточки);
- Fixed: заданный размер.
Отступ Auto (space between) разводит элементы по краям: логотип слева, меню справа. Absolute position выводит элемент из потока, например бейдж на углу аватара. Constraints описывают поведение детей в обычном фрейме без автолэйаута.
Компоненты
Главный компонент и экземпляры. Изменения главного переходят в экземпляры, кроме переопределённых свойств: переопределения сохраняются, пока их не сбросить.
Варианты нужны для измерений: тип, размер, состояние. Свойства компонента не дают вариантам размножаться:
- Boolean: показать или скрыть слой (иконка слева);
- Instance swap: выбрать вложенный компонент (какая иконка);
- Text: текст слоя;
- Variant: переключение вариантов.
Вариант на каждую иконку даёт сотни комбинаций, это частая ошибка.
Переменные
Типы: color, number, string, boolean. Переменные собираются в коллекции, у коллекции бывают режимы: светлая и тёмная тема, бренды, плотность. Режим задают фрейму, и все потомки берут значения этого режима. Стиль хранит одно значение, переменная с режимами несколько.
Переменные используют в прототипах: условия, счётчики, тексты.
Библиотеки
Опубликованная библиотека раздаёт компоненты, стили и переменные. Обновления приходят в файлы как предложение: можно посмотреть изменения и принять. Большим компаниям удобно делить библиотеки на слои: токены, базовые компоненты, платформенные. Аналитика библиотеки показывает использование и отвязки.
Dev Mode
Режим для разработчиков: размеры, отступы, имена переменных вместо голых значений, код-сниппеты, пометки «Ready for dev», сравнение изменений фрейма. Чтобы Dev Mode был полезен, макет должен быть собран на компонентах и переменных.
Прототипы
Связи между фреймами, триггеры (клик, наведение, задержка), анимации переходов, Smart animate для плавной смены состояний слоёв с одинаковыми именами, интерактивные компоненты, переменные и условия.
Организация файла
Страницы по этапам (обложка, исследования, сценарии, макеты, архив), понятные имена фреймов, секции со статусами, только библиотечные компоненты, ссылки на задачи.
Частые ошибки
- Кнопка с фиксированной шириной.
- Hex вместо переменных.
- Слои «Rectangle 47» и «Frame 1203».
- Копии компонентов вместо экземпляров.
- Нет состояния focus.
Что спросят на собесе
- Чем Hug отличается от Fill?
- Как сделать кнопку с опциональной иконкой без взрыва вариантов?
- Как устроить светлую и тёмную тему?
- Как вы готовите файл к передаче в разработку?
- Как организовать библиотеку для нескольких команд?