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:
//SizeConfig
screenWidth = _mediaQueryData.size.width;
screenHeight = _mediaQueryData.size.height;
.....
extension SizeDoubleExt on double {
double h() {
double screenHeight = SizeConfig.screenHeight;
var res = (this / 693.0) * screenHeight;
return res;
}
double w() {
double screenWidth = SizeConfig.screenWidth;
var res = (this / 320.0) * screenWidth;
return res;
}
}
example:
return Container( width: 80.w(), );
but the result does not satisfy me. maybe I need to consider devicePixelRatio(logical pixel), or the "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.