Skip to main content

Design is fun but restore it is not

especially when I have to do it again and again.


I have tried to build a such tool but finally failed.


I can do it if auto-layout is applied to the design but I think I can not force people use auto-layout. Then I find it is really hard for me to transform layout from Figma to the way I code.


In order to solve this, I try to transform absolute layout to flex layout (auto-layout in web)

The basic algorithm is


1: get all elements from Figma api

2: get all bounding box with x, y width, height

3: try to seperate the box into different lines ( if elements overlap then same line)

4: for every line, if elemets overlap, find the minimum elements that should use absolute position

5: apply other attributes based on Figma api doc


I have checked lots of similar plugin but none work fine

Does anyone have suggestions on this?

The oirgin topic is here