Дизайн и 3D
Как изучить Figma с нуля
Figma — редактор интерфейсов, который работает в браузере и позволяет нескольким людям править один файл одновременно. Базовые функции осваиваются за пару недель, а уверенная работа с auto layout и компонентами — за месяц-полтора практики. Эта статья — про инструмент: какие функции учить и в каком порядке.
В этой статье
Что Figma умеет, а чего не делает за тебя#
Figma даёт холст, фигуры, текст, компоненты, прототипы и совместную работу.
Она не решает, где на экране должна стоять кнопка и каким шрифтом набирать
заголовок, — это задачи веб-дизайна как профессии. Если ты учишь дизайн с
нуля, осваивай Figma параллельно с основами композиции и типографики:
инструмент без них быстро упирается в вопрос «что рисовать».
Для старта хватает бесплатного тарифа и браузера; есть и приложение для
компьютера. Интерфейс и названия функций периодически меняются, поэтому
сверяйся с официальной справкой, а не только с роликами годичной давности.
Шаг 1: холст, фреймы и слои#
Первое, что нужно понять: фрейм — это не просто прямоугольник, а
контейнер, внутри которого живут другие элементы; экраны приложения —
это фреймы. Научись создавать фреймы нужного размера из готовых
заготовок устройств, группировать и переименовывать слои, выравнивать и
распределять объекты. Сразу учи горячие клавиши для частых действий:
рамка, прямоугольник, текст, перемещение, масштаб. Хорошее упражнение —
перерисовать экран любимого приложения один в один, сравнивая скриншоты
поверх.
Шаг 2: auto layout#
Auto layout превращает фрейм в «резиновый» блок: элементы внутри
выстраиваются в строку или столбец с заданными отступами, а размер
подстраивается под содержимое. Именно эта функция отличает макет, который
можно менять, от картинки. Собери кнопку, которая растягивается под
длину текста, затем карточку товара, затем список карточек. Проверка:
меняешь текст в кнопке на вдвое длинный — ничего не разваливается.
Шаг 3: компоненты, варианты и свойства#
Компонент — мастер-элемент, копии которого обновляются вместе с ним.
Сделай компонент кнопки, затем объедини её состояния — обычное,
наведение, неактивное — в набор вариантов и добавь свойства: текст,
наличие иконки, размер. Вынеси компоненты на отдельную страницу файла —
это начало твоей маленькой дизайн-системы.
Шаг 4: стили и переменные#
Цвета, шрифты, эффекты и сетки вынеси в стили, а повторяющиеся значения
— отступы, радиусы, цвета для светлой и тёмной темы — в переменные.
Проверка этапа: ты переключаешь тему всего макета одним действием, и ни
один элемент не остаётся со «вшитым» цветом.
Шаг 5: прототип и передача разработке#
Свяжи экраны переходами, добавь простые анимации и наложения,
покажи прототип другу на телефоне. Затем посмотри на макет глазами
разработчика: в режиме просмотра для разработки видны размеры, отступы и
значения стилей. Аккуратно названные слои и компоненты экономят команде
часы.
Частые ошибки начинающих#
- Двигать всё мышью без auto layout — такой макет нельзя поправить.
- Копировать элементы вместо компонентов, а потом исправлять одно и то же
в сорока местах. - Хранить в файле сотни слоёв с именами вида «Rectangle 214».
- Учить плагины раньше базовых функций.
План по этапам
- Шаг 1 — фреймы, слои, горячие клавишиПерерисовать экран известного приложения один в один.
- Шаг 2 — auto layoutКнопка, карточка и список, которые не ломаются от длинного текста.
- Шаг 3 — компоненты и вариантыКнопка с состояниями и свойствами на отдельной странице компонентов.
- Шаг 4 — стили и переменныеЦвета, шрифты и отступы из переменных; смена темы одним действием.
- Шаг 5 — прототип и передачаКликабельный прототип на телефоне, аккуратные имена слоёв для разработчика.
Начать изучать эту тему у себя
План ляжет в твой репозиторий: отмечай этапы, веди конспект — история изменений покажет, как ты продвинулся.
Источники
-
Figma Help CenterОфициальная справка по всем функциям редактора, на английскомбесплатно
-
Figma CommunityОткрытые файлы других дизайнеров, которые можно разобрать по слоямбесплатно
Было полезно?