Figma vs Adobe XD in Exporting Stroke SVG Path for Flutter Code

I just noticed the difference in the SVG code of the stroke path exported from Figma and Adobe XD.

Photo by Zac Wolff on Unsplash

A few days ago, I explored CustomPainter in Flutter. With this feature, any shape can be made with Flutter code. And also, I found the Flutter shape maker tool that helps me to generate a Flutter code from any vector image.

Everything works fine with this tool. I can freely convert any SVG image to my Flutter app as widgets. But then, I got a problem with the generated code. Widgets do not appear on the screen!
[in this case, my SVG image is exported from Adobe XD]

I spent hours debugging my code and still can’t solve the problem. Until I realized, the problem was coming from the SVG image. I realized this after comparing SVG code exported from Adobe XD and Figma.

The issue only occurs on single-stroke lines. Figma and Adobe XD have a feature named pen. To see the difference, we’ll use this pen to draw random vectors.

Pen in Figma

pen in Adobe XD

Figma

First, let's try it on Figma. I will draw a single curved line with a pen. Then copy the SVG code.

The curved line in Figma

Now we have the SVG code of curved lines from Figma.

<svg width="199" height="154" viewBox="0 0 199 154" fill="none" 
  xmlns="http://www.w3.org/2000/svg">
<path d="M0.000183105 150.646C194.243 150.646 195.66 1.02319 195.66 1.02319" 
  stroke="#707070" stroke-width="5"/>
</svg>

Adobe XD

Next, do the same thing on Adobe XD. Draw curved lines and then copy the SVG code.

the curved line in Adobe XD

here is the code:

<svg xmlns="http://www.w3.org/2000/svg" width="198.16" height="152.146" 
  viewBox="0 0 198.16 152.146">
  <path id="adobe_xd_path" data-name="adobe xd path" d="M4717.429,4868.49c194.243,0,195.66-149.623,195.66-149.623" 
   transform="translate(-4717.429 -4718.844)" fill="none" 
   stroke="#707070" stroke-width="5"/>
</svg>

With the same vector shape, we have different path values.

Figma: d=”M0.000183105 150.646C194.243 150.646 195.66 1.02319 195.66 1.02319"

Adobe XD: d=”M4717.429,4868.49c194.243,0,195.66–149.623,195.66–149.623"

The different values are very contrasting. Because Adobe XD has a transforming point. This means it does not start from the point 0.0.

Because the path value was too very big, that caused the widget was not rendered on the screen. The widget was rendered on the point -4717,-4178 which is outside of the screen.

Workarounds

I have 2 options to solve the issue on my Flutter code:

• Use Transfrom.translate widget to move the widget back to the Screen point.

Transform.translate(
  offset: Offset(dx, dy), // ( -4717.429, -4718.844 )
  child:CustomPaint()
)

• Use Figma to export SVG code.
  In my case, I had drawn a complex vector in Adobe XD, it took quite a while to redraw. So I just export it to an SVG file, then open it in Figma. Now from Figma, I can get the value without the transform property.

Thank you for having the end. Please clap 👏 if you like this article.