Читать

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

26.12.2020 / Уроки

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


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


Фигуры

Урок Знакомство с Figma


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


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

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

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

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


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

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

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

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

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


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


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


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


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


Урок Знакомство с Figma


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


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

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


Урок Знакомство с Figma
Изображение кликабельно


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


Урок Знакомство с Figma
Изображение кликабельно


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


Урок Знакомство с Figma
Изображение кликабельно


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


Урок Знакомство с Figma


Заливка

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


Урок Знакомство с Figma
Изображение кликабельно


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

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


Урок Знакомство с Figma


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


Урок Знакомство с Figma


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

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

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

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

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


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







Комментарии (0)

avatar


НЕКОТОРЫЕ АРХИВНЫЕ ПУБЛИКАЦИИ

Киноляпы в фильмах о Гарри Поттере

Поттериана несомненно очень качественный кинопродукт, какой бы сильной ни была коммерческая подоплёка данного проекта. И как у каждого кинопродукта - у Поттерианы есть свои ляпы. Рассмотрим некоторые.


25.01.2015 / Кино

На просторах сети есть не мало сайтов в помощь художникам, иллюстраторам, веб-дизайнерам. К примеру, одним из крупнейших таких проектов является demiart.ru


06.06.2015 / Веб-дизайн

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


01.12.2014 / Уроки

Кен Лиу (Ken Liu) из КНР рисует невероятные фэнтезийные сцены. Он часто изображает сцены из игр и фильмов, фанатом которых он видимо является сам. К примеру, некоторые работы созданы специально для Blizzcon.


14.08.2015 / Арт



ПОДПИШИТЕСЬ НА ОБНОВЛЕНИЯ