Как рисовать векторные изображения в Figma

Как работает режим векторного редактора в Figma

Прежде чем рисовать, важно разобраться, как работают инструменты для создания векторных иллюстраций. Если вы уже всё о них знаете — сразу переходите к практике. Если нет — читайте нашу инструкцию.

В качестве упражнения сделайте простой квадрат, превратите его в многоугольник и скруглите углы:

1. Нажмите P и кликните в любую часть макета.

2. Кликните ещё раз в любую другую часть макета, и у вас появится линия.

3. Таким же образом сделайте ещё три линии, чтобы у вас получился квадрат. Последняя линия должна соединиться с первой. Чтобы линии получились ровными, делайте их с зажатой клавишей Shift. И квадрат готов.

4. Теперь добавьте новые углы. Для этого нажмите  V, наведите курсор на любую сторону вашего квадрата, зажмите появившуюся точку и тяните её в сторону.

5. Наведите курсор на любую точку многоугольника, зажмите Ctrl (⌘) и тяните в стороны, чтобы угол сгладился.

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

А вот ещё несколько полезных функций векторного редактора:

1. Любую стандартную фигуру в Figma — круг , квадрат , треугольник или многоугольник — можно редактировать как вектор. Чтобы это сделать, создайте фигуру и дважды кликните по ней правой кнопкой мыши:

2. Если нажать P, зажать Alt и кликнуть по любой точке — она удалится.

3. Как и у стандартных фигур в Figma, у замкнутого вектора можно изменить цвет заливки и параметры обводки.

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

Очень рекомендуем сразу пробовать пользоваться Figma Draw, так как в этом режиме у вас будет больше возможностей для создания и редактирования векторов. Подробнее об этом читайте в нашей инструкции.

Как нарисовать мяч для регби

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

Мы будем рисовать мяч для регби, на фотографии вы сразу увидите его основные и второстепенные детали:

Мы будем рисовать в режиме Figma Draw, так как в нём все важные элементы интерфейса будут под рукой.

Основа мяча

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

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

Поперечный шов

1. Скройте ваш овал с формой мяча, чтобы он не мешался.

2. Создайте круг и растяните его по основному шву, который пересекает его.

3. Подгоните форму овала под шов. Идеально обводить его не нужно — при необходимости вы сможете поправить его позже.

Белая полоса слева

Чтобы её сделать, воспользуйтесь хитростью с наложением слоёв:

1. Создайте круг  и с помощью одной из его сторон повторите внешний правый край полосы.

2. Создайте ещё один круг  и с его помощью повторите внутренний левый край полосы.

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

Если вы не видите иконки снизу, то переключитесь на Figma Draw и попробуйте ещё раз.

4. Скорее всего, ваша полоска будет вылезать за пределы мяча — оставьте это как есть, вы исправите это позже.

Белая полоса справа

Правую полосу можно сделать так же, как и левую, либо нарисовать её самостоятельно с помощью инструмента  . Мы сделали проще — просто скопировали левую полосу и подкорректировали её форму. Слои с активным смешением . можно редактировать так же, как и обычный вектор:

Белый шов

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

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

3. Выделите основание шва и стежки и на правой панели в блоке Stroke выберите , чтобы скруглить углы вектора. При необходимости скорректируйте получившуюся длину.

Покраска и финальная маска

1. Переместите фотографию с мячом и раскройте все элементы вашего векторного мяча.

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

3. Скопируйте основание мяча и на нижней панели инструментов нажмите , чтобы сделать маску. На панели слоёв поместите все элементы в неё — но кроме оригинала основания мяча.

4. По желанию, сделайте ещё одну копию основания и с помощью градиентов добавьте тень и свет.

В результате у вас получится примерно такой мяч:

Самоучитель по Figma

Как в Figma сделать что угодно