Используете ли прототипирование с динамическими элементами в Figma
Что проверяют
От фронтенд-разработчика ждут не дизайнерских навыков, а умения читать поведение интерфейса из макета и договариваться о нём с дизайнером до кода. Следом часто спрашивают, как вы переносите состояния и анимации из Figma в компоненты и что делаете, если в прототипе чего-то не хватает.
Как отвечать
Скажите, в какой роли вы работаете с прототипами: смотрите готовые, собираете сами для быстрых проверок или и то и другое. Потом конкретика по возможностям Figma:
- интерактивные компоненты: варианты компонента с переходами между ними через действие «Change to». Кнопка показывает hover, pressed и disabled прямо в прототипе, а у вас появляется полный список состояний;
- переменные и условия: переменные Figma хранят числа, строки, булевы значения и цвета, прототип умеет менять их по клику и ветвиться по условию. Так собирают счётчик корзины или форму с проверкой без отдельных экранов;
- режимы переменных: светлая и тёмная тема, плотность интерфейса. Для фронтенда это готовые дизайн-токены, которые ложатся в CSS-переменные;
- Smart Animate и оверлеи: анимации между кадрами, модальные окна, выпадающие меню. Длительность и кривую берите из настроек перехода, а не на глаз;
- Dev Mode и Auto Layout: отступы, токены и структура, которая почти один в один переводится во flexbox.
Дальше пример: какой сценарий был в прототипе, что вы уточнили у дизайнера, как это легло в компоненты и Storybook. Если прототипы вы сами не собирали, так и скажите: работали по готовым, задавали вопросы по состояниям и переходам. И приведите случай, когда такой вопрос сэкономил переделку.
Где спотыкаются
Реализуют только то, что нарисовано. В прототипе обычно нет загрузки, ошибки, пустого списка и длинного текста, и разработчик, который об этом не спросил, узнает о них на ревью.
Воспроизводят анимацию покадрово на JavaScript, хотя переход из Smart Animate обычно решается CSS-переходом по transform и opacity.
Выдают себя за дизайнера и уходят в пользовательские исследования, хотя вопрос про то, как вы превращаете прототип в работающий интерфейс.