Flutter - Architectures for designer/developer iteration process flow

143

After experimenting with a couple of different methods, it seems like the export features of different programs aren't far along enough to allow anything but the "mockup method" where the designer basically gives the flutter programmer access to some kind of mockup (axshare, adobeXD, zeplin, etc.)

HOWEVER, I did have the most success with exports using sketch -> SuperNova, but this required a tech-saavy designer that was able to probably classify all of the components such as buttons, etc, as well as create designs with responsiveness in mind. Otherwise the export is filled with absolute positioning, which makes the flutter coders job difficult since they need to correct all of those exported widgets and make them responsive.

Share:
143
William Terrill
Author by

William Terrill

Updated on November 20, 2022

Comments

  • William Terrill
    William Terrill over 1 year

    I've been trying to figure out a good Flutter process workflow for designer and developer interactions in order to iterate desktop/mobile/web application design. There isn't a very clear line of demarcation between the code and the design as there is in web dev. (for example, the developer would be focused on javascript and a little html, while the designer would be focused on the css and html.)

    Some of this has been written about here: how developers and designers can collaborate using flutter but the mechanics have been left out. (also, it seems like the average flutter designer needs to be more tech-savvy with git skills than designers of yore. Is this your experience?)

    While there does seem to be good control of color/fonts/styles with the AppTheme widget, other design aspects are more difficult to enact. For example, if you wanted to change all of the div's (in html) / Containers() (in flutter) from square corners to rounded, you could set a class and apply it across the board in web dev. In flutter, I believe you have to visit every Container in the code and apply a BoxDecoration widget... and repeat if there are changes in the future.

    Specifically, what design-dev processes/architectures are you using to facilitate design iterations between devs and designers?

    Note: Additionally, I've seen that there are some tools like Adobe XD, and supernova.io that allow for design exporting to flutter code, however that seems like a one-time thing... and doesn't lend itself to well to iteration. Has anyone used this method in their design iterations?