Фигма удалить точку в векторе

Основы Figma VII. Кривые

В седьмой части по основам Figma вы освоите работу с кривыми на продвинутом уровне. И хотя вы уже знакомы с булевыми операциями, которые позволяют создавать сложные векторные фигуры — это лишь верхушка айсберга. С помощью инструмента Pen (переводится как ручка или перо) можно воспроизвести буквально любую форму.

Зачем дизайнеру уметь работать с кривыми? Особенно пригодится в разработке собственных иконок, которые являются неотъемлемой частью любого интерфейса. Необязательно создавать пиктограммы с нуля, достаточно скачать подходящую заготовку и подправить/подогнать ее вручную под вашу задачу.

Во-вторых: отрисовка иллюстраций, к которым применимы те же приемы, единственное отличие: они обычно более сложны и выполняют другую функцию по сравнению с иконками (привлечение внимания).

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

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

Кривые Безье

Кривые Безье — это математический аппарат для описания кривых, который использовал Пьер Безье в 1960-х годах для проектирования дизайна кузовов автомобилей компании Renault.

Впоследствии это открытие сыграло ключевую роль в проектировании и компьютерной графике в 2d и 3d направлениях. Фигуры на основе кривых Безье называют по-разному, в зависимости от приложения, но суть не меняется. Вы можете встретить такие термины: сплайны (spline) и «пути» (path).

Фигма удалить точку в векторе

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

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

Виды кривых

Все кривые Безье можно условно поделить на несколько видов в зависимости от количества точек, из которых они составлены, что и определяет их сложность (смотрите рисунок сверху слева направо):

  • линейные
  • квадратичные
  • кубические
  • высших порядков

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

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

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

Инструмент Pen в Figma

Для построения кривых в Figma используется специальный инструмент Pen (горячая клавиша P). Интересно, что с его помощью можно создать любой стандартный примитив (прямоугольник, круг и так далее). Более того, любой примитив можно быстро конвертировать в кривые. Но начнем мы с линейных кривых, особенность которых заключается в том, что контрольные точки не сглаживаются и итоговая фигура выглядит угловато.

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

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

Создание кривой

Последовательность действий для создания кривой выглядит так:

  1. Выбираем Pen с помощью клавиши P или кликнув по иконке ручки на панели инструментов.
  2. Кликаем в том месте, где хотим поставить первую точку. Обратите внимание, что верхняя панель мгновенно поменялась и теперь включает лишь 4 инструмента и кнопку «Done». Так Figma сигнализирует, что находится в режиме редактирования кривой.
  3. Продолжаем кликать по рабочей области для задания новых точек. Как только у нас есть две точки, начинают появляться линии между ними.
  4. Зажимаем клавишу Shift, чтобы временно ограничить угол наклона создаваемых линий и сделать их кратными 45 градусам. На практике это позволяет с легкостью рисовать идеальные горизонтальные, вертикальные и диагональные линии.
  5. Чтобы указать последнюю точку фигуры есть несколько способов:
    • Нажать мышкой кнопку «Done» верхней панели.
    • Нажать Enter на клавиатуре.
    • Нажать Esc дважды. Первое нажатие заставит завершить создание кривой внутри векторного объекта. То есть вы можете продолжить кликать и создать еще одну линию в рамках одного слоя. Второе нажатие Esc заставит Figma выйти из режима редактирования.

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

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

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

Видео:Figma — перо инструмент кривых БезьеСкачать

Figma — перо инструмент кривых Безье

Рисуем круг

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

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

Видео:Три фишки FIGMAСкачать

Три фишки FIGMA

Редактирование кривых

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

  • Добавить еще линий
  • Изменить или переместить точки
  • Настроить кривизну
  • Добавить заливку замкнутым контурам

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

    Выделить векторный объект. Это может быть не только кривая, но и большинство примитивов: прямоугольник, эллипс, линия и так далее.

Далее один из вариантов ниже:

  • Нажать клавишу Enter
  • Сделать двойной клик по векторному объекту. В этом случае предварительно выделять не нужно. Пожалуй это самый простой способ.
  • Кликнуть по левой иконке квадратика (Edit Object) сверху в центре.

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

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

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

Инструмент Move. Перемещение точек

Горячая клавиша V. Позволяет выделить и переместить одну или несколько точек векторного объекта мышкой. Тут работает зажатие клавиши Shift, как и при построении новой кривой. Также для перемещения точек можно использовать клавиатуру (клавиши с стрелками). Этот инструмент активируется по-умолчанию, когда вы переходите в режим редактирования.

Видео:Figma – 4 способа удаления фона. Как в Фигме вырезать объект.Скачать

Figma – 4 способа удаления фона. Как в Фигме вырезать объект.

Инструмент Bend. Управление кривизной

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

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

Для управления сглаживанием через точку кривой:

  1. Подносим курсор к любой точке кривой. В правом нижнем углу курсора появится иконка с точкой и двумя направляющими.
  2. Зажимаем левую кнопку мыши и тянем. Из точки вытянется две симметричные направляющие, линии по бокам точки сгладятся. Чтобы управлять лишь одной направляющей, зажмите кнопку Alt. Чтобы включить привязку к углу наклона (кратная 45 градусам), зажмите кнопку Shift.
  3. Отпускаем левую кнопку мыши, чтобы зафиксировать кривизну.

Ниже показаны все вышеперечисленные приемы, включая использование клавиш Shift и Alt:

Для управления сглаживанием через направляющие точки:

  1. Подносим курсор к любой направляющей точки кривой. В правом нижнем углу курсора появится иконка с точкой и двумя направляющими.
  2. При клике левой кнопкой мыши направляющая будет удалена.
  3. Кликаем левой кнопкой мыши и тянем курсор, чтобы изменить угол направляющей вместе с противоположной направляющей, то есть симметрично. Если вы хотите изменить угол исключительно одной направляющей, зажмите клавишу Alt. Также тут работает зажатие клавиши Shift для привязки к углу наклона.

Часто случается, что направляющих не видно, но по форме линии видно, что они там есть. В таких случаях нужно переключиться на инструмент Move и выделить нужную точку. Появятся направляющие, после чего нужно переключиться назад в режим Bend.

Не самый удобный способ показать направляющие. Но есть решение. Достаточно постоянно работать в режиме Move, чтобы выбирать точки и показывать направляющие. А в режим Bend переходить с помощью горячей клавиши Ctrl или Command на MacOs. Обратите внимание, что горячую клавишу нужно зажать пока вы используете инструмент, так как сразу после отпускания клавиши вы вернетесь в режим Move.

Посмотрим, как это выглядят на практике. Обратите внимание, мы начинаем в режиме Bend, видны направляющие только двух точек. Далее переключаемся в режим Move, выделяем нужные точки и зажимаем Ctrl (Command на MacOs), чтобы быстро подправить направляющие точек или кривизну линий:

Видео:КОМПОНЕНТЫ В FIGMA. Как сделать, убрать, отменить, разгруппировать | Уроки фигма на русскомСкачать

КОМПОНЕНТЫ В FIGMA. Как сделать, убрать, отменить, разгруппировать  | Уроки фигма на русском

Инструмент Paint Bucket. Заливка замкнутых контуров

Позволяет выборочно закрасить замкнутые контуры векторной фигуры. Настройки заливки доступны в секции Fill и полностью повторяют возможности обычных примитивов. Инструкция по использованию:

  1. Выбираем инструмент кликнув по иконке капли или нажав горячую клавишу B.
  2. Кликаем внутри замкнутого контура, чтобы закрасить область. К иконке капли добавится плюсик.
  3. Повторно кликаем внутри закрашенного контура, чтобы убрать заливку.

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

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

Настройка обводки

Мы уже знакомы с некоторыми настройками обводки из первого урока по Figma. Давайте теперь разберем и продвинутые опции:

  • Выпадающие меню внизу слева и справа задают форму начальной и конечной точки контура. Конечно, если контур замкнутый, то мы ничего не заметим.
  • По клику на иконку с тремя точками внизу справа можно получить доступ к продвинутым настройкам. Смотрите пункты ниже.
  • Stroke style — стиль обводки: Solid — сплошная, Dashed — пунктирная. При выборе пунктирного стиля добавляются дополнительные параметры: Dash — длина пунктира, Gap — длина пропуска, Dash cap — форма пунктира.
  • Join — форма соединения точек: Miter — автоматически скашивается если угол наклона меньше заданного полем Miter angle, Bevel — постоянно скошенная, Round — скругленная.

Видео:ПЛАГИНЫ В FIGMA. Как найти, добавить, установить, использовать и удалять? | Уроки фигма на русскомСкачать

ПЛАГИНЫ В FIGMA. Как найти, добавить, установить, использовать и удалять? | Уроки фигма на русском

Скругление углов

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

  1. Выделите сплайн и перейдите в режим редактирования.
  2. Выделите нужные точки.
  3. Укажите степень скругления в поле Corner radius в панели свойств справа.

Заметьте, что такой способ скругления не влияет на направляющие точек и работает только с угловатыми контурами. Если вы задали кривизну линий с помощью инструмента Bend, то скругление не будет работать.

Видео:Как в Фигме вырезать объект. Figma - два способа вырезатьСкачать

Как в Фигме вырезать объект. Figma - два способа вырезать

Добавление и удаление точек

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

  1. Выбираем инструмент Move (клавиша V).
  2. Наводим курсор на точку, которую хотим скопировать.
  3. Зажимаем кнопку Alt. Курсор изменится на двойной, как бы подсказывая нам, что готов к копированию точки.
  4. Зажимаем левую кнопку мыши и перетаскиваем курсор. Новая точка последует за курсором. Обратите внимание, что образуется еще одна линия, так как оригинальная точка была связана линией с другой.

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

  1. Выбираем инструмент Pen (клавиша P).
  2. Наводим курсор внутрь линии туда, куда собираемся добавить точку. Figma будет подсказывать нам середину линии. Также к курсору в правом нижнем углу добавится плюсик.
  3. Делаем клик левой кнопкой мыши. Точка добавлена.

Для удаления точки:

  1. Выбираем инструмент Pen (клавиша P).
  2. Наводим курсор на точку, которую хотим удалить.
  3. Зажимаем клавишу Alt. К курсору добавится минус в правом нижнем углу.
  4. Делаем клик левой кнопкой мыши. Точка удалена.
  5. Еще один хороший вариант: если выделить точку инструментом Move и удалить ее кнопкой Delete, то Figma не будет соединять соседние точки и может образоваться отдельный контур внутри слоя. Этот способ идеален если вы удаляете отдельные контуры, например, лишние элементы скачанной иконки, чтобы упростить ее.

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

Видео:Как отменить последние действия в Фигме - коротко и по делу!Скачать

Как отменить последние действия в Фигме - коротко и по делу!

Преобразование обводки в кривые

На некоторых этапах работы, а особенно перед экспортом иконки в формат SVG может понадобиться преобразовать все линии в контуры. Другими словами конвертировать обводку в закрытые контуры с заливкой. Это нужно делать для того, чтобы иконки корректно отображались в браузере. После этой операции вы уже не сможете настроить толщину обводки или любые другие ее свойства кроме цвета. Поэтому выполняйте эту операцию в последнюю очередь. Чтобы конвертировать есть несколько способов:

  • Выделите векторный объект и нажмите Ctrl + Shift + O или Shift + Command + O на MacOs.
  • Вызовите контекстное меню нажав правой кнопкой мыши на нужном векторном объекте. Выберите команду Outline stroke.

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

Видео:Как удалить фон с фото за 5 секунд | FigmaСкачать

Как удалить фон с фото за 5 секунд | Figma

Сайты с бесплатными иконками

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

Существует множество сайтов с бесплатными SVG-иконками. Они удобны тем, что позволяют искать по ключевым словам. Тут нам не обойтись без знаний английского языка или Google Translate. А вот и наш список:

  • The Noun Project — 3 000 000+ (да, более 3-х миллионов) бесплатных иконок с удобным поиском. Много готовых наборов по темам.
  • Font Awesome — 1600+ бесплатных иконок в одном стиле с рубрикатором.
  • Cursor.in — крошечный сайт с коллекцией всех курсоров MacOs.

Фигма удалить точку в векторе

Фигма удалить точку в векторе

Фигма удалить точку в векторе

Чтобы скачать иконку на The Noun Project, воспользуйтесь строкой поиска. Для примера я ввела ключевое слово energy и нажала Enter. Загрузится список иконок, по понравившейся нужно кликнуть. В открывшейся странице нужно нажать кнопку Get this icon. Далее выбираем Basic Download, потом Continue. Теперь нажимаем кнопку SVG. Иконка скачивается.

Видео:Удалить фон в Figma БЕЗ ПОТЕРИ КАЧЕСТВАСкачать

Удалить фон в Figma БЕЗ ПОТЕРИ КАЧЕСТВА

Экспорт в SVG

Для экспорта иконки в SVG-файл ее нужно предварительно подготовить:

  1. Создать пустой фрейм и вставить внутрь векторный объект. Их может быть несколько. Размеры фреймов для иконок обычно кратны 8 пикселям. Подойдут такие: 16×16, 24×24, 32×32 и так далее. Если иконка не влазит, уменьшаем ее.
  2. Выровнять иконку по центру фрейма. Убедиться, что вертикальные и горизонтальные отступы равномерные.
  3. Перевести все обводки в кривые.
  4. Перекрасить все элементы в черный цвет. Дело в том, что разработчики умеют перекрашивать иконки, если нужно.

Теперь все готово. Осталось выполнить сам экспорт:

  1. Выделяем фрейм с иконкой.
  2. В правой панели кликаем по плюсику напротив секции Export (она последняя).
  3. В выпадающем меню меняем формат на SVG.

Видео:Как вырезать объект в Фигме. Figma - три способа вырезать картинку и убрать фонСкачать

Как вырезать объект в Фигме. Figma - три способа вырезать картинку и убрать фон

Домашнее задание

  1. Выберите 8 иконок и нарисуйте их с использованием инструмента Pen.
  2. Задание повышенной сложности. Выполнять необязательно. Выберите 4 иконки, упростите их и сделайте обводку потолще.
  3. Подготовьте все нарисованные иконки и экспортируйте их в две отдельные папки (light, regular — для толстых). Убедитесь, что иконки имеют понятные названия. Поместите две папки в zip-архив. Самостоятельно научитесь архивировать файлы, если не умеете.

Фигма удалить точку в векторе

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

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

Выводы

В этом уроке вы познакомились с продвинутыми техниками работы с кривыми. Объединив эти знания с булевыми операциями можно рисовать иконки и иллюстрации любой сложности. Но это уже больше специализация графического дизайнера. Вам же важно научиться, как можно подправить существующую иконку и подогнать ее под ваши задачи.

Придумывание и отрисовка иконок это очень широкая и сложная тема, которую мы еще не раз затронем в дальнейшем.

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

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

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

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

Фигма удалить точку в векторе

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

Фигма удалить точку в векторе

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

Фигма удалить точку в векторе

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

Фигма удалить точку в векторе

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

Фигма удалить точку в векторе

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

Фигма удалить точку в векторе

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

Фигма удалить точку в векторе

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

Фигма удалить точку в векторе

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

Видео:Перо в Figma // Как векторизовать логотипСкачать

Перо в Figma // Как векторизовать логотип

Заключение

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

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

Уроки Figma (Фигма) – №7: Векторное меню / Бесплатный курс по Фигме

Векторы в Figma (создание)

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

Итак, чтобы создать произвольный вектор, мы будем в большинстве случаев использовать перо (P).

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

Как создать линию пером

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

Фигма удалить точку в вектореПрямая, созданная пером в Figma

Чтобы сделать кривую, вам надо в конечной точке не отпускать курсор, а протащить его от точки.

  1. Кликаете для создания первой точки
  2. Отпускаете
  3. Переносите курсор в конечную точку
  4. Зажимаете курсор и тащите в сторону

В итоге вы получаете изогнутую линию.

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

Фигма удалить точку в вектореРедактирование вектора

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

Фигма удалить точку в вектореУзел вектора в Figma Фигма удалить точку в вектореНаправляющая в узле

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

Если вы хотите превратить свою кривую в прямую, приведите направляющую к узлу, из которого она выходит.

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

Фигма удалить точку в вектореСочленение векторов

Далее, если вы создали из узла еще один вектор, у вас будет уже две направляющие.

Для удобства Фигма предлагает использовать одну из трех настроек узла:

Фигма удалить точку в вектореНастройки отражения

  1. No mirroring — направляющие будут управлять независимо друг от друга
  2. Mirror Angle — отражаться будет только угол наклона направляющей. Таким образом в узле не будет резкого перехода (излома) из одного вектора в другой
  3. Mirror Angle and Length — направляющие будут иметь отраженные углы и одинаковую длину. Таким образом вы добьетесь симметричного изгиба.

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

Фигма удалить точку в вектореПараметры кривой

Для вектора вы можете применить стандартный набор параметров: эффекты (тени, размытие), обводку и заливку.

Просмотр расстояния от точки до кривой

При редактировании вектора в Figma с зажатым Alt (Windows) / Option (Mac) наведите на другой узел или кривую, чтобы просмотреть расстояния по осям X и Y.

Фигма удалить точку в вектореРасстояние от точки до кривой

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

Поделиться или сохранить к себе: