Панели инструментов и слоев в интерфейсе Фигмы: как их открыть, убрать или увеличить

Аватар автора курса

Автор — Ян Агеенко

Дизайнер с 20-летним опытом работы. Арт-директор в собственной студии. Основатель Гильдии дизайнеров, автор книги «Как стать дизайнером с нуля»

В этом уроке рассказывается о ключевых панелях интерфейса Figma: панели слоёв, панели свойств и панели инструментов. Вы узнаете, где они находятся, за что отвечают и как с ними работать. Также объясняется, как вернуть пропавшие панели и как изменить их размер — как ширину отдельных панелей, так и общий масштаб интерфейса в зависимости от того, работаете ли вы в браузере или в десктопном приложении.

Видео-версия урока

Выбрать плеер:

Какие панели инструментов и слоев есть в фигме

В интерфейсе Figma присутствует несколько основных панелей. Слева расположена панель слоёв (Layers), в которой отображаются страницы и иерархия объектов текущего файла. Рядом с ней находится вкладка Assets — в ней хранятся внешние библиотеки и готовые компоненты, которые можно вставлять в проект. В отличие от слоёв, ассеты не являются частью файла по умолчанию, но после вставки появляются в списке слоёв.

Справа находится панель свойств, также называемая панелью дизайна и прототипа. При выделении любого элемента здесь отображаются его параметры: для текста — шрифт, размер, цвет, выравнивание; для изображений — размеры, режимы наложения, заливка и другие настройки. При переключении на вкладку Prototype в этой же панели появляются опции для настройки взаимодействий и переходов.

В нижней части интерфейса расположена панель инструментов, содержащая такие инструменты, как перемещение (Move), рука (Hand) для навигации по холсту, масштабирование (Scale), фреймы, фигуры, текст, комментарии, перо, карандаш и другие. Также здесь находится кнопка Actions, через которую можно искать ассеты, запускать плагины и использовать инструменты на базе искусственного интеллекта, например, для удаления фона или генерации изображений.

Как вернуть боковые панели в фигме, если они пропали

Если панели в Figma внезапно исчезли, это, скорее всего, произошло из-за случайного нажатия горячих клавиш, скрывающих интерфейс. Вернуть их можно несколькими способами. Во-первых, достаточно кликнуть правой кнопкой мыши в любом месте рабочей области и выбрать в контекстном меню пункт «Show UI» (Показать интерфейс). Во-вторых, можно воспользоваться горячими клавишами: на macOS это Cmd \, на Windows — Ctrl \. Эти сочетания переключают видимость всего пользовательского интерфейса.

Если панели не полностью пропали, а лишь свернулись в узкие полоски по краям, достаточно нажать на маленькую кнопку в верхнем левом углу свёрнутой панели — это развернёт её обратно.

Как увеличить или уменьшить панели инструментов в фигме

Ширину отдельных панелей (левой и правой) можно регулировать вручную: для этого нужно навести курсор на внутренний край панели до появления двунаправленной стрелки и потянуть в нужную сторону. Это позволяет освободить больше места для рабочей области или, наоборот, расширить панель для удобства.

Если же требуется изменить общий масштаб самого интерфейса Figma (например, чтобы сделать элементы крупнее при плохом зрении), способ зависит от того, используется ли браузер или десктопное приложение. При работе в браузере (например, Google Chrome) нужно изменить масштаб самого браузера через его настройки — это повлияет на размер всех элементов интерфейса Figma. В десктопном приложении Figma для изменения масштаба интерфейса следует перейти в меню View и выбрать пункт Interface Scale, где можно выбрать нужный уровень увеличения или уменьшения.

Важно не путать это с масштабированием самого холста (когда нужно приблизить или отдалить экран рабочего пространства) — оно регулируется отдельно через Ctrl (Cmd) + колёсико мыши, горячие клавиши или функцию Zoom в верхней правой части интерфейса и не влияет на размер панелей инструментов.

Другие полезные уроки по Фигме

Как сделать, изменить и посмотреть расстояния и отступы в фигме — межстрочные, между абзацами и другими объектами

В этом уроке вы узнаете, как в Figma работать с расстояниями между объектами и текстовыми элементами. Будет рассказано, как быстро выровнять отступы между слоями, настроить одинаковые интервалы с помощью автолейаутов, измерить расстояние между любыми элементами и правильно задать параметры типографики — включая межбуквенный и межстрочный интервалы, а также отступы между абзацами и пунктами списка.

Как в фигме делать бесплатные мокапы телефонов, айфонов, ноутбуков и одежды с плагинами и без

Статья посвящена использованию мокапов в Figma — от базового понимания, зачем они нужны, до практических способов их создания и интеграции. Рассматриваются как самостоятельное изготовление мокапов, так и применение плагинов, ресурсов Figma Community и внешних инструментов, таких как Photoshop или онлайн-редакторы. Материал будет полезен дизайнерам, желающим профессионально презентовать свои работы в портфолио или клиентским проектам.

Как сделать дизайн-макет сайта в фигме — урок с примерами

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