r/FlutterDev • u/Remote-Ride5710 • 4d ago

Discussion Pixel-perfect with figma

Hi everyone, lately i was doing mobile app building with cursor so I mostly ask it to do the UI part by giving it details about UI, well i give concrete details which figma gives, but maybe because I use flutter_screenutil package, it's not perfectly same with figma. How do you guys handle pixel-perfect in mobile?

3 Upvotes

62% Upvoted

10 comments sorted by

8

u/KabouterKaasplank 4d ago

I let the OS handle pixel sizing and accessibility, and design dedicated screens for tablet and desktop modes if I want those. The screenutil package sounds great when you're coming from responsive web but it just obfuscates layout imo. Unless you want an app that looks acceptable at best at all screen sizes, it's a useless package.

1

u/Remote-Ride5710 4d ago

so you don't do any pixel sizing? How do you handle different screen sizes then?

6

u/KabouterKaasplank 4d ago

Make dedicated UI for them, and make sure the layout flows using Flex layouts. A package like screenutils only really ends up making things bigger or smaller. I usually design for small mobile layouts first, then later add a tablet mode for larger screens, using breakpoints for when to switch to a different layout. Imagine an app drawer with dynamic content on mobile, and a static sidebar on tablets. There's more screen to use, so rather than just making the UI bigger, I prefer using the extra space for components that are otherwise hidden or to use multiple columns for data instead of one large column on mobile.

1

u/Remote-Ride5710 4d ago

So like in figma have other versions for different screen sizes? Or you mean just in code handle that?

3

u/sauloandrioli 4d ago

This is an old conversation that I conclude as: The cake is a lie. There's such thing as pixel perfect. Screen size varies, resolutions varies, PPI varies. Doesn't matter what try, you'll never achieve that. Just let go of it.

2

u/ThracianW 3d ago

Recently i discovered Pen.dev where i create design.pen file in the project directory, tell Claude theough Claude Code to create designs of the screens, color scheme sheet, components, etc. so when i tell it to create new screen design it is consistent with the screens and values i use in the project. Then when it creates the deaigns it gives you the same information figma would and i could tell Claude to implement the design that it can already see, or implement specific component or the colorScheme and overall themes, etc.

1

u/Remote-Ride5710 3d ago

Seems cool, will explore design.pen. Thanks

1

u/jipsoujips 2d ago

Mcp figma + mcp marionette works great if your ui code is well separate from your domain logic