Figma: интерфейсы и макеты

Понимать макет как дерево объектов: файл, страницы, фреймы, слои; отличать фрейм от группы и собирать блоки фреймами; читать порядок слоёв и называть слои по смыслу; раскладывать файл по страницам и отделять черновики от готового.

Выбирать размер фрейма в логических точках (телефон 360–390, ноутбук 1280–1440); задавать колоночную сетку — колонки, поля, промежуток — и ставить блоки на целое число колонок; держать все отступы и высоты в шаге 8; собирать экран от рамки к деталям и разделять смысловые части отступами.

Строить типографическую шкалу от базового размера 16 с постоянным отношением; задавать интерлиньяж (текст около 1,5, заголовки 1,1–1,3), длину строки 45–75 знаков и выравнивание; заводить текстовые стили по ролям; выстраивать иерархию размером, насыщенностью, цветом и отступом.

Собирать палитру из акцентного, нейтральных и статусных цветов со шкалами оттенков; заводить переменные в два слоя — палитра и смысловые — и красить экраны смысловыми; проверять контраст числом (4,5:1 и 3:1) и не передавать смысл только цветом; делать тёмную тему режимом переменных.

Собирать блоки на auto layout — направление, внутренние отступы, промежуток; выбирать режим размера каждого слоя (hug, fill, fixed) отдельно по ширине и высоте; выравнивать и распределять содержимое, пользоваться переносом и абсолютным положением для наложений; собирать карточку из вложенных auto layout и проверять её длинным текстом.

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

Превращать повторяющиеся блоки в компоненты и ставить на экраны экземпляры; переопределять содержимое (текст, значок, видимость) и не трогать устройство; не отсоединять экземпляры; объявлять свойства компонента — текст, да / нет, замена экземпляра; собирать библиотеку снизу вверх и называть компоненты через косую черту.

Собирать набор вариантов одного компонента со свойствами вариантов (вид, размер, состояние) и раскладывать его сеткой; рисовать состояния — обычное, наведение, нажатие, фокус, отключено, загрузка; не забывать состояния полей и экранов (пусто, загрузка, ошибка); делать вариантами устройство, а свойствами — содержимое.

Собирать прототип пути из связей — слой, триггер (нажатие, наведение, удержание, задержка), действие (перейти, назад, поверх); выбирать переходы по смыслу (сдвиг, растворение, умная анимация) длительностью 150–300 мс; настраивать оверлеи, прокрутку и закреплённую шапку, связывать состояния в компонентах; проверять прототип на пяти людях по правилам.

Готовить макет к передаче так, чтобы в режиме разработчика были видны решения — компоненты, раскладка, стили, переменные; помечать экраны «готово к разработке»; выгружать значки в SVG и фото растром ×2; записывать пометками ограничения, проверки, поведение и крайние случаи, вести вопросы комментариями; проходить список проверки, проводить встречу передачи и сверять вёрстку с макетом.