Как залить вектор в figma

Как сделать заливку для вектора в Figma

Для замкнутых векторов в Figma доступна обычная заливка (цветом, градиентом или изображением), но в некоторых случаях требуется выполнить заливку части вектора, или наоборот, частично ее убрать.

Как залить вектор в figmaЧастичная заливка вектора

Для этого можно воспользоваться инструментом Paint Bucket, который доступен в режиме редактирования вектора.

Как залить вектор в figmaИнструмент заливки

Чтобы начать редактировать вектор, либо нажмите на него несколько раз подряд, либо используйте кнопку Edit Object.

Как залить вектор в figmaИнструмент Edit Object

Заливка позволяет точно выбрать области, которые надо залить фоном, либо наоборот сделать прозрачными.

Видео:Уроки Figma | Симметричный векторСкачать

Уроки Figma | Симметричный вектор

Вектор в фигме: как редактировать с инструментом «Edit object»

В этой инструкции разбираем как редактировать вектор в фигме с инструментом «Edit object». Это можно использовать для любых векторных элементов (иконок, иллюстраций, фигур созданных с помощью стандартных инструментов фигмы).

Как залить вектор в figma

Если выбрать элемент, который был нарисован с помощью стандартных инструментов в Figma или любой дургой векторный элемент, то сверху появится иконка «Edit object».

Как залить вектор в figma

Если её нажать, то на объекте появятся точки и возможность их перемещать. Сверху появятся дополнительные инструменты, которые вы можете использовать.

Как залить вектор в figma

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

Как залить вектор в figma

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

Как залить вектор в figma

При зажатии клавиши «Shift», будет возможность изменять расположение рычагов на 45 градусов.

Как залить вектор в figma

Инструмент «Paint bucket» позволяет закрашивать какие-либо области или наоборот убирать из них заливку.

Как залить вектор в figma

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

Как залить вектор в figma

Инструменты «Pen tool» и «Pen» помогают дорисовывать дополнительные точки у вашей фигуры.

Видео:6 урок по Figma — Инструмент Перо и работа с вектором [Figma уроки]Скачать

6 урок по Figma — Инструмент Перо и работа с вектором [Figma уроки]

Заключение

Итак, в этом небольшом видео и статье вы узнали как редактировать вектор в фигме и разобрали про инструмент «Edit object».

Видео:Уроки Figma (Фигма) – №8: Заливка и градиент / Бесплатный курс по ФигмеСкачать

Уроки Figma (Фигма) – №8: Заливка и градиент / Бесплатный курс по Фигме

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

Рисуем мяч для регби, хитрим с наложением слоёв и избегаем «мятых» линий.

Как залить вектор в figma

Как залить вектор в figma

Meery Mary для Skillbox Media

Часто Figma ассоциируется только с проектированием интерфейсов. Однако в ней можно рисовать полноценные иллюстрации и векторные иконки.

Вместе с иллюстратором Виктором Засыпкиным рассказываем, как работает режим векторного редактора в Figma и как рисовать в нём мяч для регби.

Как залить вектор в figma

Виктор Засыпкин

Иллюстратор. Рисовал иллюстрации для электронного учебника «Японский язык без страха» и рассылки «Как сделать проект».

Как залить вектор в figma

Редактор. Пишет про дизайн, редактирует книги, шутит шутки, смотрит аниме.

Видео:How to Fill a Vector in FigmaСкачать

How to Fill a Vector in Figma

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

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

Для начала нарисуйте простой квадрат:

1. На панели инструментов нажмите на иконку Как залить вектор в figmaи кликните в любую часть макета.

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

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

Как залить вектор в figma

Обратите внимание, что, создав первую точку, вы вошли в режим векторного редактора, и панель инструментов изменилась:

Как залить вектор в figma

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

1. На панели инструментов нажмите на иконку Как залить вектор в figma, наведите курсор на одну из линий — посередине вы увидите точку.

2. Зажмите эту точку правой кнопкой мыши и тяните её от центра фигуры.

3. Повторите то же самое с остальными сторонами фигуры.

Как залить вектор в figma

Сгладьте углы получившегося прямоугольника:

1. На панели инструментов нажмите на иконку Как залить вектор в figmaи дважды кликните на любую из точек фигуры.

2. Зажмите любой из краёв появившихся линий — их называют усами. Тяните ус в сторону изгиба угла, чтобы он не пересекал линию дуги. Иначе ваша линия может получиться «мятой».

Как залить вектор в figma

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

Как залить вектор в figma

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

Как залить вектор в figma

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

Как залить вектор в figma

Чтобы выйти из режима редактирования вектора, нажмите Done на панели инструментов. Если захотите что-то изменить, дважды кликните по вектору.

Видео:Как Создавать Векторные Формы в Figma...Скачать

Как Создавать Векторные Формы в Figma...

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

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

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

Как залить вектор в figma

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

2. В режиме векторного редактора подгоните форму овала под мяч, чтобы они были похожи.

Видео: Виктор Засыпкин / Skillbox Media

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

2. В режиме векторного редактора подгоните форму овала под шов.

3. Удалите фон, добавьте на вектор обводку и перенесите его на овал в форме мяча.

Видео: Виктор Засыпкин / Skillbox Media

1. Создайте квадрат Как залить вектор в figmaи подгоните его размеры под форму дополнительного шва.

2. Удалите у фигуры фон, добавьте обводку и скруглите углы Как залить вектор в figma. В качестве эталона для скругления возьмите угол шва, который виден лучше всего. В нашем референсе — это левый нижний.

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

4. Этот шов не сплошной, а строчной. Укажите в настройках обводки пунктирный стиль. Чтобы это сделать, в блоке Stroke на панели инструментов нажмите Как залить вектор в figmaи в появившемся меню в пункте Stroke Style укажите стиль Dash. Отрегулируйте настройки Dash (количество точек) и Gap (шаг), чтобы пунктир примерно напоминал шов настоящего мяча.

Видео: Виктор Засыпкин / Skillbox Media

1. Скопируйте основной овал, выделите его и укажите цвет заливки: белый.

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

3. Поместите блик на мяч. Скорее всего, он будет великоват, поэтому уменьшите его и подправьте ломаные углы с помощью усов.

Видео: Виктор Засыпкин / Skillbox Media

Левая белая полоска

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

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

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

3. В режиме векторного редактора подправьте оба круга, чтобы они точно повторяли изгибы полоски. Для удобства укажите непрозрачность кругов на 50%, чтобы видеть и сами фигуры, и контуры мяча.

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

Как залить вектор в figma

5. Сделайте копию основной формы мяча и подложите её под полоску. Если она выходит за края фигуры, выделите и полоску, и форму мяча, затем на панели инструментов нажмите на иконку Как залить вектор в figmaи в выпадающем списке выберите Как залить вектор в figma. В результате останется видимой только та часть, где ваши круги пересекаются.

Как залить вектор в figma

6. Поместите получившуюся фигуру на мяч. Если она залезает на шов, его можно немного уменьшить.

Правая белая полоса

Правую полосу можно сделать так же, как и левую, либо нарисовать её самостоятельно с помощью инструмента Как залить вектор в figma:

Видео: Виктор Засыпкин / Skillbox Media

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

2. Поместите линию на референс и, если нужно, сделайте её длиннее или короче в режиме векторного редактора.

3. Поместите вектор на нижний край шва и с помощью пера Как залить вектор в figmaобведите и остальной контур шва.

4. С помощью пера повторите контуры всех стежков.

Видео: Виктор Засыпкин / Skillbox Media

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

💥 Видео

Уроки Figma | Как рисовать в фигме векторную графикуСкачать

Уроки Figma |  Как рисовать в фигме векторную графику

РАСТР В ВЕКТОР FIGMA | jpeg to svgСкачать

РАСТР В ВЕКТОР FIGMA | jpeg to svg

4 СПОСОБА ОБЪЕДИНЯТЬ В FIGMA. Соединяем элементы, слои, фреймы, фигуры, векторы, объекты в фигме.Скачать

4 СПОСОБА ОБЪЕДИНЯТЬ В FIGMA. Соединяем элементы, слои, фреймы, фигуры, векторы, объекты в фигме.

#14 Как перевести растровую картинку в векторную в Figma плагином Image tracer.Скачать

#14 Как перевести растровую картинку в векторную в Figma плагином Image tracer.

Плагин Figma для перевода PNG в векторСкачать

Плагин Figma для перевода PNG в вектор

РАСТР В ВЕКТОР В FIGMA. Как перевести с плагином «Image Tracer» | Уроки фигма на русскомСкачать

РАСТР В ВЕКТОР В FIGMA. Как перевести с плагином «Image Tracer» | Уроки фигма на русском

Как вырезать объект в Figma | Простое действие по удалению фонаСкачать

Как вырезать объект в Figma | Простое действие по удалению фона

Как обрезать фигуру в ФИГМА │ 3 СПОСОБАСкачать

Как обрезать фигуру в ФИГМА │ 3 СПОСОБА

Figma с нуля - Векторные объекты | Веб дизайн. Урок 7Скачать

Figma с нуля - Векторные объекты | Веб дизайн. Урок 7

#17 Дизайн Landing Page в Figma. Как сделать векторную иллюстрацию для главного экрана лендинга.Скачать

#17 Дизайн Landing Page в Figma. Как сделать векторную иллюстрацию для главного экрана лендинга.

Видео урок по Figma Как убрать функцию компонента с объектаСкачать

Видео урок по Figma  Как убрать функцию компонента с объекта

Видео-урок по Figma. Работа с вектором. ФигурыСкачать

Видео-урок по Figma. Работа с вектором. Фигуры

🍓 Логотип в векторе. Где взять? Как вытащить? [Фигма уроки]Скачать

🍓 Логотип в векторе. Где взять? Как вытащить? [Фигма уроки]

КРИВЫЕ В FIGMA. Как перевести текст или фигуры в кривые | Уроки фигма на русскомСкачать

КРИВЫЕ В FIGMA. Как перевести текст или фигуры в кривые | Уроки фигма на русском

5 плагинов в Figma, которые я использую каждый деньСкачать

5 плагинов в Figma, которые я использую каждый день
Поделиться или сохранить к себе: