Правая и левая боковые панели Figma

Figma включает две основные боковые панели, которые упрощают дизайнерский процесс. Левая панель ориентирована на организацию и содержит вкладки «Слои» (Layers) и «Ресурсы» (Assets). Правая панель меняет своё содержание в зависимости от выбранных элементов. Она включает панель «Дизайн» (Design), управляющую визуальными характеристиками, такими как цвет и типографика; панель «Прототип» (Prototype), предназначенную для создания интерактивных взаимодействий и поведения интерфейса; а также панель «Режим разработчика»/«Инспектирование» (Dev Mode/Inspect), полезную для разработчиков при извлечении фрагментов кода.

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

Панель «Design» (Design panel)

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

Для выбранных слоёв панель «Дизайн» предоставляет следующие основные функции:

• Выравнивание и распределение: настройка взаимного расположения элементов относительно друг друга.
• Позиция и размеры: точная установка местоположения и габаритов элементов, включая угол поворота.
• Ограничения (Constraints) и сетка макета (Layout grid): определение адаптивного поведения элементов и структуры макета.
• Свойства компонентов и их экземпляров: управление переиспользуемыми компонентами и их копиями (инстансами).
• Auto layout (Автоматическое размещение): автоматическое управление отступами и выравниванием элементов.
• Текст, заливка, контуры и эффекты: настройка визуальных характеристик, таких как шрифты, цвета, границы и тени.

Панель «Prototype» (Prototype panel)

Панель «Prototype» играет важную роль при создании интерактивных прототипов в Figma. Для начала выберите любой объект на холсте. Затем вы можете:

• Установить точку начала потока (flow starting point): это задаёт начальный экран, с которого пользователи начнут просмотр прототипа.
• Добавить взаимодействие: открыв окно «Interaction Details» («Настройки взаимодействий»), вы можете определить, как ваш прототип будет реагировать на действия пользователя. Здесь настраиваются триггеры (например, нажатие или наведение), действия (что произойдёт при активации триггера) и плавные анимации переходов.
• Настроить поведение при прокрутке: выбрать, как ведёт себя прототип при прокрутке страницы, что важно для реалистичного восприятия длинных макетов.
• Управлять настройками прототипа: настроить отображение устройства и фона прототипа.

Кроме того, создавать интерактивные связи можно прямо на холсте в режиме «Prototype», просто перетаскивая линии связи между объектами.

Панель «Режим разработчика»/«Инспектирование» (Dev Mode/Inspect)

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

• Просмотр и копирование свойств: разработчики могут легко просматривать и копировать свойства, значения и даже готовые фрагменты кода напрямую из элементов дизайна, упрощая точную реализацию в коде.
• Сравнение версий кадров (фреймов): разработчики могут отслеживать изменения, сравнивая разные версии одного кадра с момента последнего просмотра.
• Инспектирование и навигация: Dev Mode подчёркивает важную информацию о слоях, облегчая навигацию и проверку дизайна.
• Определение дизайнов, готовых к разработке: с помощью статусов секций можно быстро найти части дизайна, готовые к реализации в коде.
• Интеграция с рабочими процессами: поддерживает интеграцию с инструментами вроде Jira, Storybook и GitHub, упрощая работу команды разработки.
• Добавление ссылок и ресурсов: разработчики могут прикреплять ссылки и дополнительные ресурсы к компонентам для быстрого доступа.

Панель комментариев (Comment panel)

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

Для упрощения работы предусмотрены следующие функции:

• Поиск комментариев: используйте поле поиска, чтобы быстро найти комментарий по ключевому слову.
• Фильтрация комментариев: доступна возможность фильтрации комментариев по дате или отображению только непрочитанных.
• Управление настройками и уведомлениями: с помощью настроек можно скрыть иконки комментариев для более чистого вида или настроить уведомления, чтобы быть в курсе новых комментариев или обновлений в файле.

Панель «Свойства» (Properties panel)

Панель свойств на правой боковой панели доступна пользователям с доступом «только для просмотра» и предназначена для инспектирования и управления слоями на холсте. Чтобы воспользоваться ею, нужно сначала выбрать слой, щёлкнув по нему на холсте или в панели слоёв на левой боковой панели. Можно выбрать любой тип слоя: фигуру, текст, группу или фрейм. После выбора слоя панель свойств отображает различные его характеристики, такие как название, параметры расположения, размеры и цвета.

Щёлкнув по слою правой кнопкой мыши, можно открыть дополнительные опции, например:

• Копировать слой
• Копировать или вставить слой в виде кода (CSS для веба, платформенно-ориентированный код для iOS или Android), SVG или PNG
• Копировать ссылку на слой или его свойства
• Выбрать другой слой из текущего выделения

Панель «Слои» (Layers panel)

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

Чтобы выбрать несколько слоёв одновременно разными способами, удерживайте клавишу Shift или Command (Mac), Ctrl (Windows). Дважды щёлкните по элементу, чтобы переименовать его для удобства идентификации. Правый клик на элементе откроет дополнительные действия, например дублирование или удаление. Также доступна настройка подсветки слоёв при наведении курсора, которую можно найти в разделе Menu («Меню») > Preferences («Настройки»).

Совет! Нажмите Command + Shift + \ (Mac) или Ctrl + Shift + \ (Windows), чтобы быстро скрыть или показать левую боковую панель.

Панель «Ресурсы» (Assets panel)

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

Чтобы открыть панель ресурсов, нажмите вкладку «Assets» («Ресурсы») в левой панели или используйте сочетание клавиш:

• Mac: Option + 2
• Windows: Alt + 2

Чтобы добавить компонент на панель ресурсов, кликните по нему правой кнопкой мыши и выберите пункт «Add to Assets» («Добавить в ресурсы»). После добавления компоненты можно вставлять в любую часть проекта, просто перетаскивая их из панели.

На панели ресурсов можно также искать компоненты, управлять библиотеками через окно Libraries («Библиотеки»), переключать отображение между видом сетки и списком, фильтровать компоненты по библиотекам, просматривать локальные компоненты и подключённые библиотеки.

Совет! Figma организует компоненты на панели ресурсов по файлам, страницам и фреймам, отображая их в виде пути. Чтобы раскрыть список элементов, кликните на стрелку рядом с названием файла, страницы или фрейма.

Библиотеки (Libraries)

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

Чтобы использовать общие элементы из библиотек, откройте доступ к ним через панель ресурсов следующим образом:

• Нажмите на иконку в виде книги в панели ресурсов, чтобы открыть окно управления библиотеками (Library modal).
• В окне будет показан список доступных библиотек.
• Активируйте нужные библиотеки, переключив их статус на включённый.

После активации компоненты и стили из выбранных библиотек появятся на панели ресурсов.

Страницы (Pages)

Страницы в Figma похожи на отдельные листы в пределах одного файла и служат для структурной организации различных частей вашего проекта. Они идеально подходят для разделения стадий проектирования, пользовательских сценариев (user flows) или отдельных компонентов. Каждая страница имеет холст размером от -65,000 до +65,000 по обеим осям, на котором можно размещать фреймы, группы и отдельные слои.

Управление страницами происходит через левую панель («Layers»):

• Просмотр страниц: кликните по названию текущей страницы, чтобы открыть список всех страниц.
• Создание новых страниц: нажмите на иконку «+» внизу списка страниц.
• Дублирование страниц: щёлкните правой кнопкой мыши по названию страницы и выберите «Duplicate» («Создать копию»).
• Переименование страниц: используйте двойной щелчок по названию или правый клик и пункт «Rename» («Переименовать»).
• Удаление страниц: правый клик и пункт «Delete» («Удалить»).
• Изменение порядка страниц: перетащите страницы на нужную позицию в списке.
• Перемещение слоёв между страницами: правый клик на слое, затем выберите «Move to page» («Переместить на страницу») и укажите целевую страницу.

Совет! Чтобы настроить ширину левой панели, наведите курсор на её правый край, пока не появится стрелка, и перетащите край на нужное расстояние.

Холст (Canvas)

Холст в Figma — это рабочая область, на которой создаются ваши дизайны. Его можно представить как виртуальный лист бумаги, на котором вы размещаете все элементы. Это видимая часть вашего файла дизайна. Размеры холста задаются в диапазоне от -65,000 до +65,000 по каждой оси, при этом его можно масштабировать, увеличивая или уменьшая отдельные участки.

Когда вы выбираете элемент на холсте, правая боковая панель позволяет изменять его параметры: размер, положение, цвет и многое другое. Здесь происходит точная настройка внешнего вида и поведения элементов дизайна. Фон холста можно изменить, сняв выделение со всех слоёв и выбрав нужный цвет с помощью инструмента выбора цвета в разделе «Background» («Фон») на правой панели.

Совет! По умолчанию векторы отображаются на холсте в виде независимых от разрешения контуров. Однако для точного редактирования растровых элементов можно включить режим предварительного просмотра в пикселях (Pixel Preview) в разрешениях 1x и 2x.