To-Path: A Figma Plugin
- select a curve
- select an object, group, or text
- hit "link" and watch the magic* happen
*Its janky code and its not actually magic
╭┈─────── ೄྀ࿐ ˊˎ-
╰┈➤ 𝙄𝙈𝙋𝙊𝙍𝙏𝘼𝙉𝙏
Version 1.5.0 and higher's revamped live updates WILL NOT work on previous linked paths made by this plugin! You must create a new linked path group!
☆゜・。。・゜゜・。。・゜★
Open an issue on the github:
https://github.com/codelastnight/to-path-figma
☆゜・。。・゜゜・。。・゜★
consider buying me a coffee :)
─────────✧❁✧─────────
˚ ⊹ · * ✧ ⋆ · * . · . · · .. . . · + · * ✫ * ⊹ * ˚ . . · ⋆ * . * . . · . · . * · . · · + . · ** ˚ . . + · ⋆ * . * . . · . · . *
How it Works
-
the plugin generates an array of points (420 between each point but you can also change this in the "about" menu) using castejau's algorithm that follows the curve, also finding the angle of the tangent of each point. the length from the start of the curve to each point is also generated and stored (find out more here: https://javascript.info/bezier-curve)
-
the nth's object's x position + object width + spacing is calculated
-
the plugin compares the x position of the object with the array of points. 2 points with closest length is picked
-
then the plugin finds the point between those two points and finds the exact point to place the object. the angle used is just the tangent of the nearest point.
-
the object is placed and the plugin moves onto the next object.
development setup
-
install packages:
npm i -
compile :
npm run prod
mfw someone else already put out something similar to my plugin but i spent too much time on this to stop now.