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

В сервисе можно работать из браузера или скачать приложение Фигма на компьютер. Выбирайте браузер, если часто пользуетесь разными устройствами. Для этого зайдите на сайт Фигмы figma.com и зарегистрируйтесь.

Вы можете бесплатно скачать Фигму на рабочий стол, это поможет избавиться от многочисленных вкладок браузера перед глазами. Зайдите на figma.com/downloads и выберите версию программы для iOS или Windows.

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

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

Следующий инструмент — Scale, предназначен для изменения масштаба объектов. Он сохраняет все отступы, размеры векторных элементов и текстов в прежнем соотношении, позволяя уменьшить или увеличить их масштаб.

Далее следует Frame. Это основной элемент в фигме, поскольку именно внутри него происходит разработка дизайна. Затем расположены Section (Секции) и Slice (Срез).

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

Slice позволяет создавать срезы из дизайн-макета для последующего экспорта. Благодаря slice в Figma вы с легкостью подготовите элементы для разработчиков или клиентов, сохраняя точность деталей.

Далее расположены множество фигур: прямоугольник, линия, стрелка, эллипс, треугольник, звезда и вставка изображения/видео. 

Следующие инструменты — Pen (перо) и Pencil (карандаш). 

Перо позволяет рисовать различные формы, создавать линии разной толщины и длины, добавлять элементы и многое другое. 

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

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

После этого следует инструмент Текст. 

Далее находятся Resources (Ресурсы). Здесь фигма предлагает нам компоненты, плагины и виджеты.

Последние инструменты — Hand Tool (рука) и Add comment (комментарии).

Hand Tool позволяет нам перемещаться по холсту без необходимости использования мыши, что значительно экономит время и повышает производительность работы.