Rest API: exposing SVG real strokes

Hey @gavinatkinson! Can you help me better understand what you mean by “PATH” object type and “the path outlines”? Are you referring to the Path arrays in strokeGeometry and in fillGeometry on Vector nodes in the REST API?

Sure! What I want is the path command that corresponds to the purple line, but the API gives me the dashed line, which is the outlined stroke. I’m referring to the path arrays in strokeGeometry, since fillGeometry is empty for figma path elements.

The only way I know how to achieve this image is to outline a stroke, which turns it into a shape, then apply a stroke to that shape.

If that is what you are doing, the information represented by your purple line no longer exists for the node. That loss happens when you outline the stroke and all the information we have to provide is the dashed line stroke geometry.

Am I understanding that correctly? Can you share a file with this node in it if not?

Sorry - let me try to explain again.

In your example - I want to get the path command that draws the black line, but what I get out of the API is the path command that draws the outline of the path stroke, as if I had clicked ‘outline stroke’.

yeah, sorry if what i was saying wasnt clear. i had to outline the black line to get the dashed line. if i didn’t outline the black line, i would get the code you are looking for. you’re saying the stroke you have isn’t outlined and it is returning an outlined path? that should not be happening.

yes, thats what I’m saying. by the way - i think the reason behind this is because SVG doesn’t support stroke ‘sidedness’ aka outside center inside. So I understand why someone might design the api response this way. I just wish it were an option.

just a note - the dashed line is just how stroke outlines look in command+y mode in the app.

ok. i feel like we’re finally almost on the same page lol. thanks for your patience.

this first screenshot has a red line with a thick stroke. in outline mode, it looks like screenshot two. inside, outside, and center align of the stroke don’t change it’s appearance in either of these screenshots.

given these two screenshots of the exact same node, what are you saying the REST API is returning for you? it should be the inner path. are you saying it is not?

if thats not what youre saying, what is your expectation?

Hey @jak_e I think what’s meant is the original points for the path.

The API returns a path that includes the stroke weight that was set in figma… which makes sense.

it’d be nice if the API could return the points for the middle line with the start/end dots in your second photo

From my experience this issue is what caused the most friction in Figma’s REST API.

Figma’s strokeGeometry paths are not actually stroke paths but fill paths and that is initially causing the confusion. But this is just the start.

Regardless of the strokeAlign value FIgma is always returns the same fill path in strokeGeometry so it’s up to you to create the actual path you would expect.

What is most intuitive and what I think most people expect is that:

1. when "strokeAlign": "INSIDE" the path should be the path along the center of the inside path
2. when "strokeAlign": "OUTSIDE" the path should be the path along the center of the outside path
3. when "strokeAlign": "CENTER" the path should be the path along the center of the center path

Since we have the strokeWeight it is easy to just draw that using stroke method.

Instead, this complicated solution is what makes it work in the current version of the REST API:

1. Take the path from strokeGeometry and find the corresponding fill path from fillGeometry
2. to get the INSIDE path substract the strokeGeometry from the fillGeometry path and then substract the fill fillGeometry using XOR. FInally use the fill to color the shape
3. to get the OUTSIDE path make union of the fillGeometry and strokeGeometry and then substract the fillGeometry using XOR. Finally use the fill to color the shape
4. to get the CENTER don’t take the strokeGeometry and instead take it’s fillGeometry counterpart and then use the stroke method with strokeWeight to color it

I don’t understand why it has to be so complicated for API users, Figma should take that extra step and calculate INSIDE/OUTSIDE/CENTER paths for us so we can just use the stroke method of our library with strokeWeight.

@tank666 @Gleb any idea if it’s on the roadmap to expose the original points path?

@BostonUX it seems you implemented the logic of converting geometry outlines to original points. Could you please share your code no matter the language?

Thank you,

Hello @sneko in our plugin Figma2Flutter we are not converting to actual stroke path from the path outlines we get from Figma’s API.

Instead we used the approach I described in my lengthy post above and are clipping the “stroke shapes” we get from Figma’s API to get the correct shape for “CENTER”, “INSIDE” and “OUTSIDE”.

You can try using the plugin to export from Figma file and then inspect the generated Dart code (code is in the GIT repository of the package which you get when exporting).