Панель инструментов Figma, расположенная в верхней части экрана, обеспечивает доступ к основным инструментам и функциям программы. Она включает самые необходимые инструменты, гарантируя, что всё необходимое всегда под рукой. Знакомство с этой панелью — первый шаг к раскрытию вашего творческого потенциала в Figma. Даже будучи новичком, вы обнаружите, что можете легко экспериментировать и создавать базовые фигуры, формируя основу для более сложных дизайнов по мере роста ваших навыков.
Главное меню (Main menu)
Главное меню, обозначенное логотипом Figma в верхнем левом углу, предоставляет доступ к уникальным функциям, наряду с распространёнными инструментами, доступными также из других частей интерфейса или через сочетания клавиш.
Это меню незаменимо для выполнения некоторых действий, доступных только здесь, таких как:
- Создание новых файлов
- Доступ к плагинам
- Настройка особых параметров отображения, таких как сетка макета (layout grid) или предпросмотр пикселей (pixel preview)
Кроме того, именно здесь можно получить помощь или выйти из своего аккаунта — эти функции не дублируются в других частях интерфейса. Хотя меню включает и знакомые инструменты для редактирования объектов и текста, его главное отличие — эксклюзивные функции. Это удобный центр управления, в котором сосредоточены важнейшие операции, связанные с файлами, настройкой отображения и доступом к дополнительным ресурсам, что делает его ключевой частью работы в Figma.
Инструмент «Перемещение» (Move tool)
Когда активирован инструмент перемещения, указатель мыши принимает форму специальной стрелки. Эта стрелка отличается от обычного курсора браузера и предназначена специально для дизайнерской работы. Она служит ясным визуальным сигналом о том, что вы находитесь в режиме, предназначенном для активного управления элементами дизайна.
Данный специальный указатель упрощает выбор и изменение порядка слоёв в панели слоёв. Он также позволяет точно перемещать объекты по рабочей области. Чтобы переместить объект, просто щёлкните по нему и перетащите с помощью мыши или сенсорной панели. Для более точного и небольшого смещения можно использовать клавиши со стрелками.
Совет! Чтобы быстро выбрать инструмент перемещения, используйте клавишу V на Windows и Mac.
Инструмент «Масштаб» (Scale tool)
Инструмент масштабирования, необходимый для пропорционального изменения размеров объектов с сохранением их пропорций, немного скрыт на панели. Чтобы его найти, щёлкните стрелку рядом с инструментом перемещения на панели инструментов. После этого откроется список дополнительных инструментов, среди которых инструмент масштабирования можно распознать по иконке в виде контура квадрата со стрелкой в правом углу. Также инструмент можно быстро активировать нажатием клавиши K на Windows и Mac.
Этот инструмент незаменим при изменении размеров слоёв и объектов. Он умело игнорирует ограничения вложенных слоёв, обеспечивая равномерное масштабирование всех элементов. Даже такие свойства, как размытие (blur) и контуры (strokes), масштабируются пропорционально.
Как пользоваться инструментом масштабирования:
- Активируйте инструмент масштабирования.
- Щёлкните на объекте, размер которого хотите изменить.
- Переместите курсор к границе объекта до появления указателя масштабирования, затем зажмите и потяните для изменения размера.
Совет! Чтобы масштабировать объект пропорционально, удерживайте Shift при перетаскивании одного из угловых маркеров объекта.
Инструмент «Фрейм» (Frame tool)
Фреймы (Frames) в Figma похожи на монтажные области (артборды) в других дизайнерских программах и служат для определения конкретных областей на рабочем пространстве для ваших дизайнов. Фреймы важны для структурирования элементов дизайна, организации макета и эффективного управления рабочим процессом.
Чтобы выбрать инструмент фреймы, нажмите клавишу A или F либо щёлкните по его значку на панели инструментов. Этот значок легко узнать по изображению четырёх пересекающихся линий. Фреймы можно создавать непосредственно на холсте, указав нужные размеры вручную, либо выбрать один из готовых пресетов размеров в правой панели инструментов.
Инструмент «Раскройка» (Slice tool)
Инструмент «раскройка» (Slice tool), доступный после щелчка на стрелку рядом с инструментом рамки, имеет иконку в виде ножа и предназначен для выделения областей экрана для последующего экспорта.
При выборе инструмента «раскройка» указатель мыши принимает форму перекрестья, подчёркивая точность выделения областей для экспорта. Чтобы быстро активировать инструмент, нажмите клавишу S на клавиатуре.
В отличие от инструмента Фрейм, используемого для проектирования и структурирования макетов, инструмент «раскройка» фокусируется на точном выделении конкретных частей экрана (слайсов) для экспорта. Это обеспечивает точный контроль за тем, какие именно участки вашего дизайна будут экспортированы в виде отдельных изображений, что делает инструмент незаменимым для экспорта отдельных элементов без изменения общего макета.
Инструмент «Перо» (Pen tool)
Инструмент «Перо», обозначенный на панели иконкой в виде классического пера, доступен с помощью клавиши P и представляет собой мощный инструмент для дизайнеров. Он специально предназначен для создания пользовательских форм и иконок, позволяя строить сложные векторные объекты. Для этого используются векторные контуры (пути), узловые точки и кривые Безье, обеспечивающие высокую точность и контроль.
Чаще всего инструмент «Перо» применяется для создания логотипов, уникальных графических элементов или сложных векторных иллюстраций. Он предоставляет точность и универсальность. Независимо от того, разрабатываете ли вы фирменный стиль или добавляете детали в цифровую иллюстрацию, именно этот инструмент позволяет создавать чёткие и ровные линии и кривые в вашем дизайне.
Инструмент «Карандаш» (Pencil tool)
Инструмент «Карандаш», обозначенный иконкой карандаша, позволяет создавать рисунки от руки, добавлять заметки или художественные детали к вашему дизайну. Он находится на панели инструментов под выпадающим списком инструмента «Перо», благодаря чему легко доступен, но при этом аккуратно скрыт.
Этот инструмент идеально подходит для набросков идей или добавления элементов ручной графики, внося в цифровой дизайн естественность и живость. Figma облегчает задачу, автоматически сглаживая контуры во время рисования. А если потребуется дополнительно настроить пути и узловые точки, просто нажмите Return (на Mac) или Enter (на Windows), чтобы перейти в режим редактирования векторов.
Совет! Быстро активировать инструмент «Карандаш» можно с помощью сочетания Shift + P как на Mac, так и на Windows.
Инструменты создания фигур (Shape tools)
Figma предлагает несколько стандартных инструментов для создания фигур, каждый из которых отмечен соответствующей иконкой. Чтобы нарисовать фигуру, просто выберите нужный инструмент из выпадающего списка и перетащите указатель на рабочем пространстве.
Доступные фигуры и их сочетания клавиш:
- Прямоугольник: R
- Линия: L
- Стрелка: Shift + L
- Эллипс: O
- Многоугольник (Polygon)
- Звезда (Star)
Также есть возможность разместить изображение на рабочей области с помощью клавиш:
- Mac: Shift + Command + K
- Windows: Shift + Ctrl + K
Совет! Чтобы рисовать фигуры с равными пропорциями (например, идеальный квадрат или круг), удерживайте клавишу Shift при перетаскивании указателя по рабочему пространству.
Инструмент «Текст» (Text tool)
Текст является ключевым элементом интерфейсов: его расположение, оформление и выбор шрифта существенно влияют на общее восприятие и внешний вид дизайна.
Чтобы добавить текст в проект в Figma, выберите инструмент текста на панели инструментов или нажмите клавишу T. Это позволит вам создать текстовые слои внутри дизайна.
Если нужен текстовый слой, расширяющийся горизонтально, достаточно один раз щёлкнуть мышью на рабочем пространстве. Если вам требуется текстовый блок с фиксированными размерами, щёлкните и перетащите указатель, определяя его габариты. Такая гибкость создания текстовых слоёв позволяет добиться идеального соответствия текстового контента общей гармонии дизайна.
Инструмент «Рука» (Hand tool)
Инструмент «Рука» помогает свободно перемещаться по файлу, предотвращая случайный выбор или смещение объектов. Чтобы использовать его, просто зажмите и удерживайте клавишу пробела.
Этот инструмент особенно полезен при работе над сложными дизайнами, когда необходимо сместить область просмотра, не влияя на макет. На сенсорных устройствах инструмент «Рука» делает навигацию ещё проще и интуитивнее, позволяя легко перемещаться по файлу с помощью жестов. Он идеально подходит для обзора больших проектов и демонстрации дизайна клиентам.
Инструмент «Комментарий» (Comment tool)
Инструмент комментариев в Figma, обозначенный иконкой в виде диалогового облака, предназначен для удобного общения и обсуждения задач внутри команды. Он идеально подходит для обсуждения изменений, ответа на отзывы и уточнения деталей дизайна непосредственно в самом файле. После активации курсор превращается в иконку комментария, позволяя оставлять замечания в любой точке вашего дизайна.
Чтобы отправить комментарий, просто нажмите Return (Mac) или Enter (Windows). Этот инструмент ставит совместную работу на первый план, позволяя любому участнику с доступом к просмотру или редактированию файла присоединиться к обсуждению. Это эффективный способ собрать обратную связь и быстро внести изменения в проект, гарантируя, что вся команда будет в курсе происходящего, не выходя из среды Figma.
Совет! Быстро активировать инструмент комментариев можно клавишей C.