Pen и векторные сети в Figma: как рисовать иконки без боли
Иконка в Figma редко рисуется «как в Illustrator». Здесь перо строит граф, а не цепочку точек, и это меняет привычки: одна вершина может соединять три и больше сегментов.
Разбираемся, что такое векторная сеть, как работают Pen и Bend и почему скругление углов доступно не везде.
Что такое векторная сеть
Практика: Figma хранит векторный объект как неориентированный граф из вершин, сегментов и областей.
Практика: обычный путь — цепочка, а сеть допускает ветвление в одной точке.
Практика: поэтому значок со стрелкой и перекладиной рисуется одним объектом, а не тремя.
Практика: с точки зрения формата сеть совместима с обычными путями и SVG.
Инструмент Pen
Практика: клавиша P включает перо; клик ставит точку, клик с перетаскиванием задаёт кривизну.
Практика: удерживая Shift, вы фиксируете угол в 45 градусов.
Практика: чтобы замкнуть контур, наведите перо на первую точку — рядом появится кружок — и щёлкните.
Практика: чтобы оставить путь открытым, нажмите Escape.
Как добавить ветку
Практика: в режиме редактирования векторного объекта наведите перо на существующую точку.
Практика: когда курсор покажет точку, щёлкните и ведите новую линию — она войдёт в ту же сеть.
Практика: так делаются перекладины, ответвления и внутренние контуры одной иконки.
Практика: отдельный объект для каждой линии — лишняя работа при правках.
Bend
Практика: Bend изгибает сегмент, не заставляя тащить управляющие точки в пустоте.
Практика: выберите инструмент, затем потяните сегмент — Figma сама расставит рычаги.
Практика: результат остаётся обычной кривой Безье, а не отдельным эффектом.
Практика: для симметричной дуги удобнее Bend, для точной геометрии — рычаги.
Рычаги и симметрия
Практика: у гладкого узла рычаги связаны, и движение одного тянет второй.
Практика: Alt или Option разрывает связь и позволяет поставить излом.
Практика: двойной щелчок по объекту или Enter входит в режим редактирования вектора.
Практика: Escape выводит из режима, не сбрасывая сам объект.
Удаление и лечение
Практика: удаление точки в сети перестраивает сегменты, а не рвёт фигуру.
Практика: у Figma есть отдельная логика «удалить и залечить», которая соединяет соседей.
Практика: для сложных пересечений это быстрее, чем удалять сегменты по одному.
Практика: после правок проверьте заливку: разомкнутая область может перестать заливаться.
Скругление углов
Практика: Corner radius задаётся для всей фигуры или для отдельной точки.
Практика: в режиме редактирования вектора выберите точку и введите значение в правой панели.
Практика: стрелки со Shift меняют радиус на величину большого шага.
Практика: Corner smoothing превращает скругление в непрерывную кривую — так получаются «сквирклы».
Где радиус не работает
Практика: радиус недоступен для линий, стрелок и сетей, состоящих из одного штриха.
Практика: у открытого пути конечные точки скругляются не радиусом, а настройкой концов.
Практика: прямоугольники, нарисованные пёрышком, тоже могут не получить радиус.
Практика: булевы операции с эллипсами внутрь не дают радиус по той же причине.
Практика на иконке
- Нарисуйте основную форму пером по сетке 24 пикселя.
- Замкните контур и выставьте заливку.
- Добавьте перекладину как ветку в той же сети.
- Подправьте кривые инструментом Bend.
- Скруглите нужные узлы радиусом.
- Проверьте объект на размере 16 пикселей.
- Объедините лишние фигуры булевой операцией.
- Назовите слой и уберите его в компонент.
Почему сеть удобнее пути
Практика: при масштабировании и правке сеть сохраняет соединения в узлах.
Практика: не нужно следить, чтобы концы двух путей совпали идеально.
Практика: концы и соединения обрабатываются как часть одной геометрии.
Практика: поэтому иконки в Figma меньше «рассыпаются» при изменении толщины обводки.
Обводка против заливки
Практика: иконку можно собрать обводкой или заливкой — это разные подходы к правке.
Практика: обводку проще менять по толщине, но сложнее совмещать с заливкой внутри.
Практика: заливка даёт полный контроль над формой, но каждая правка — это изменение контура.
Практика: для наборов иконок обычно выбирают один подход и держат его.
Точность и пиксельная сетка
Практика: включите привязку к пикселям, если иконка будет отдаваться разработчику.
Практика: полупиксельные координаты дают размытые края при экспорте в растр.
Практика: проверяйте результат в режиме просмотра на реальном размере.
Перо и планшет
Практика: перо принимает давление и наклон, если рисуете на графическом планшете.
Практика: для иконок это редко нужно: механическая точность важнее живости линии.
Практика: кривые от руки удобнее обводить поверх готового референса.
Практика: референс держите на слое с малой прозрачностью и удаляйте перед экспортом.
Слои и компоненты
Практика: готовая иконка убирается в компонент, чтобы переиспользовать её в макетах.
Практика: варианты по размеру или состоянию делаются через варианты компонента.
Практика: не держите внутри компонента лишние скрытые слои — они увеличивают вес файла.
Практика: называйте слои по смыслу: разработчик увидит эти имена при передаче.
Совместная работа с разработчиком
Практика: разработчику нужны целые координаты, единая сетка и понятная структура.
Практика: экспорт в SVG даёт код, который потом правят руками.
Практика: чем меньше в объекте скрытых эффектов и масок, тем чище получится разметка.
Практика: проверяйте экспорт в браузере, а не только на холсте Figma.
Что проверить перед передачей
Практика: все линии иконки должны быть объединены в один слой или в осмысленную группу.
Практика: размеры должны совпадать с сеткой, а не с «примерно похоже».
Практика: лишние точки на контуре увеличивают вес файла и мешают правкам.
Практика: иконка должна читаться на 16 и на 24 пикселях без дополнительной подгонки.
Где ломается
Фигура не заливается. Контур остался разомкнутым.
Радиус серый. У объекта выбрана линия или сеть из одного штриха.
Ветка не присоединилась. Перо не попало точно в точку.
Иконка плывёт при масштабе. Часть линий осталась отдельными объектами.
Края размыты при экспорте. Координаты не целые.
FAQ
Чем векторная сеть отличается от пути?
Сеть допускает ветвление в одной точке, путь — только цепочку сегментов.
Можно ли скруглить один угол?
Да, в режиме редактирования вектора радиус задаётся для выбранной точки.
Почему Bend не действует?
Инструмент работает по сегменту: выберите сегмент или включите режим редактирования.
Нужно ли объединять линии иконки?
Да, иначе при правке формы придётся двигать каждый объект отдельно.