Skip to main content
Question

How to adapt figma sizes to in flutter app?


Yodo_Men

I have design Figma, I need to apply this in my flutter app. but I have certain difficulties, so in order.

The first thing I tried was to use auto import tools, I tried:

  • Adobe XD to Flutter
  • Supernova Studio

Unfortunately these tools are still at the beginning of their journey. they provide some benefit, but do not give full imports

Also I use several plugins for Figma:

  • Figma to flutter
  • Figma to code

but the capabilities of these plugins are also limited. I realized that I need to do it myself.

Figma page dimensions are 320 px. Device screen sizes will vary. but I need it to look as close as possible. I decided to use the “proportional approach”. I am using the dimensions of the figma elements with the following extension:

   ```

double w() {
//current device width
double screenWidth = SizeConfig.screenWidth;
var res = (this / 320.0) * screenWidth;
return res;
}
```

I use it like:

 ```
    Container(  width: 80.w(), );        

 ```

but the result does not satisfy me. maybe “proportional method” is wrong.

The main question is how do I adapt the dimensions(sizes) of the figma to the sizes of different devices?

any advice - I would be very grateful.

0 replies

Be the first to reply!

Reply


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings