Интерфейс Фигмы:
1. Поиск
Ищите файлы и проекты, в которых вы участвуете, через поиск Search.
2. Последние файлы
В Фигме файлы сохраняются автоматически. Все файлы, которые вы открывали, можно увидеть во вкладке Recents.
3. Плагины
В пункте Plugins собраны расширения, которые помогут ускорить работу в Фигме. Плагины отсортированы по рекомендуемым, популярным и установленным. Чтобы увидеть все плагины, нажмите plugins.
4. Новый файл
Создать новый файл в Фигме можно через пункт New File в правом углу экрана. По умолчанию файл называется Untitled.
5. Команда
Чтобы начать совместный проект, создайте команду: нажмите Createnew team и придумайте ей название.
Вы можете пригласить участников по email и обозначить их роли: только просмотр или редактирование файла. На бесплатном тарифе права редактора могут быть у двух человек, включая вас.
Как устроен редактор файлов Фигмы.
В новом файле предоставляются три области для пользователя: рабочая область, панель инструментов и панель слоёв. Рассмотрим важные функции пунктов меню.
1. Поиск
Функция Search в программе позволяет находить определенные разделы меню, а не созданные вами элементы. Это может быть полезно, если вы ищете конкретную команду, но не помните, где она расположена в меню.
2. Панель File
Инструменты панели предоставляет возможность применять действия к файлу, над которым вы работаете. Например, с помощью функции "New file from Sketch" вы можете импортировать файлы, созданные в графическом редакторе Sketch.
Фигма — это инструмент для совместной работы, который автоматически сохраняет изменения в файле. Вы можете сохранить изменения в любой момент, щелкнув Save to Version History, а также просмотреть историю изменений команды, нажав Show Version History.
Чтобы сохранить файл Фигмы в pdf, используйте Export Frames to PDF. Пригодится для презентаций.
3. Панель Edit
Панель позволяет работать с элементами дизайна в файле. Для применения какого-либо действия к элементу, необходимо его сначала выделить. Например, выделенный объект можно скопировать в виде CSS-кода, SVG-изображения или PNG-файла с помощью функции Copy As.
Функция Paste Over Selection позволяет разместить скопированный элемент в левом верхнем углу другого объекта.
При создании новых объектов в файле по умолчанию устанавливается серый цвет. Однако, в некоторых случаях, может возникнуть необходимость создать множество объектов с другим цветом. Для этого можно воспользоваться функцией Set Default Properties, скопировав свойства цвета нужного объекта один раз - все последующие объекты будут создаваться с заранее заданными свойствами.
Окрашивайте объект в нужный цвет пипеткой Pick Color.
Группа команд Select All with подсвечивает все похожие объекты в файле: с одинаковыми свойствами, заливкой, шрифтами, эффектами и так далее.
4. Панель View
Панель находится слева в меню редактора и дублируется справа. Она отвечает за масштабирование макета и навигацию по нему.
Из полезного — функция Pixel Preview. Фигма — векторный редактор, поэтому дизайнер видит ровные векторные линии. Подключая просмотр объекта в пикселях, можно увидеть, как элемент будет выглядеть на экране.
Масштабировать макет можно функциями Zoom In/Zoom Out.
Чтобы расширить рабочую область и получить больше простора для вдохновения, можно скрыть панель слоёв и интерфейс командами Layers Panel, Show/Hide UI.
5. Панель Preferences
Панель определяет навигацию в файле. Первые три пункта — Snap to Geometry, Snap to Pixel Grid, Snap to Objects — настройки привязки. Помогут слегка примагнитить элементы и избежать «кривой» сетки, если вы работаете быстро.
Highlight Layers on Hover лучше держать включенным всегда — функция подсвечивает мелкие элементы дизайна при наведении — кнопки, буквы, иконки, значки. Включенная функция Keyboard Zooms into Selection будет приближать/удалять макет относительно элемента, выбранного на экране.
