Первые шаги в дизайне: инструкция по базовым возможностям Figma

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

Чтобы открыть файл в личном аккаунте, нужна его локальная копия в формате .fig.
Если вы меняли размер растровой иллюстрации, то она сохранится в виде превью того же размера — высокое разрешение будет утрачено. Как это поправить:

• Сохранять файл в формате pdf или svg. Это подстраховка. В таком виде текстовые надписи будут в виде кривых, компоненты и стили будут утрачены, а у кривых в виде концевых стрелок появится контур.
• Конвертировать файлы в Sketch или XD. Тут несколько нюансов. Sketch — платная программа с большим количеством версий, а XD — это программа Adobe, которая возможно тоже будет заблокирована.
  Но если конвертировать файлы, то нужно учитывать, что рабочая область в Figma гораздо больше рабочих областей XD, Sketch и Adobe Illustrator. Поэтому если есть возможность уменьшить размер расположения рабочих досок, — стоит это сделать. Кроме этого, можно разбить файл на отдельные страницы.

Если нужно выделить все растровые изображения на странице. Если нужно восстановить исходный размер растровых изображений.
Если нужно выгрузить растровые изображения в оригинальном размере.
Если нужен экспорт в Sketch или XD. Платная, бесплатно можно конвертировать только 10 раз.
Бесплатная программа для работы с векторной графикой. Открывает любой SVG файл.
Бесплатная программа для растровых иллюстраций и редактирования фотографий.
Бесплатный офисный пакет. Открывает текстовые файлы, таблицы и презентации.

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

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

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

Интерфейс

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

Developer Handoff

Developer Handoff — это решение, которое упрощает работу разработчиков: они могут просто скопировать CSS-стили, а не подбирать высоту, ширину и тени элементов интерфейса.

Неочевидные решения

У фигмы есть библиотека шаблонов, с помощью которой можно создавать:

• концепткарты,
• диаграммы связей,
• рекламные объявления,
• доски настроения,
• диаграммы.

Просто копируйте их и используйте на своё усмотрение: сэкономите время.

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

Программа предложит выбрать специальность и цель использования. Выбор ни на что не повлияет.

Готово! Чтобы начать работать, выбираем «New Design File» — этого достаточно, чтобы создать проект в фигме.

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

На панели инструментов — фигуры, инструменты. Если что-то выбрано для работы, оно окрашено в синий цвет.

У некоторых инструментов есть выпадающий список. Например, там, где нарисован квадрат, в списке выпадут другие фигуры и возможность загрузить свою картинку.

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

На панели слоёв расположен список всех объектов. Их можно свободно перетягивать — менять местами.

Навигация в документе

Пространство, которое видно на экране, — малая часть рабочей площади.

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

В правом верхнем углу документа указан масштаб. 100% — это масштаб 1:1. 50% — соответственно, уменьшение в два раза. Чтобы увеличить масштаб, нужно нажать на клавишу «+», чтобы уменьшить — на клавишу «−». Или можно использовать прокрутку колёсика мыши с удержанием Ctrl на Windows или прокрутку колёсика с удержанием Command на Mac. Чтобы быстро вернуть масштаб к 100%, можно использовать сочетание клавиш Shift + 0.

Фигуры

Чтобы нарисовать фигуру, используем инструмент Rectangle:

1. Кликаем на иконку подходящей фигуры.
2. Зажимаем левую кнопку мыши и выбираем начальную точку.
3. Не отпуская кнопку, двигаем мышь в любом направлении, пока фигура не достигнет нужного размера. Теперь можно отпустить кнопку мыши.

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

Изменение свойств объекта

Чтобы понять, как работают свойства, по одному изменяйте их. Например, прямоугольник можно повернуть, округлить его углы, изменить размеры, перекрасить. Если свойство изменилось ошибочно или нужно вернуться к исходным данным, можно использовать комбинацию «Назад»: Ctrl + Z.

Выделение, перемещение и изменение размеров

Чтобы выделять, перемещать и изменять размеры, нужно выбрать инструмент Move (справа от главного меню).

Чтобы выделить объект, кликните по нему в рабочей области или выберите его в панели слоёв. Чтобы убрать выделение, кликните в пустой рабочей области.

Когда объект выделен, на его углах видны белые квадратики. Если за них потянуть, нажав на левую кнопку мыши, — фигура увеличится или уменьшится.

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

А чтобы пропорции фигуры не изменялись при увеличении или уменьшении, нужно зажать Shift.

Чтобы переместить фигуру, нужно навести на неё курсор, зажать левую кнопку мышки и переместить объект куда нужно. Чтобы фигура смещалась только по вертикали или горизонтали, до захвата объекта нужно зажать Shift.

Работа с цветом

Цвета настраиваются очень гибко: можно выбрать оттенок, насыщенность и прозрачность. Если нужен какой-то конкретный оттенок, его не нужно искать в палитре. Можно просто скопировать его точное значение и использовать.

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

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

Текст

Чтобы добавить текст, нужно выбрать Text (буква T) на панели инструментов фигмы. Дальше нужно создать границы для текста. Для этого кликните левой кнопкой мыши и растяните границы, как при создании фигуры. Эти границы показывают, в каком месте текст будет переноситься в следующую строку, также он выравнивается относительно рамок. Теперь можно вводить текст.

Плюсы

Многие люди переходят из фотошопа в фигму, потому что она гибче и постоянно обновляется.

Другие плюсы этой программы:

• Фигма бесплатная, при этом её функции и инструменты не ограничены, но в бесплатной версии можно открыть только один проект. Зато количество файлов в проекте может быть любым.

• Фигма работает на Windows, Mac, Linux. Её можно установить на компьютер или работать через браузер. Есть приложение на смартфон — и iOS, и для андроида.

• В одном проекте могут работать несколько человек одновременно. Можно выдать доступ только на просмотр или на редактирование. Благодаря этой функции не нужно скачивать макеты, прототипы, иллюстрации: доступы можно получить по ссылке. Даже если у человека нет аккаунта в фигме, он может посмотреть проект.

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

• В онлайн-редакторе можно создавать интерактивные прототипы. Например, если объединить наборы экранов проекта и нажать на кнопку заказа, откроется форма для контактов. Заказчику не нужно мысленно визуализировать, как будет работать проект: в прототипе и так всё понятно.

Минусы Figma

Ни один проект не обходится без минусов.

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

Чтобы добавить плагин, нужно перейти в меню и выбрать «Plugins». Все плагины можно найти в разделе «Browse Plugins in Community». В этом комьюнити пользователи делятся плагинами, иконками, макетами, иллюстрациями и другим.

Нужный плагин ищется через поисковую строку. Чтобы установить его, нужно нажать «Install». После установки нужно перезагрузить фигму.

Вот несколько полезных плагинов:

• Iconify. Больше 40 тысяч векторных иконок: Twitter Emoji, Material Design, Jam Icons и другие. 

• Humaaans for Figma. Иллюстрации людей Пабло Стэнли. Можно брать готовых героев или кастомизировать. 

• BeatFlyer Lite. Создание анимационных эффектов за пару кликов. 

• Bullets. Стильные маркированные списки. 

• Chart. Разнообразные графики.

Чтобы использовать фигму и другие инструменты дизайнера на профессиональном уровне, одних гайдов недостаточно — для этого требуется более углублённое изучение с регулярной практикой на реальных задачах. На курсе «Графический дизайнер» вы сможете получить необходимые знания и практический опыт, чтобы стать дизайнером.