Как работает инструмент To Path в Figma?

Инструмент To Path в Figma работает как плагин, который располагает выделенный текст на кривой или по краю любой стандартной фигуры. skillbox.ru

Процесс работы: github.com

1. Плагин генерирует массив точек (по умолчанию с интервалом 420 точек, но его можно изменить в меню «О») с помощью алгоритма Кастежау, который следует по кривой и находит угол тангенса каждой точки. github.com
2. Также вычисляется длина от начала кривой до каждой точки и сохраняется. github.com
3. Плагин вычисляет положение по оси X текущего объекта, его ширину и расстояние между объектами. github.com
4. Затем сравнивает положение по оси X объекта с массивом точек. github.com
5. Выбираются две точки с ближайшей длиной, после чего плагин находит точку между этими двумя точками и определяет точное место для размещения объекта. github.com
6. Используемый угол — тангенс ближайшей точки. github.com
7. Объект размещается, и плагин переходит к следующему объекту. github.com

Чтобы использовать To Path, нужно: skillbox.ru

1. Нарисовать кривую с помощью пера и написать любой текст. skillbox.ru
2. Выделить кривую и текстовый модуль. skillbox.ru
3. Нажать правой кнопкой мыши на выделенные предметы, в выпадающем меню перейти в пункт «Plugins» и нажать на «To Path». skillbox.ru
4. В появившемся окне нажать на кнопку «Link». skillbox.ru
5. Плагин разделит каждое слово на отдельные слои с буквами и разместит их по контуру фигуры или кривой. skillbox.ru