FlutterFlow Design Considerations

Design Stage

Low Fidelity

• Try to design the app so we can reuse components
• For forms (editing/adding) - leave comments in whimsical and let’s discuss them
• For search and filters - let's have them in a separate screen - user clicks search and it opens up a new screen with search results. Then they can go back and search again. Same with filtering.
• In Supabase it's possible to search by multiple fields. This means, that sometimes we don't have to add filter as they can just search by role or city or any other field.
• Let's do hours of operation of a business as single input text if we only need to display it, so users can input Monday - Friday, AM, PM freely. Unless we need some calculations on these.
  Q: How easy is to move something in FF? To move a section above another section. Does it just drag and drop as with Glide?
  A: Most of the time, yes, it's drag and drop. We have to be careful, though, because sometimes we might be using Custom Components. And then if we wanted to move something in this custom component, it would move everywhere where we're using that.

High Fidelity

• When designing, use components from FlutterFlow Components Library. In Figma, add a note with the name of a component "Card 07".
• It is possible to change properties of a component, BUT it will change this component globally for the whole app.
• Example: We want to use "Card 07" component, but with favorite heart icon in Home tab, and without it in Search tab. In Home tab we add a note "Card 07 - with heart icon" and in Search tab we add "Card 07".
• Note: we don’t need to name a new version every time. For example, if we add and icon to "Card 07", we can just add a note "Card 07" and we’ll just add an icon to that component. Adding names such as "Card 07 - with heart icon" is useful, when we have multiple versions of components in the app.
• We can design and create our own components from scratch, although we should use FF library components if that’s possible.
• Let’s think about it as designing an app with Glide but imagine that Glide has a possibility to add and design custom components. Most of the time we would be using their pre-designed components.
• It’s better to create a component from scratch and add a note "Our component" or something like that, THAN try to find something in FF library and then do many changes to that and leave a note "Card 07" for example.
• There is no need to leave the comments on every component in the design, just so it’s clear to the dev what’s what.