Душная Фигма: 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раньше использовал часто, сейчас реже из-за того что данная команда копирует все свойства, заливку, обводку, скругления углов а часто бывает нужно скопировать какое то отдельное свойство, проще его выбрать отдельно и скопировать, сейчас подробно не рассматриваем.
- Дальше режимы вставки. cmd+V обычно вставляет с параметрами положения, сохраняются ограничители. Paste over selection вставляет из буфера в начало координат выделенного объекта. Paste to replace заменяет выделенный объект, объектом который вы скопировали.
- Duplicate Дублировать. Обычно выполняется мув тулом. Выбираем мув тул, зажимаем альт, и тянем объект. появляется его копия. Отпускаем и копия остается на месте. Если после этого нажать горячую клавишу cmd+d, следующая копия появиться на том же расстоянии как и первая копия от оригинала.
- 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… Величина смещения, изменяет смещение при нажатии на стрелки, а так же на стрелку с шифтом.
Заключение
На этом моменте предлагаю закончить эту статью, а скорее просто ознакомительную инструкцию. В следующей расскажу про все оставшиеся инструменты. А когда закончим с инструментами, можно будет перейти к работе в программе.
Решил завести себе Телеграм, там можно обсудить все это дело.
Хлопайте, если вам помогло данное пояснение. Некоторые вещи я хоть и знаю как работают было довольно сложно пояснить и описать.
Если есть что добавить, пишите в ТГ