Душная Фигма: 1.1 Панель настроек

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

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

Будет душно.

С чего начнем

Если вы нашли эту статью, скорее всего вы уже что то знаете о фигме, ну как минимум вы знаете что это и для чего используется. И уж точно вас не нужно учить регистрироваться где либо. Скажу лишь то, что для комфортной работы вам понадобиться десктопная версия программы, скачать ее можно по ссылке https://www.figma.com/downloads/.

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

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

Начинам

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

Думаю стоит начать, по традиции, с панелей, которые представлены в программе и что вообще нам тут делать.

Различные панели в Фигме

Все иллюстрации к данной статье выполнены в фигме, с помощью встроенных инструментов и снимка/записи экрана

Навигационная панель

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

Меню и инструменты

Вторая панель сверху отвечает за меню, настройки и доступные инструменты. Используется довольно часто.

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

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

Quick actions…

Поиск внутри Фигмы, очень удобно, обычно вызывается горячими клавишами. Поможет найти инструмент, пункт меню, или что вам еще может понадобиться. Я довольно часто вызываю через него плагины.

Меню — файл

Меню/файл

• Создание новых файлов(New design file, New FigJam file, New from Sketch file…) но обычно есть способ создать файл проще.
• Place image… Вставка изображений, я обычно вставляю изображение переносом, или копирую в браузере и вставляю через cmd+V, мне кажется так привычнее
• Варианты сохранения(Save local copy…, Save to version history…, Show version history) В фигме есть автосохранение. Но вот история версий это тот инструмент который может тут пригодиться, если вы что то поменяли, вам сказали откатиться назад, а вы не сохранили копию в архив. Вы можете открыть нужный момент в истории версий, сделать дубликат и восстановить данные.
• Экспорт(Export…, Export frames to PDF…) Не из меню, но нужная вещь. Если прокачать названия слоев, можно прям комфортно все экспортировать. Поймете, когда будете работать с большим объемом информации с страниц

Меню — редактировать

Меню/редактировать

• Undo/redo о полезности данных команд не стоит даже говорить, быстренько откатиться, если далеко ушел, можно повторить.

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

• Copy. cmd+C зачастую копирую через стандартную команду, копировать как свг бывает полезно для разработки, так же как и копировать как css. А вот копировать как пнг по сути быстрый экспорт изображения. Постоянно используется. Также есть функция копировать свойства объекта. alt+cmd+Cраньше использовал часто, сейчас реже из-за того что данная команда копирует все свойства, заливку, обводку, скругления углов а часто бывает нужно скопировать какое то отдельное свойство, проще его выбрать отдельно и скопировать, сейчас подробно не рассматриваем.

Демонстрация работы copy

• Дальше режимы вставки. cmd+V обычно вставляет с параметрами положения, сохраняются ограничители. Paste over selection вставляет из буфера в начало координат выделенного объекта. Paste to replace заменяет выделенный объект, объектом который вы скопировали.

Демонстрация работы paste

• Duplicate Дублировать. Обычно выполняется мув тулом. Выбираем мув тул, зажимаем альт, и тянем объект. появляется его копия. Отпускаем и копия остается на месте. Если после этого нажать горячую клавишу cmd+d, следующая копия появиться на том же расстоянии как и первая копия от оригинала.

Демонстрация работы Duplicate

• Delete тут думаю не нужны комментарии, удалить.
• Find… найти в документе, ищет по тексту, в названиях и внутри текста, бывает полезно
• Find next переключает к следующему найденному объекту
• Find previous переключает к предыдущему найденному объекту
• Find and replace… можно найти и поменять часть текста в названии или текстовом слое
• Свойства. Блок с свойствами начинается с пункта который я пропустил, но у меня никогда не было такой задачи на самом деле. Теперь буду знать. Set default properties можно настроить какой будет появляться новый объект. Как я понял работает с заливкой, обводкой и эффектами. И как я понял, работает только с фигурами. Не особо полезно, все таки. Если коротко, берем объект, задаем стили и нажимаем эту команду, каждый следующий будет появляться такой же. Почему это плохо? Нам нужно помнить что мы там поставили и каждый раз вспоминать что у нас там в дефолтных свойствах. Проще дублировать. Copy/paste properties уже показывал выше
• Дальше много команд выбора, я пользуюсь не часто, обычно руками выделяю, может это и ошибка но пользоваться ими не очень удобно.

Меню/просмотр

• Pixel Grid показать/скрыть пиксельную сетку, ее видно при большом увеличении, когда она включена
• Layout grids показывает/скрывает сетку которую вы добавили через панель дизайн.
• Rulers показывает/скрывает линейку на рабочей области
• Show slices показать/скрыть слайсы(что то вроде фрейма, но только для экспорта) Остановимся чуть позже когда дойдем до инструментов
• Comments показать/скрыть комментарии
• Outlines показать все объекты в контуре. Можно включить так же невидимые слои и границы объектов(текстовых полей например) редко использую данный режим
• Pixel preview есть несколько режимов, показывает как будет выглядеть объект в растровом представлении. условно если вы экспортируете его в jpg. Обычно отключено
• Mask outlines показывает границы маски, обычно выключено
• Frame outlines показывает границы фрейма
• Resource use показывает сколько памяти устройства используется, возможно будет полезно на слабых устройствах
• Show/Hide UI показывает или скрывает боковые панели слева и справа, когда нужно посмотреть то что вы сделали и чтобы ничего не отвлекало, полезно
• Multiplayer cursors показывает или скрывает курсоры, если вы работаете в файле не один, можно выключить если у вас слабое устройство
• Panels Можно с помощью горячих клавиш переключать панели слева и справа, но обычно в работе используется панель слоев и дизайн панель так что переключение с помощью горячих клавиш не прям необходимо. Показать/скрыть левую панель, не пользовался, может быть полезно на маленьком экране, но обычно панель слоев нужна.
• Zoom Часто использую зум на 100%, остальное почти не использую
• Дальше команды тем у кого есть расширенная клавиатура, я обычно перемещаюсь по макету трекпадом на ноутбуке, если с мышкой то это cmd+колесо прокрутки плюс пробел. Не знаю кто переключается через эти команды. Если есть такие, отпишитесь, интересно прям)

Меню/Объект

• Group selection
  объединяет элементы в группу
• Create section
  создание секции, новый вид группировки объектов в фигма. Подробнее в статье по группировке объектов.
• Convert to section
  Делает секцию из группы или фрейма
• Convert to frame
  делает фрейм из секции или группы
• Frame selection
  создаем фрейм с выбранными элементами
• Ungroup selection
  разбираем группу, фрейм, автолэйаут
• Use as mask
  Превращает объект в маску, если выбран один объект. Если выбрано несколько объектов границами маски будут границы самого нижнего объекта. По сути это фрейм у которого включили клип контент. Но маску можно сделать из чего угодно(текст, фигура, векторная форма)
• Set as thumbnail
  Делает из фрейма обложку файла. Используем каждый раз, когда создаем новый файл. Обычно я делаю обложку с соотношением сторон 16х9
• Add auto layout
  Преобразует выделенные объекты в автолэйаут, одна из самых важных команд
• Create component
  Создает из выбранных объектов компонент, важная команда, но я обычно кнопкой в интерфейсе делаю
• Reset all changes
  Восстанавливает экземпляр к состоянию компонента. Важно когда вы чего то наделали, после чего решили вернутся к тому с чего начали.
• Detach instance
  В экземплярах не все можно менять. Но иногда удобно взять за основу экземпляр который у вас уже есть, и переделать его так как нужно. Для этого нам нужно разобрать имеющийся экземпляр. Нельзя применить к компоненту

Main component

• Go to main component Переносит от экземпляра к компоненту
• Push changes to main component Вам очень понравилось то что вы сделали с экземпляром? отправьте все изменения в компонент.
• Restore main component Если так вышло что вы где то потеряли, стерли родительский компонент, его можно восстановить, думаю что могут быть ситуации в которых вы его не восстановите.
• Bring to front
  переносит слой наверх внутри группы/фрейма
• Bring forward
  переносит на один слой выше
• Send backward
  переносит слой на один слой ниже
• Send to back
  переносит слой вниз
• Flip horizontal
  отражает объект по горизонтали(это слева на право)
• Flip vertical
  отражает объект по вертикали(сверху вниз)
• Rotate 180º
  поворачивает объект на 180º
• Rotate 90º left
  поворачивает на 90 влево
• Rotate 90º right
  и в право соответственно
• Flatten selection
  объединяет объекты в единое целое, полезно для работы с вектором
• Outline stroke
  делает из объектов с обводной объекты с заливкой. линию может перевести в вектор, для работы с ней не как с линией а как с объектом

Boolean groups

• Union selection — объединяет объекты в один
• Subtract selection — вычитает верхний объект из нижнего
• Intersect selection — оставляет только объект пересечения двух объектов
• Exclude selection — убирает только зону пересечения, оставляя все остальное
• Rasterize selection
  растрирует объект, переводит все что угодно в изображение
• Show/hide selection
  показать скрыть слой из видимости
• Lock/Unlock selection
  заблокировать слой
• Hide other layers
  спрятать другие слои, работает отдельно внутри группы, фрейма(вернуть все слои )
• Collapse layers
  свернуть все группы и фреймы
• Remove fill
  убирает заливку слоя
• Remove stroke
  убирает обводку слоя
• Swap fill and stroke
  меняет местами обводу и заливку слоя

Меню/Текст

• Bold
  увеличивает толщину шрифта
• Italic
  меняет начертание на курсивное
• Underline
  подчеркивание
• Strikethrough
  зачеркивает текст
• Create link
  создание ссылки
• Bulleted list
  создание списка с булитами
• Numbered list
  создание нумерованного списка
• Alignment
  выравнивание внутри текстового контейнера
• Text align left
  вырвнивает текст по левому краю
• Text align center
  по центру
• Text align right
  по правому краю
• Text align justified
  распределяет по ширине
• Text align top
  сверху
• Text align middle
  по центру
• Text align bottom
  снизу
• Adjust
  регулировки текста
• Increase indentation
  увеличить отступ абзаца
• Decrease indentation
  уменьшить абзац
• Increase font size
  увеличить шрифт
• Decrease font size
  уменьшить шрифт
• Increase font weight
  увеличить толщину шрифта
• Decrease font weight
  уменьшить толщину
• Increase line height
  увеличить высоту строки
• Decrease line height
  уменьшить высоту строки
• Increase letter spacing
  увеличить расстояние между символами
• Decrease letter spacing
  уменьшить расстояние
• Case
  начертание
• Original case
  исходное начертание
• Uppercase
  заглавными символами
• Lowercase
  прописными символами
• Text direction
  направление текста
• Left to right
  слева направо
• Right to left
  с права на лево(нужно использовать арабский текст чтобы это работало)

Меню/Расположить

• Round to pixel
  округляет координаты позиции объекта на холсте(убирает десятичные в позиции)
• Align left
  выравнивает объекты по самому левому
• Align horizontal centers
  выравнивает объекты по горизонтальному центру
• Align right
  выравнивает объекты по самому правому
• Align top
  выравнивает объекты по самому верхнему
• Align vertical centers
  выравнивает объекты по вертикальному центру
• Align bottom
  выравнивает объекты по самому нижнему
• Tidy up
  распределяет несколько объектов так, чтобы у них был одинаковый отступ
• Pack horizontal
  собирает объекты один рядом с другим по горизонтали
• Pack vertical
  собирает объекты один рядом с другим по вертикали
• Distribute horizontal spacing, Distribute left, Distribute horizontal centers, Distribute right
  распределяет объекты по ширине, крайние элементы остаются на своих местах, вроде как должно. Вроде как должен меняться элемент от которого идет выравнивание, но по сути работает одинаково.
• Distribute vertical spacing, Distribute top, Distribute vertical centers, Distribute bottom
  распределяет объекты по высоте, крайние элементы остаются на своих местах

Меню/Вектор

• Join selection выбираем 2 точки, нажимаем, получаем соединение(нужно перейти в режим вектора, выбрать объект, а нажать Ввод или выбрать перо)
• Smooth join selection Соединяет 2 точки плавно, с настройкой кривых безье
• Delete and heal selection Удаляет точку но сохраняет соединение.

Меню/Настройки

• Snap to geometry Привязывает объект при перемещении к геометрии
• Snap to objects Привязывает объект при перемещении к другим объектам
• Snap to pixel grid Привязывает объект при перемещении к пиксельной сетке
• Keep tool selected after use Оставляет инструмент выбранным после использования. Обычно выключено
• Highlight layers on hover Подсвечивает слои при наведении, удобно, оставляем
• Rename duplicated layers Переименовывает слои после дублирования, увеличивает номер
• Show dimensions on objects Показывает размеры выделенного объекта
• Hide canvas UI during changes Скрывает интерфейс во время редактирования объекта
• Substitute smart quotes Заменяет дюймы кавычками, работает с английским языком
• Show Google Fonts Показывает шрифты гугла в фигме
• Flip objects while resizing Переворачивает объект при изменении размера(если вы во время изменения размера переворачиваете объект он отразится) если вырубить, объект не переворачивает
• Keyboard zoom into selection При изменении масштаба через клавиатуру, ставит выбранный объект в центр
• Invert zoom direction Инвертирует направления зума, мышка зумит в другую сторону
• Use number keys for opacity Цифры над клавишами меняют прозрачность выбранного слоя
• Theme: Light, Dark, System theme Выбирает тему, светлая, темная или тема по умолчанию в системе
• Nudge amount… Величина смещения, изменяет смещение при нажатии на стрелки, а так же на стрелку с шифтом.

Заключение

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

Решил завести себе Телеграм, там можно обсудить все это дело.

Хлопайте, если вам помогло данное пояснение. Некоторые вещи я хоть и знаю как работают было довольно сложно пояснить и описать.

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