How To Organize 1250+ Design Screens in Figma (+ File examples) (https://lnkd.in/e7X4fKcj), a practical case study of how to organize design screens in user flows — to reduce repetitive work and still cover all user journeys. Via Lorenzo Palacios Venin.
✅ Divide the product into files based on navigation.
✅ Each navigation section will get its own Figma file.
✅ List user flows for each of these navigation sections.
✅ Divide each file into pages based on these user flows.
✅ Each starting point will get a separate page.
✅ Each flow that departs from it will get a page.
✅ Break heavy, long user flows into separate files.
🚫 Flows rarely exist alone: they redirect to other flows.
✅ Each flow has exactly 1 entry point, but many exit points.
✅ Screens are ordered from left to right for progression.
✅ Screens are vertically stacked (top to bottom) for variations.
✅ Specify each interaction only the first time it appears.
✅ Variations are displayed with conditional blocks.
File example (Route search):
https://lnkd.in/ezfY5G2x
Full workflow in Figma (flowchart):
https://lnkd.in/e7V8nEi3
I absolutely love the idea of using color coding for file covers to communicate states. The team uses blue 🔵 to indicate work in progress, green 🟢 for the latest validated version and grey ⚪ for older, archived versions. Once a version’s cover is switched to green, this file can no longer be modified.
What the team describes is a very systematic process to something that many of us do instinctively, but perhaps not rigorously enough. Of course we define user journeys and then design screens for them, but often we do so for just a few paths at a time — and that results in redundant flows to cover other paths.
In the case above, we organize all design work in nothing but flows. All component variations are designed on the level of the design system, and all screen variations are designed within user flows. An interesting approach to keep designs well-organized, while exploring both happy and unhappy paths — and keeping them where they belong.
Useful resources:
DoctoLib Design System Figma Organization, by Jérôme Benoit
https://lnkd.in/eK7bhQeS
Booking.com Figma Organization, by Nicole Saidy
https://lnkd.in/edueYQPG
How To Organize A Design System (Figma), by Saurav Rastogi
https://lnkd.in/eaxPexwf
Spotify Ways Of Working in Figma
https://lnkd.in/ek9ZzZQg
How We Organize Design Files in Figma (+ Figma kits)
https://lnkd.in/eSPuhDSK