← Back to context

Comment by spookie

7 days ago

Yeah...

Just do pictures on the design phase and then code.

There’s a lot that goes into creating the pictures. Consistent spacing, colors that change depending on platform, breakpoints, containers, and on and on and on.

There’s no reason that a tool can’t model a design system and make producing consistent designs that use it trivial.

I think the problem with Figma is that it tries to appeal to visual designers, UX designers, and programmers. Good for business, bad for users.

  • Don't create every possible picture. Create a representative set.

    Draw each screen at least once. If you have dark mode, you don't have to fully redraw each screen in dark mode, just enough to show how dark mode should look. If it has to work on desktop, you probably do have a completely different desktop version of each screen (from the default mobile) so draw that - but don't redraw every detail of a widget that's identical to mobile.

    Testing every combination should be for the testing stage. It's good if you can foresee clashes (like the desktop version of this widget looks bad on this page in dark mode) in the design stage but it's not really an excuse to prolong the design so long that it lasts until you would have been finished with testing anyway.

    Having a computer generate all the combinations for you in the design stage isn't that great unless you can pay individual attention to them - there's no point producing artefacts that nobody looks at.

    • I don't think you got the point. Instead of "pictures" we need a design system - defined sizes, paddings, margins, grids, font-sizes, colors, breakpoints, variants, components, behaviors, transitions, etc. and it should be consistent across the app. How many times have I worked with a design that didn't respect these consistently from page to page...

      1 reply →