Как организованы макеты и UI kit в Figma

Что проверяют

Умеете ли вы читать макет как разработчик: находить компоненты и токены, а не переносить пиксели. Следом обычно спрашивают, как UI kit в Figma синхронизируется с компонентами в коде и что вы делаете, когда макет с ним расходится.

Как отвечать

Опишите типичную структуру и то, как вы ею пользуетесь:

• библиотека отдельно от макетов: UI kit живёт в своём файле и публикуется как библиотека команды, в макетах лежат экземпляры (instances) его компонентов. Правка в библиотеке приходит в макеты после принятия обновления;
• страницы по сценариям: обложка, экраны по пользовательским потокам, отдельная страница с черновиками или архивом. Статус «Ready for dev» в Dev Mode подсказывает, что уже можно брать в работу;
• компоненты и варианты: свойства вариантов (size, type, state) и component properties почти один в один ложатся на props компонента в React или Vue;
• auto layout: это flexbox. Направление, gap, отступы, hug соответствует размеру по содержимому, fill растягивает как flex: 1. Вёрстку делаете по этим правилам, а не по абсолютным координатам;
• Variables и Styles: переменные хранят цвета, отступы, радиусы и поддерживают режимы, например светлую и тёмную тему. Стили остаются для типографики и эффектов. В коде им соответствуют CSS-переменные или токены темы.

Про связку с кодом: токены выгружают плагином вроде Tokens Studio или через API и превращают в CSS-переменные инструментом вроде Style Dictionary. Code Connect в Dev Mode показывает на месте компонента фрагмент кода из вашего репозитория вместо сгенерированного CSS.

Если настраивали такую связку, расскажите, что автоматизировали. Если нет, опишите, откуда брали токены и что делали с расхождениями.

Где спотыкаются

Копируют из инспектора сырой hex и пиксели вместо имени переменной. Смена темы или палитры потом превращается в поиск по всему проекту.

Не замечают отсоединённые (detached) экземпляры. Такой элемент выглядит как кнопка из кита, а в коде оказывается уникальной копией с чужими отступами.

Делают состояние hover отдельным пропом, потому что оно есть в вариантах. В браузере это псевдокласс, пропами обычно становятся disabled и loading.