Как пользоваться Figma: первый макет без хаоса в слоях
В Figma легко за десять минут нарисовать красивую кашу из прямоугольников. Полезный старт другой: фрейм задаёт экран, Auto Layout управляет расположением, компонент хранит повторяемый элемент, а прототип связывает состояния.
Разберитесь в файлах, страницах и фреймах
Файл хранит работу, страницы помогают разделить исследование, черновики, компоненты и готовые экраны, а фрейм задаёт контейнер интерфейса. Не рисуйте экран прямо на бесконечном холсте: без фрейма сложнее управлять размером, обрезкой, сеткой и поведением элементов.
На первом проекте хватит трёх страниц: Drafts, Components и Screens. Названия можно писать по-русски; важнее, чтобы другой человек понял структуру без экскурсии на полчаса. Слои «Rectangle 47 copy 12» быстро превращают правку в археологическую экспедицию.
Если нужна системная практика, сравните программы по графическому дизайну.
Когда текст меняется, контейнер умеет подстроиться - меньше ручной возни и случайных сдвигов.
Компонент хранит повторяемый элемент - кнопку, поле, карточку или навигацию.
Просмотрите прототип с начала, используя не только идеальные данные: длинное имя, пустое поле и неверный пароль быстро показывают дырки.
Auto Layout вместо ручного таскания
Auto Layout располагает дочерние элементы по направлению, отступам и интервалам. У кнопки текст получает внутренние отступы, у карточки заголовок и описание собираются вертикально, у списка повторяются карточки. Когда текст меняется, контейнер умеет подстроиться - меньше ручной возни и случайных сдвигов.
Разберитесь с режимами Hug contents, Fill container и Fixed. Первый подгоняет размер под содержимое, второй занимает доступное пространство, третий фиксирует размер. Эти три режима объясняют большую часть поведения. Если элемент прыгает, не ругайте Figma вслух: сначала посмотрите, кто его родитель и какой режим задан.
Компоненты и варианты
Компонент хранит повторяемый элемент - кнопку, поле, карточку или навигацию. Экземпляры получают обновления от главного компонента, но могут иметь локальные значения. Варианты удобно используют для состояний: default, hover, disabled, selected.
Не превращайте в компонент каждый декоративный кружок. Хорошее имя описывает роль: Button/Primary, Input/Error, Card/Course.
- используйте стили или переменные для цветов и текста;
- задавайте понятные свойства вариантов;
- не отсоединяйте экземпляр без причины;
- проверяйте длинный текст и пустые состояния;
- собирайте библиотеку постепенно из реального проекта.
Прототип, комментарии и передача
Во вкладке Prototype выберите триггер, действие и целевой фрейм. Для первого сценария свяжите кнопку входа, экран ошибки и успешный переход. Просмотрите прототип с начала, используя не только идеальные данные: длинное имя, пустое поле и неверный пароль быстро показывают дырки.
Комментарии привязывают обсуждение к месту макета. Dev Mode помогает читать спецификацию, но не заменяет договорённость о логике компонента.
Вывод KGAM. Сначала зафиксируйте нужный результат и ограничение, затем соберите минимальный черновик и проверьте его на реальной задаче. Такой порядок быстро показывает, где инструмент действительно помогает, а где только создаёт видимость бурной работы.