Душная фигма: 1.2 Панель инструментов

Vladyslav Hryhorenko
4 min readNov 28, 2022

--

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

Нужны вам эти статьи или нет думаю вы поймете сами: Автор статьи ноунейм, работает на фрилансе, с фигмой на «ты» и с поиском информации тоже. Через эти статьи учусь сам и помогаю другим.

Будет душно.

В первой статье мы разбирали пункты меню, в этой статье разберемся с оставшимися панелями и инструментами. И уже в следующей статье перейдем к первым практикам.

Верхняя панель инструментов

Верхняя панель инструментов
  • Move tool
    Мув тул будет всегда выбран, большую часть времени это точно. А еще довольно часто с зажатым cmd(меняем везде на ctrl на виндовс, больше не повторяюсь) Данный инструмент позволяет выбрать что либо, передвинуть ну и увеличение через cmd приближает к курсору
  • Scale tool
    Скейл нужен в редких случаях, если коротко, увеличивает все что выделено, возьмем на примере текста, если тянуть за края с помощью мув тула, будет меняться размер рамки, если тянуть скейлом, будет увеличиваться размер текста и межстрочное расстояние, бывает иногда удобно. После скейла всегра проверяем все элементы на дробные значения. Так же сейчас данный инструмент получил полезную панель справа, где можно задать направление скейла и параметры увеличения
  • Frame
    Создает фрейм(подробнее о различии видов группировок объектов расскажу в следующих статьях). Во фрейме идет вся основная работа. это страница сайта, или экран баннера или приложения.
  • Section
    Создает секцию в секцию удобно объединять фреймы, для группировки, если на экране у вас начинается каша.
  • Slice
    Создает зону, которую удобно экспортировать, например длинный экран можно порезать слайсами и экспортировать на ровные участки. Или так можно создавать связанные карусели для постов.
  • Rectangle
    Создать квадрат
  • Line
    Создать линию
  • Arrow
    Создать стрелку, в целом стрелку можно нарисовать и другими способами
  • Ellipse
    Создать эллипс/круг
  • Polygon
    Создает фигуру с настраиваемым количеством углов
  • Star
    Работа с звездо-образными фигурами
  • Place image…
    Вставить изображение, одно или группу фотографий
  • Pen
    Векторный инструмент, кривые Безье
  • Pencil
    Карандаш, быстро что то нарисовать
  • Text
    Создать текстовое поле.
  • Components
    Библиотека созданных компонентов
  • Plugins
    Библиотека плагинов, установленных и не только
  • Widgets
    Библиотека виджетов
  • Hand tool
    Рука, перемещаться по макету
  • Add comment
    Инструмент комментирования
  • Start conversation
    Аудио-чат внутри фигмы
  • Share
    Инструменты поделиться
  • Present
    Запустить прототип
  • Zoom/view options
    Настройки масштабирования, и еще некоторые инструменты из меню, сама иконка показывает текущий масштаб макета.
  • Далее по центру: если ничего не выделено название файла и проекта, тут можно поменять название.Если выбран объект, тут появляются действия из меню.

Панель слева

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

Панель слоев так же разделяется на страницы и слои. По сути страницы это дополнительные рабочие области.

Я в работе часто использую 4 страницы

  • Thumbnail
    обложка файла
  • InProgress
    Тут все то, над чем мы работаем в текущий момент, все то что нам сейчас нужно в работе. Перешли на следующий этап — отправляем все лишнее в архив чтоб не мешалось
  • Archive
    мастхэв, получили правки, сделали копию всего в архив и только после этого вносим изменения, никогда не знаешь появиться желание откатиться на шаг назад или нет, тут обычно добавляю даты бэкапа с размером текста таким, чтоб видно было из любого масштаба
  • Review
    Сюда скидываем то, что будем показывать заказчику, или то что нужно согласовать, обсудить.

Панель справа

Панель содержит 3 вкладки.

Первая и самая основная для нас, вкладка Design. На этой вкладке находятся основные инструменты с которыми мы будем работать.

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

Вторая вкладка, прототипирование.

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

И последняя вкладка, инспектирование.

На этой вкладке находится все что нужно для верстальщиков, работа с кодом.

Меню помощи

Справа снизу есть кнопочка со знаком вопроса, в данном меню можно найти вспомогательные материалы, горячие клавиши, оставить отзыв, написать вопрос в фигма комьюнити или связаться с поддержкой.

А так же посмотреть обучающие ролики на ютуб от команды Фигмы

Заключение

В следующей статье будем разбирать инструменты объединения объектов в Фигме.

Напоминаю про Телеграм, там можно обсудить все это дело.

Первая статья, введение и обзор

Хлопайте, если вам помогла эта статья и подписывайтесь, чтобы быть в курсе новых статей.

Если есть что добавить, пишите в ТГ

--

--