Знакомство с интерфейсом UI3

Интерфейс Figma делится на три зоны: панель слоёв слева, холст по центру и панель свойств справа.

Пока вы не научитесь читать панели, любой урок будет похож на блуждание в тумане. Потратьте десять минут — и интерфейс станет прозрачным.

В 2024 году Figma переехала на интерфейс UI3, где основные инструменты собраны в плавающем тулбаре внизу экрана. Это освободило холст и сделало рабочее пространство шире. Давайте разберём каждую зону.

Карта интерфейса

+--------------------------------------------------+
| File   Изображение   Поделиться   Play  Dev Mode |  <- верхняя строка
+----------+----------------------------+----------+
| СЛОИ     |                            | СВОЙСТВА |
| Pages    |          ХОЛСТ              | Design   |
| Layers   |     (бесконечный)          | Prototype|
| Assets   |                            | Dev Mode |
+----------+----------------------------+----------+
           |   [ инструменты тулбара ]  |          <- нижний тулбар
           +----------------------------+

Левая панель: слои и страницы

Слева сверху — переключатель вкладок File и Assets. Во вкладке File живут две вещи:

Pages (Страницы). Один файл может содержать много страниц — как вкладки в браузере. Полезно делить макет на «Главная», «Профиль», «Архив».
Layers (Слои). Дерево всех объектов на текущей странице. Самый верхний слой в списке — самый верхний визуально.

Вкладка Assets хранит компоненты и библиотеки — до них дойдём позже.

Правая панель: свойства

Справа находится панель свойств выделенного объекта. У неё три вкладки:

Design — размеры, положение, цвет, скругления, тени. Главная вкладка для рисования.
Prototype — связи между экранами для интерактива.
Dev Mode — режим для разработчиков с CSS и размерами.

Нижний тулбар

По центру внизу — плавающий тулбар с инструментами: курсор, фигуры, текст, перо, комментарии. Рядом — кнопка Actions (меню действий и ИИ). Открывается она и по Cmd+K / Ctrl+K.

Контекстное меню и панель свойств

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

Запомните главный принцип правой панели: она контекстная. То, что вы видите справа, зависит от того, что выделено. Ничего не выделено — там настройки страницы и фон холста. Выделена фигура — размеры, заливка, обводка, эффекты. Выделен текст — добавляются параметры шрифта. Выделен фрейм — появляется секция авто-лейаута. Не пугайтесь, что панель «меняется»: она просто показывает релевантное.

Верхняя строка интерфейса тоже важна. Слева — меню Figma (логотип) с файловыми операциями и настройками. По центру — имя файла и история версий. Справа — аватары соавторов, кнопка Share для шеринга, кнопка Play для запуска прототипа и переключатель Dev Mode. Эти кнопки понадобятся в последних разделах курса.

Горячие клавиши

Действие	Клавиша
Инструмент «Курсор» (Move)	`V`
Меню действий	`Cmd/Ctrl+K`
Скрыть/показать панели UI	`Cmd/Ctrl+\`
Переключиться в Dev Mode	`Shift+D`

Частые ошибки

Не замечают вкладки на правой панели. Если пропали свойства дизайна — проверьте, не переключились ли вы случайно на Prototype.
Теряют панели. Случайное нажатие Cmd/Ctrl+\ прячет интерфейс. Нажмите снова, чтобы вернуть.
Путают страницы и фреймы. Pages — это разные «листы» файла, а фреймы — контейнеры внутри одного листа.

Совет профи: настройте под себя

В меню Figma (логотип слева вверху) есть раздел Preferences, где стоит заглянуть в самом начале. Здесь включают/выключают пиксельную привязку, авто-сохранение локальных копий, единицы измерения и поведение по умолчанию. Тёмную тему интерфейса тоже переключают здесь — многим дизайнерам удобнее работать в тёмном UI, чтобы цвета макета не искажались окружением. Привыкайте, что Figma гибкая: почти любую панель можно свернуть, а интерфейс целиком спрятать по Cmd/Ctrl+\, чтобы оценить макет «начисто». Освоив раскладку зон и базовые настройки, вы перестанете тратить внимание на поиск кнопок и сосредоточитесь на самом дизайне.

Чек-лист

Нашёл панель слоёв слева и панель свойств справа.
Понял разницу между вкладками File и Assets.
Открыл меню Actions через Cmd/Ctrl+K.
Знаю три вкладки правой панели: Design, Prototype, Dev Mode.

Итоги. Интерфейс UI3 состоит из левой панели слоёв и страниц, центрального холста, правой панели свойств и нижнего тулбара. Вы научились читать каждую зону. Дальше — навигация по бесконечному холсту.