Векторы в Figma (создание)
В Figma очень логичный и удобный редактор векторов, включающий достаточно обширный набор инструменов. Эта публикация будет полезна для вас, если вы начинаете знакомиться с векторами в Фигме.
Итак, чтобы создать произвольный вектор, мы будем в большинстве случаев использовать перо (P).
Перо создает изогнутые линии, которые вы можете соединить между собой, формирую таким образом сложную фигуру.
Как создать линию пером
Внимание: если вы кликните пером на полотно, а затем отпустите и кликните пером еще раз в другое место и отпустите, Фигма будет считать, что вы хотите сделать прямую.
Чтобы сделать кривую, вам надо в конечной точке не отпускать курсор, а протащить его от точки.
- Кликаете для создания первой точки
- Отпускаете
- Переносите курсор в конечную точку
- Зажимаете курсор и тащите в сторону
В итоге вы получаете изогнутую линию.
Выбираем ее и дважды кликаем по ней, чтобы перевести в режим редактирования вектора, либо нажимаем на иконку сверху.
В режиме редактирования вектора фигма подсвечивает узлы вектора, если вы нажмете на один из них, то увидите управляющие элементы.
Угол наклона направляющей показывает, под каким углом линия будет «входить» в узел, а длина направляющей регулирует радиус.
Если вы хотите превратить свою кривую в прямую, приведите направляющую к узлу, из которого она выходит.
Чтобы продолжить вектор, наведите перо на узел и создайте из него еще один вектор.
Далее, если вы создали из узла еще один вектор, у вас будет уже две направляющие.
Для удобства Фигма предлагает использовать одну из трех настроек узла:
- No mirroring — направляющие будут управлять независимо друг от друга
- Mirror Angle — отражаться будет только угол наклона направляющей. Таким образом в узле не будет резкого перехода (излома) из одного вектора в другой
- Mirror Angle and Length — направляющие будут иметь отраженные углы и одинаковую длину. Таким образом вы добьетесь симметричного изгиба.
Из одного узла можно создать неограниченное количество векторов, но настройки отражения для таких количеств соединений уже не работают.
Для вектора вы можете применить стандартный набор параметров: эффекты (тени, размытие), обводку и заливку.
Просмотр расстояния от точки до кривой
При редактировании вектора в Figma с зажатым Alt (Windows) / Option (Mac) наведите на другой узел или кривую, чтобы просмотреть расстояния по осям X и Y.
Вы можете добавить точку в нужное место, переведя курсор в режим пера с помощью горячей клавиши P и кликнув на редактируемый вектор.
Да почему?))
норм!
А как удалить ненужную точку на векторной прямой? Или как сделать разрыв в точке на элементе?
Перейдите в режим редактирования, выберите перо, сделайте точку, где хотите сделать разрыв, потом выберите Move tool (V), выделите точку и удалите её
А как удалить ненужную точку, но при этом что бы сама прямая осталась?
в режиме пера зажать Alt и навести на лишнюю точку, появится минус , нажимаем и готово
Как создать симметричную трапецию?(!)
Как ее изогнуть по форме круга?
Симметричную трапецию можно создать, например, из прямоугольника: сместите верхние точки на нужное расстояние в режиме редактирования. Либо создайте левую часть, продублируйте, отразите (Shift H и Shift V соответственно для горизонтали и вертикали) и объедините две части (control + E / Cmnd + E).
Второй вопрос не очень понятен, уточните, пожалуйста)