Converting Figma design dimensions to responsive Flutter layouts

Other Questions Figma
1

I’m working on a Flutter project where I need to convert my Figma design into a mobile app. My design is created with 320px width as the base, but I’m struggling to make it look good on different screen sizes.

I’ve tried some automated tools like Adobe XD to Flutter and Supernova Studio, but they don’t give me complete results. I also tested Figma plugins like “Figma to flutter” and “Figma to code” but they have limitations too.

Right now I’m using a custom approach with extensions to scale the dimensions:

// DeviceConfig
deviceWidth = _mediaQuery.size.width;
deviceHeight = _mediaQuery.size.height;

extension ResponsiveDouble on double {
  double height() {
    double deviceHeight = DeviceConfig.deviceHeight;
    var result = (this / 812.0) * deviceHeight;
    return result;
  }

  double width() {
    double deviceWidth = DeviceConfig.deviceWidth;
    var result = (this / 375.0) * deviceWidth;
    return result;
  }
}

Usage example:

return SizedBox(width: 120.width());

But I’m not getting the results I want. Maybe I should factor in devicePixelRatio or use a different scaling method altogether.

What’s the best way to convert Figma measurements to work properly across different Flutter device sizes? Any suggestions would be really helpful.

2

I’ve been there with Figma to Flutter conversion - it’s tricky. Linear scaling breaks your visual hierarchy on different screens, which sounds like what you’re dealing with. Here’s what actually worked for me: ditch the proportional scaling and use Flutter’s responsive widgets with breakpoints instead. I set up MediaQuery breakpoints and adjust layouts based on those. For padding and margins, I still use responsive units but cap the scaling so things don’t get ridiculous. Flexible and Expanded widgets are your friends here - they adapt naturally without all the manual calculations. You might want to check out flutter_screenutil too. It handles devicePixelRatio automatically and scales way more reliably than custom extensions. Just remember - good responsive design isn’t always about scaling everything. Sometimes you need totally different layouts for different screen sizes.

3

ur sizing approach is limiting. devices have different aspect ratios, so linear scaling can be a pain. consider using LayoutBuilder for more accurate constraints. also, think about using percentages for widths and heights, like MediaQuery.of(context).size.width * 0.3 for 30% of screen width. it’s a more reliable way!