Фигма фрейм в вектор

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

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

Фигма фрейм в вектор

Фигма фрейм в вектор

Meery Mary для Skillbox Media

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

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

Фигма фрейм в вектор

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

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

Фигма фрейм в вектор

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

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

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

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

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

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

1. На панели инструментов нажмите на иконку Фигма фрейм в вектори кликните в любую часть макета.

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

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

Фигма фрейм в вектор

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

Фигма фрейм в вектор

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

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

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

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

Фигма фрейм в вектор

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

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

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

Фигма фрейм в вектор

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

Фигма фрейм в вектор

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

Фигма фрейм в вектор

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

Фигма фрейм в вектор

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

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

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

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

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

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

Фигма фрейм в вектор

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фигма фрейм в вектор

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

Фигма фрейм в вектор

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

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

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

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

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

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

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

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

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

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

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

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

Из растра в вектор в Figma [Плагин]

Плагин Image Tracer предназначен для конвертации растровых изображений (PNG, JPG) в вектор.

Плагин конвертирует исходное изображение в черно-белое, находит точки по границам черного и белого и строит по ним кривые. В итоге вы получаете вектор с прозрачностью, который вы можете экспортировать как в растр, так и в .SVG (И в дальнейшем конвертировать его в .AI, .eps и другие векторы с помощью сторонних сервисов). Очевидно, вектор вы сможете увеличивать в размерах без потери качества.

Фигма фрейм в векторИз растра в вектор — результат работы

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

Возможна обработка и линейных иконок, но их вид может измениться довольно заметно.

Чем больше разрешение исходного изображения, тем лучше будет результат.

Видео:РАСТР В ВЕКТОР FIGMA | jpeg to svgСкачать

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

Frame в Figma — подробный разбор инструмента

Инструмент Frame в Figma. Детальный разбор возможностей в программе Figma. Урок в видео и текстовом формате. Как сделать и как использовать.

Как использовать Frame в Figma? Если вы начинающий пользователь программы, то этот урок откроет вам все секреты этого инструмента.

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

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

Что такое Frame в Figma и с чем его едят?

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

Фигма фрейм в вектор

Видео:Преобразование изображений в вектор на Figma | Трейсер изображенийСкачать

Преобразование изображений в вектор на Figma | Трейсер изображений

Как сделать фрейм в фигме?

Чтобы создать Frame в программе Figma выберите иконку слева и сверху в панели инструментов. Наведите на пустую область и нажмите левую кнопку мыши. Горячие клавиши для создания фреймов — «F» и «A».

Фигма фрейм в вектор

Почему 2 горячих клавиши, а не одна? Это связано с тем, что существует программа Sketch. Там есть аналог фреймов, которые называются «Артборды». Чтобы в скетче создать артборд нужно нажать на клавишу «А». Поскольку скетч — это главный конкурент фигмы, чтобы облегчить работу тем, кто переходит на фигму со скетча, разработчики решили сделать привычное для этих людей сокращение.

Фигма фрейм в вектор

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

Фигма фрейм в вектор

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

Популярные размеры фреймов в Figma и шаблоны различных устройств

Фигма фрейм в вектор

В правой панеле представлены популярные размеры фреймов (активно при выборе инструмента фрейм):

  • Phone — для телефонов.
  • Tablet — для планшетов.
  • Desktop — для настольных компьютеров.
  • Watch — для часов.
  • Paper — для бумаги.
  • Social media — для социальных сетей.
  • Figma community — размеры от сообществ.

Выбираем другое разрешение фрейма из списка

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

Фигма фрейм в вектор

Чтобы изменить шаблон можно нажать на эту область и выбрать другое разрешение либо сделать из фрейма группу. Изменение «Frame» на «Group» или выбор других размеров из шаблонов. Группа позволяет объединять несколько элементов, но в отличие от фрейма в группе меньше возможностей и нет некоторых функций.

Меняем размер по умному. Как уменьшить или увеличить Frame в Figma?

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

Если при изменении размера, вы будете использовать клавиши ниже, то будет вам счастье:
Ctrl — элементы внутри не привязаны к краям.
Alt — одновременное увеличение фрейма слева и справа, сверху и снизу.
Shift — пропорциональное изменение размеров.
Также можно использовать комбинации этих горячих клавиш.

Фигма фрейм в вектор

Следующее как можно изменять размер фрейма — это менять ориентацию на горизонтальную и вертикальную. Например если ширина фрейма 500 пикселей, а высота 100, то можно поменять размеры местами, просто нажимая на эти иконки.

Фигма фрейм в вектор

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

Фигма фрейм в вектор

Чтобы изменить расположение фрейма по оси Х и Y можно использовать правую панель и значения которые там есть.

Фигма фрейм в вектор

Значения W и H позволяют видеть и изменять размеры фрейма. Справа есть иконка цепи. Если её активировать, то размеры будут изменяться пропорционально. Например если включить эту иконку и создать фрейм 100 на 100px. То при изменении значения ширины на 140 высота тоже будет 140px. Если отключить эту иконку, то можно отдельно изменять размеры ширины или высоты.

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

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

Изменение угла наклона и скругление углов

Фигма фрейм в вектор

Чтобы скруглить углы у фрейма (сделать его круглым), смотрите в правую панель. Сверху есть иконка скругления углов и иконка изменения размеров наклона угла. Также если нажать на самую правую иконку, то будет возможность скруглять любые углы отдельно.

Видео:Уроки Figma | 03. Инструмент Frame (фрейм) в фигмаСкачать

Уроки Figma | 03. Инструмент Frame (фрейм) в фигма

Функция Clip content — что это?

Фигма фрейм в вектор

Фигма фрейм в вектор

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

Как превратить фрейм в Auto Layout?

Фигма фрейм в вектор

Если выбрать фрейм, то в правой панели будет надпись Auto Layout.

Фигма фрейм в вектор

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

Фигма фрейм в вектор

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

Фигма фрейм в вектор

Если выделить какой то элемент внутри Auto Layout и нажать на комбинацию клавиш «Ctrl» «D», то контент дублируется и все автоматически будет перестраиваться.

Подробнее о возможностях Auto Layout поговорим в отдельном уроке.

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

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

Сетки во фреймах

Фигма фрейм в вектор

Чтобы создать сетку нажмите напротив надписи «Grids» на плюс.

После этого можно выбрать отображение сетки (Grid, column, row).

Фигма фрейм в вектор

Фигма фрейм в вектор

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

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

Изменение цвета фрейма и создание обводки

Фигма фрейм в вектор

Чтобы изменить цвет фрейма выделите его и измените цвет, как показано на рисунке выше.

Фигма фрейм в вектор

Для создания обводки нажмите плюс напротив надписи Stroke

Видео:[NEW] 🔥 Панель экспорта и мегакрутецкий лайфхак. Урок 19Скачать

[NEW] 🔥 Панель экспорта и мегакрутецкий лайфхак. Урок 19

Как сохранить фрейм из Figma в PNG, JPG, SVG, PDF

Фигма фрейм в вектор

Чтобы экспортировать фреймы из фигмы и сохранить их к себе на компьютер, выберите фрейм нажмите на плюс напротив надписи «Export» в правой панели, выберите нужный вам формат для экспорта (PNG, JPG, SVG, PDF) и нажмите на кнопку «Export». Перед этим можно сделать предварительный просмотр нажав на вкладку «Prewie».

Фигма фрейм в вектор

Чтобы изменить размер при экспорте, нужно выбрать из списка 1х другое значение. Если выбрано 1х, то экспорт будет один к одному. Если выбрать 2х, то масштаб при экспорте будет в 2 раза больше. Например если поставить 2х и размер фрейма 300px на 300px, то сохраненное изображение будет размером 600px на 600px.

Видео:Как добавить SVG (вектор) в фигма | Фишки FigmaСкачать

Как добавить SVG (вектор) в фигма | Фишки Figma

Привязки элементов во фрейме.

Фигма фрейм в вектор

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

Видео:Figma - Как перевести любое изображение в вектор?Скачать

Figma - Как перевести любое изображение в вектор?

Закрепление элементов внутри фрейма при скроллинге

Фигма фрейм в вектор

Елси выбрать какой-то элемент. Например меню (как на скриншоте выше), а затем поставить галочку напротив надписи «Fix position when scrolling», то этот элемент при прокрутке в режиме презентации будет закреплен.

Видео:Растр в вектор в Figma | Тема путешествий | Урок 4 минутыСкачать

Растр в вектор в Figma | Тема путешествий | Урок 4 минуты

Горячие клавиши при работе с фреймами в фигме

Как удалить фрейм в фигме

Если вам потребовалось удалить фрейм в фигме, просто нажмите клавишу «Backspace» на клавиатуре. Это позволит его убрать из вашего проекта.

2 способа как скопировать фрейм в фигме

  1. Чтобы скопировать фрейм в Figma, выберите его и нажмите на клавиши «Ctrl» «С» одновременно. Затем нажмите клавиши «Ctrl» «V», чтобы его вставить.
  2. Выделите фрейм, нажмите на клавиши «Ctrl» «D». Это позволит дублировать слой.

Как объединить Frame в Figma

Есть несколько способов объединить фреймы или элементы во фрейм. Выделите нужные вам фреймы и нажмите на клавиши «Ctrl» «G», либо на правую клавишу мыши и выберите пункт «Group selection». Это позволит объединить их с помощью инструмента «Группа».

  1. Вы можете создать новый фрейм поверх этих 2 фреймов для их объединения. Для этого можно просто нарисовать его поверх тех элементов, которые хотите объединить.

📸 Видео

Figma 2020 - Группа и frame - В ЧЕМ РАЗНИЦА и как использовать?Скачать

Figma 2020 - Группа и frame - В ЧЕМ РАЗНИЦА и как использовать?

Фигма для новичков - из PNG в SVG или почему не стоит использовать плагин Image TracerСкачать

Фигма для новичков - из PNG в SVG или почему не стоит использовать плагин Image Tracer

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

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

Figma: фреймы и группы, слои и ограничения (frames and groups, layers and constraints)Скачать

Figma: фреймы и группы, слои и ограничения (frames and groups, layers and constraints)

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

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

🔥 Фреймы, группы или секции — чем лучше пользоваться в Figma?Скачать

🔥 Фреймы, группы или секции — чем лучше пользоваться в Figma?
Поделиться или сохранить к себе: