Чтобы начать работать в Figma, достаточно четырёх понятий: фрейм — контейнер экрана или элемента; Auto Layout — правила, по которым фрейм сам раскладывает содержимое (направление, отступы, промежутки, Hug и Fill); компонент — мастер-элемент, копии которого обновляются вместе с ним; варианты и свойства компонента — его состояния и настраиваемые части. На этих четырёх кирпичах строятся и кнопка, и карточка, и целый экран, который разработчик потом откроет в Dev Mode.
После материала вы сможете
- собрать экран из фреймов и вложенных Auto Layout с правильными настройками Hug contents, Fill container и Fixed
- превратить кнопку в компонент с вариантами Type и State и свойствами для текста и иконки
- собрать адаптивную карточку товара, которая не ломается при длинном названии и изменении ширины
- объяснить, чем стиль отличается от переменной и что разработчик увидит в Dev Mode
Что знать заранее
Проверено на
Figma Design (help.figma.com, 2026-10-11)
Сверено с документацией: 11 октября 2026 г.
Содержание
Интерфейс Figma: файлы, страницы, фреймы, слои
Все шаги урока сверены с официальной справкой help.figma.com на дату проверки. Названия команд и панелей даём так, как они подписаны в англоязычном интерфейсе: Figma регулярно обновляет расположение кнопок, поэтому, если что-то переехало, ищите команду по названию в справке.
Файл Figma Design живёт в облаке: несколько человек могут работать в нём одновременно, а версии сохраняются автоматически. Окно редактора состоит из пяти зон:
Toolbar (панель инструментов)
- Что в ней
- Frame, фигуры, Text, комментарии
- Зачем
- Создавать слои
Navigation bar (левый край)
- Что в ней
- Вкладки File, Assets, Variables и другие
- Зачем
- Переключаться между слоями, компонентами и переменными
Левая панель
- Что в ней
- Содержимое выбранной вкладки: страницы и слои, библиотека компонентов
- Зачем
- Видеть структуру файла
Правая панель свойств
- Что в ней
- Размеры, Auto Layout, заливка, обводка, эффекты, свойства компонента
- Зачем
- Настраивать выбранный слой
Холст (canvas)
- Что в ней
- Фреймы с макетами
- Зачем
- Рисовать и раскладывать
Вкладка File (Alt+1 на Windows, Option+1 на Mac) показывает страницы и слои. Страницы — это отдельные холсты внутри файла. Справка советует разводить по страницам этапы работы и держать главные компоненты на отдельной странице. Для урока создайте три: Explorations — черновики, Designs — готовые экраны, Components — главные компоненты. На бесплатном тарифе Starter в командном файле можно создать не больше трёх страниц — как раз хватит.
Каждый объект на холсте — слой. Слои вкладываются друг в друга: фрейм верхнего уровня (top-level frame) — это обычно экран, внутри него — вложенные фреймы для шапки, карточек и кнопок. Иерархия слоёв в Figma — прямой аналог дерева HTML-элементов: чем аккуратнее вы называете и группируете слои, тем проще разработчику.
Фреймы и constraints
Фрейм — слой-контейнер. В отличие от группы, у фрейма есть собственные размеры, заливка, обводка, скругление, обрезка содержимого (Clip content), и только фрейму доступны Auto Layout, constraints, сетки (layout guides) и прототипирование. Инструмент Frame вызывается клавишей F или A. Клик по холсту создаёт фрейм, протягивание — фрейм нужного размера, а в правой панели появляются готовые пресеты: Phone, Tablet, Desktop и другие. Обернуть уже выбранные слои во фрейм можно сочетанием Ctrl+Alt+G (Option+Command+G на Mac).
Constraints (ограничения) отвечают на вопрос: что происходит со слоем, когда меняют размер родительского фрейма. По горизонтали доступны Left, Right, Left and right, Center и Scale, по вертикали — Top, Bottom, Top and bottom, Center и Scale. По умолчанию стоит Top и Left. Задаются они в разделе Position правой панели.
Left
- Что делает слой при растягивании фрейма
- Держит расстояние до левого края
- Пример
- Логотип в шапке
Right
- Что делает слой при растягивании фрейма
- Держит расстояние до правого края
- Пример
- Кнопка «Войти» справа
Left and right
- Что делает слой при растягивании фрейма
- Держит оба расстояния и растягивается
- Пример
- Поле поиска во всю ширину
Center
- Что делает слой при растягивании фрейма
- Остаётся по центру
- Пример
- Заголовок модального окна
Scale
- Что делает слой при растягивании фрейма
- Сохраняет размер и положение в процентах от фрейма
- Пример
- Декоративный элемент
Auto Layout: направление, отступы, выравнивание, Hug и Fill
Auto Layout — свойство фрейма, которое раскладывает дочерние слои по правилам и перестраивает их, когда содержимое меняется: кнопка растёт вместе с подписью, список сдвигается, когда пункт скрыт. Добавляется сочетанием Shift+A или кнопкой Add auto layout в правой панели. Figma сама предложит направление, его можно сменить.
Vertical / Horizontal
- Что делает
- Раскладывает слои в столбец или строку
- Ближе всего в CSS
- flex-direction: column / row
Wrap
- Что делает
- Переносит слои на новую строку или колонку, когда не хватает места
- Ближе всего в CSS
- flex-wrap: wrap
Grid
- Что делает
- Раскладывает по колонкам и строкам, слои могут занимать несколько ячеек
- Ближе всего в CSS
- display: grid
Padding
- Что делает
- Отступ от краёв фрейма до содержимого
- Ближе всего в CSS
- padding
Gap (число или Auto)
- Что делает
- Расстояние между слоями; Auto распределяет их как Between, Around или Evenly
- Ближе всего в CSS
- gap / justify-content
Hug contents
- Что делает
- Фрейм обтягивает содержимое
- Ближе всего в CSS
- ширина по содержимому (fit-content)
Fill container
- Что делает
- Слой занимает всё свободное место в родителе
- Ближе всего в CSS
- flex: 1 или растягивание по поперечной оси
Fixed
- Что делает
- Размер фиксирован
- Ближе всего в CSS
- width / height в пикселях
Ignore auto layout
- Что делает
- Слой выходит из потока, но остаётся во фрейме
- Ближе всего в CSS
- position: absolute
Ресайз задаётся отдельно по ширине и высоте — в выпадающих списках Width и Height. Важные правила из справки: Hug contents доступен только самому Auto Layout-фрейму, Fill container — только его дочерним слоям. Если хотя бы один дочерний слой поставлен в Fill, родитель по этой оси перестаёт обтягивать содержимое и становится Fixed. Ограничить растягивание можно пунктами Add min width / Add max width (и аналогично по высоте).
Соберём кнопку из урока про состояния компонентов:
Подпись
Инструмент Text (T), кликните на странице Explorations и напишите «Записаться». Задайте шрифт 16 px, начертание SemiBold или Bold.
Auto Layout
Выделите текст и нажмите Shift+A. Текст окажется внутри нового фрейма с Auto Layout. Переименуйте фрейм в button (Ctrl+R на Windows, Command+R на Mac).
Отступы
Направление — Horizontal. Padding по горизонтали 20, по вертикали 12. Gap — 8: он понадобится, когда появится иконка.
Ресайз и вид
Ширина и высота — Hug contents. Заливка — фирменный цвет, текст — белый, скругление — 10.
Проверка
Замените подпись на «Записаться на приём» — кнопка должна вырасти сама, сохранив отступы. Если не растёт, проверьте, не стоит ли у фрейма Fixed width.
Компоненты и экземпляры
Компонент — повторно используемый элемент. Главный компонент (main component) задаёт его свойства, экземпляры (instances) — связанные копии, которые получают все изменения главного. Поменяли радиус у главной кнопки — поменялся радиус у всех кнопок во всех макетах файла. В панели слоёв компоненты отмечены фиолетовой иконкой.
Создать компонент
Выделите фрейм button и нажмите Create component в правой панели, через правый клик или сочетанием Ctrl+Alt+K (Option+Command+K на Mac). Перенесите главный компонент на страницу Components.
Вставить экземпляр
Откройте вкладку Assets (Alt+2 / Option+2) и перетащите компонент на холст. Ещё способы: перетащить главный компонент с зажатым Alt (Option) или скопировать и вставить его.
Переопределить
У экземпляра можно поменять текст, заливку, обводку, эффекты, имя слоя и подменить вложенный экземпляр, например иконку. Это называется override.
Найти главный
Правый клик по экземпляру → Go to main component.
Можно менять в экземпляре
- Текст и его свойства: шрифт, размер, межстрочный интервал
- Заливку и обводку слоёв
- Тени и размытия
- Вложенные экземпляры (swap), например иконку
- Padding и gap у Auto Layout
Нельзя менять в экземпляре
- Порядок слоёв
- Положение слоёв внутри компонента, в том числе в Auto Layout
- Constraints
- Добавлять новые слои — только скрывать существующие
Сбросить переопределения можно в меню More actions рядом с именем компонента в правой панели: Reset → Reset all changes. Там же есть Push changes to main component — перенести правки экземпляра в главный компонент; это работает, только если главный компонент лежит в том же файле. Отвязка экземпляра (detach) превращает его в обычный фрейм и разрывает связь: к ней прибегают редко и осознанно, иначе обновления дизайн-системы до этого места не дойдут.
Варианты и свойства компонента
Вариант — один компонент внутри набора (component set), объединяющего похожие компоненты. Кнопка primary и secondary, в состояниях default, hover, pressed и disabled — это не восемь разрозненных компонентов, а один набор с двумя свойствами варианта. Каждый вариант называется по схеме Свойство=значение, например Type=Primary, State=Hover. Справка подчёркивает: у всех вариантов набора одинаковые свойства, а сочетание значений у каждого уникально. Если два варианта получили одинаковое сочетание, Figma покажет конфликт.
Variant
- Для чего
- Варианты внутри набора: состояние, размер, цвет
- Пример для кнопки
- Type: Primary / Secondary; State: Default / Hover / Pressed / Disabled
Text
- Для чего
- Какой текст можно менять из правой панели
- Пример для кнопки
- Label: «Записаться»
Boolean
- Для чего
- Показать или скрыть слой
- Пример для кнопки
- Show icon: true / false
Instance swap
- Для чего
- Какой вложенный экземпляр можно подменить
- Пример для кнопки
- Icon: стрелка, телефон, календарь
Slot
- Для чего
- Гибкая область, куда в экземпляре можно добавлять содержимое
- Пример для кнопки
- Чаще для карточек и модальных окон, не для кнопки
Свойство варианта
Выделите главный компонент button. Правый клик → Main component → Add variant. Figma создаст копию и объединит обе в набор с фиолетовой пунктирной рамкой.
Назовите свойства
Выделите набор. В разделе Properties правой панели дважды кликните по имени свойства и назовите его State. Значения: Default, Hover, Pressed, Disabled — добавляйте варианты кнопкой под набором или дублированием (Ctrl+D).
Второе свойство
Добавьте свойство Type со значениями Primary и Secondary. Нарисуйте отличия так же, как в матрице «вариант × состояние» из прошлого урока: hover темнее, disabled приглушён.
Текстовое свойство
Внутри главного компонента выделите текстовый слой. В разделе Text наведите на поле текста, нажмите Apply variable/property → Create variable/property, в списке Create выберите Property, назовите его Label.
Иконка
Добавьте в кнопку экземпляр иконки. Для его видимости создайте Boolean-свойство Show icon (раздел Appearance), для замены — Instance swap-свойство Icon (кнопка Apply instance swap property вверху правой панели).
Проверка
Вставьте экземпляр: справа должны появиться выпадающие списки Type и State, поле Label и переключатель Show icon. Вариант по умолчанию — тот, что в левом верхнем углу набора.
Стили и переменные: цвета, текст, отступы
Цвет кнопки, вписанный вручную в каждый слой, — та же проблема, что и кнопка, нарисованная заново на каждом экране. Figma даёт два механизма единого источника значений.
Стиль (style)
- Набор свойств, применяемых разом: шрифт, размер, интервал — в одном текстовом стиле
- Типы: цвет, текст, эффект, сетка (layout guide), анимация
- Стиль нельзя вложить в другой стиль или переменную
- Хорош для типографики и теней
Переменная (variable)
- Одно «сырое» значение: Color, Number, String, Boolean, Timing, Easing
- Может ссылаться на другую переменную того же типа (alias) — так строятся токены
- Поддерживает режимы (modes): светлая и тёмная тема, языки, размеры устройств
- Хороша для цветов, отступов, радиусов
Переменные открываются из Navigation bar → Variables. Там создаётся коллекция и переменные: например, color/brand, color/on-brand, space/padding-x, radius/button. Чтобы применить цветовую переменную, нажмите Apply styles and variables в разделе Fill или Stroke и выберите её; в общем списке переменные показаны квадратными образцами, стили — круглыми. Числовую переменную к отступу или радиусу можно применить, нажав = в поле значения.
Для передачи в разработку у переменной есть Code syntax — имя для кода (Web, Android, iOS), которое потом показывается в сниппетах Dev Mode. Если в CSS проекта цвет называется --color-brand, так и запишите — разработчик увидит знакомое имя, а не шестнадцатеричный код.
Практика: адаптивная карточка товара
Соберём карточку товара, которая сама подстраивается под ширину колонки и не ломается от длинного названия. За основу взят официальный мини-проект Figma с адаптивной карточкой; мы заменили подкаст-карточку на товар и добавили кнопку-компонент.
Фото
Создайте фрейм 280×200 (F), назовите image, скругление 8. В разделе Fill выберите тип Image и загрузите фото товара.
Текстовый блок
Два текстовых слоя: название (16 px, Bold) и цена (16 px, Regular). Выделите оба, Shift+A, направление Vertical, Gap 4, назовите фрейм meta. Обоим текстам задайте ширину Fill container.
Длинное название
У названия в Type settings включите Truncate text и задайте Max lines = 2: длинный текст обрежется многоточием, а не растянет карточку.
Кнопка
Перетащите из Assets экземпляр button, задайте Label «В корзину» и ширину Fill container.
Карточка
Выделите image, meta и кнопку, Shift+A, направление Vertical, Padding 16, Gap 12, добавьте заливку и скругление 12. Назовите фрейм product-card.
Ресайз
У image: ширина Fill container, высота Fixed. У meta: ширина Fill container, высота Hug contents. У самой карточки: Add min width 200, Add max width 360.
Компонент
Выделите product-card и нажмите Create component. Для названия и цены создайте текстовые свойства Name и Price.
Проверка
Растяните карточку от 200 до 360 px: фото и кнопка тянутся, отступы не меняются, у границ карточка останавливается. Вставьте название в три строки — видны две строки и многоточие.
Dev Mode и передача макета разработчику
Dev Mode — режим Figma для разработчиков: в нём смотрят размеры, отступы, цвета и переменные, сгенерированный код, скачивают ассеты и сравнивают версии. Включается переключателем в toolbar или сочетанием Shift+D. По справке, Dev Mode доступен на всех платных тарифах и требует места (seat) типа Full или Dev — это стоит выяснить до старта проекта.
- Mark as ready for dev — дизайнер помечает фрейм, компонент или секцию как готовые, и разработчик видит их в отдельном списке
- Inspect: имя и тип слоя, свойства в виде кода (CSS и другие языки) или списка, применённые стили и переменные
- Compare changes — что изменилось в макете с прошлой версии; для экземпляра — Compare with main component
- Explore component behavior — песочница, где можно переключать варианты и свойства, не меняя файл
- Экспорт ассетов в PNG, JPG, SVG и PDF, аннотации и измерения
- Слои названы по смыслу (button, product-card, meta), а не Frame 247
- Повторяющиеся элементы — экземпляры компонентов, а не отвязанные копии
- Варианты названы так же, как пропсы в коде: Type, State, Size
- Цвета, отступы и радиусы — переменные или стили
- У всех интерактивных компонентов нарисованы состояния, включая focus и disabled
- Карточки и экраны проверены растягиванием до минимальной и максимальной ширины
- Готовые экраны помечены Ready for dev