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


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

 

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

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

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

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

Прямая, созданная пером в Figma
Прямая, созданная пером в Figma

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

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

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

 

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

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

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

Узел вектора в Figma
Узел вектора в Figma
Направляющая в узле
Направляющая в узле

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

 

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

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

Сочленение векторов
Сочленение векторов

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

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

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

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

Параметры кривой
Параметры кривой

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

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

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

Расстояние от точки до кривой
Расстояние от точки до кривой

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

Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:


👋 Курс дизайнера за полцены: сформируйте портфолио и найдите высокооплачиваемую работу. Помощь с трудоустройством!

По теме:


<