Знакомство с Figma. Часть 2

Продолжаем знакомиться с получающим всё большее признание редактором веб-дизайнера — Figma. Пока не будем создавать что-то определённое, рассмотрим подробнее работу с фигурами и цветом.

Начнём с фигур. Есть набор фигур для рисования, с помощью которых можно создать любую форму. Особо стоит отметить то, что применяемые потом к фигурам эффекты (обводка или тень, например) легко сохраняются в формате svg. Но с эффектами мы разберёмся позже.

Фигуры

Первая фигура «Прямоугольник». Рисуется также, как и в большинстве редакторов (в том числе, фотошопе). Зажав Shift, можно нарисовать квадрат. Для созданного объекта сразу же открывается набор параметров для редактирования.

Вверху есть три важных параметра:

(1) Режим работы с точками и гранями.

(2) Создание компонента — весьма полезный инструмент. Если вы создаёте сайт и часто используете одну и ту же кнопку в макетах, к примеру, нужно будет сделать компонентом первую, а далее просто дублировать её и вставлять куда нужно. В дальнейшем, если захотите исправить эту кнопку на всех макетах, достаточно будет изменить только одну — остальные изменятся автоматически.

(3) Создание маски. Фигура, используемая в качестве маски, не будет позволять другим слоям (находящимся выше) выходить за свои границы. То же, что обтравочная маска в фотошопе.

Основные параметры:

(4) Координаты расположения объекта.

(5) Ширина и высота. Если нажать «скрепку», то ширина будет меняться в связке с высотой. Если отжать «скрепку» — параметры будут меняться независимо друг от друга.

(6) Угол поворота объекта.

(7) Скругление углов. Можно задать одно значение на все углы, либо для каждого угла по отдельности — для этого нужно нажать иконку справа (под «скрепкой»).

(8) Режим наложения слоя (Умножение, Осветление и т.д.)

(9) Заливка цветом. О ней ниже.

Также чуть позже рассмотрим «Обводку»(10) и «Эффекты»(11). Эти параметры доступны для всех видов форм.

(12) Экспорт позволяет сохранить объект (группу слоёв) в одном из доступных форматов (svg, jpg, png, pdf)

Также без особого труда создаются другие фигуры из стандартного набора: «Эллипс», «Треугольник», «Звезда», «Линия» и «Стрелка». Отдельно стоит упомянуть про дополнительные настройки формы «Звезда»:

(1) Можно увеличить или уменьшить количество зубчиков.

(2) Можно настроить угол «остроты» зубчиков.

Изображение кликабельно

Фигура «Стрелка» тоже имеет свою особенность: нельзя настроить длину указательных линий на кончике — они формируются автоматически в зависимости от толщины основной линии:

Изображение кликабельно

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

Изображение кликабельно

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

Заливка

Главное достоинство Фигмы в работе с цветом это компактность. В панели справа есть настройка цвета, по нажатию на которую открывается окошко с цветовой шкалой. Можно ввести числовое значение цвета (1), выбрать на шкале (2) или пипеткой (3) взять цвет с другого объекта на макете.

Изображение кликабельно

В этом же окошке можно выбрать тип заливки: Однородный, Линейный (Градиент), Радиальный, Угловой, Пирамидальный, а также Изображением.

Для градиента можно использовать сколько угодно точек, изменять их цвет и добавлять им процент прозрачности. Также можно менять направление градиента, даже выходя за границы объекта, причём делать это прямо в рабочей области:

Подробнее нужно остановиться на общих настройках заливки:

(1) Можно (и это очень круто!) сохранить стиль заливки, чтобы в дальнейшем применять его к любым объектам. И даже, когда у вас будет куча объектов с применённым стилем заливки, не придётся везде что-то менять, достаточно будет поправить настройки самого стиля заливки.

(2) Удивительно, но можно добавить на объект несколько слоёв заливки, достаточно нажать символ «плюс» и настроить цвета.

(3) Прозрачность заливки регулируется процентами.

(4) Можно на время отключать заливку (она при этом не удаляется).

(5) Удалить же заливку можно символом «минус».

На этом, пожалуй, остановимся и продолжим в следующий раз.