Тренажёр «Figma: интерфейсы и макеты»: задания с проверкой
Макет интерфейса от фрейма до передачи в разработку: сетки, текстовые и цветовые стили, переменные, auto layout, ограничения, компоненты и варианты, прототип и подготовка к вёрстке.
Как тренироваться
Полный тренажёр повторяет темы после сданной домашней работы: выбирает задания по результатам, показывает ошибки и помогает закрепить материал. Для сохранения результатов нужен аккаунт.
Попробуйте задания без регистрации
Чем фрейм отличается от группы?
Какую ширину фрейма взять для телефона?
Какой интерлиньяж хорош для основного текста размером 16?
Что можно повторить
- Что такое макет: файл, страница, фрейм, слой
Понимать макет как дерево объектов: файл, страницы, фреймы, слои; отличать фрейм от группы и собирать блоки фреймами; читать порядок слоёв и называть слои по смыслу; раскладывать файл по страницам и отделять черновики от готового.
- Фреймы и сетки: размеры экранов и шаг 8
Выбирать размер фрейма в логических точках (телефон 360–390, ноутбук 1280–1440); задавать колоночную сетку — колонки, поля, промежуток — и ставить блоки на целое число колонок; держать все отступы и высоты в шаге 8; собирать экран от рамки к деталям и разделять смысловые части отступами.
- Типографика: шкала, интерлиньяж, стили
Строить типографическую шкалу от базового размера 16 с постоянным отношением; задавать интерлиньяж (текст около 1,5, заголовки 1,1–1,3), длину строки 45–75 знаков и выравнивание; заводить текстовые стили по ролям; выстраивать иерархию размером, насыщенностью, цветом и отступом.
- Цвет: палитра, переменные, контраст, темы
Собирать палитру из акцентного, нейтральных и статусных цветов со шкалами оттенков; заводить переменные в два слоя — палитра и смысловые — и красить экраны смысловыми; проверять контраст числом (4,5:1 и 3:1) и не передавать смысл только цветом; делать тёмную тему режимом переменных.
- Auto layout: блоки, которые подстраиваются
Собирать блоки на auto layout — направление, внутренние отступы, промежуток; выбирать режим размера каждого слоя (hug, fill, fixed) отдельно по ширине и высоте; выравнивать и распределять содержимое, пользоваться переносом и абсолютным положением для наложений; собирать карточку из вложенных auto layout и проверять её длинным текстом.
- Ограничения и растягивание: макет на любой ширине
Привязывать слои к краям родителя (слева, справа, к обоим, к центру) и не масштабировать блоки; ограничивать растущие блоки минимумом и максимумом; перестраивать раскладку в точках перелома, начиная с телефона; проверять макет растягиванием и длинными словами.
- Компоненты: один образец, много копий
Превращать повторяющиеся блоки в компоненты и ставить на экраны экземпляры; переопределять содержимое (текст, значок, видимость) и не трогать устройство; не отсоединять экземпляры; объявлять свойства компонента — текст, да / нет, замена экземпляра; собирать библиотеку снизу вверх и называть компоненты через косую черту.
- Варианты и состояния
Собирать набор вариантов одного компонента со свойствами вариантов (вид, размер, состояние) и раскладывать его сеткой; рисовать состояния — обычное, наведение, нажатие, фокус, отключено, загрузка; не забывать состояния полей и экранов (пусто, загрузка, ошибка); делать вариантами устройство, а свойствами — содержимое.
- Прототип: связи, переходы и проверка на людях
Собирать прототип пути из связей — слой, триггер (нажатие, наведение, удержание, задержка), действие (перейти, назад, поверх); выбирать переходы по смыслу (сдвиг, растворение, умная анимация) длительностью 150–300 мс; настраивать оверлеи, прокрутку и закреплённую шапку, связывать состояния в компонентах; проверять прототип на пяти людях по правилам.
- Передача в разработку
Готовить макет к передаче так, чтобы в режиме разработчика были видны решения — компоненты, раскладка, стили, переменные; помечать экраны «готово к разработке»; выгружать значки в SVG и фото растром ×2; записывать пометками ограничения, проверки, поведение и крайние случаи, вести вопросы комментариями; проходить список проверки, проводить встречу передачи и сверять вёрстку с макетом.