Figma Flow is a collaboration model for Figma, created by Flow Platform Team. Heavily inspired by BDD and state machines, well suited to collaboration and scaling the product development process. It takes best practices from software development to the designers and product management world.

Most of the projects are iterating fast, trying to apply all the findings and results of the experiments. That means you have to adapt your designs quickly. Sometimes developers are implementing the current version, but designers are working on the next one already. That means you have to keep many versions of the design.

Most of the graphic design tools are giving you a lot of flexibility regarding names and project structure. Therefore it is essential to agree across the whole team/company standards. Keeping standards in your projects will save a lot of time later.

Figma Flow is the way of working with your whole product team on your product designs. It is defining a process where you are solving a single problem (scenario) at a time. Using it, your whole team knows what to do when.

03. Basic concepts

Structure of a project At the beginning the project contains two files in it: File: UI Project Name

Page: WIP Project Name contexts Page: Version Number Project Name contexts Page: WIP Project Name components Page: Version Number Project Name components

File: Version Number Project Name Scenarios (ready to develop)

Page: Scenario Description Page: Scenario Description Page: Scenario Description

File: WIP Project Name Scenarios (as work in progress scenarios)

Page: Scenario Description Page: Scenario Description Page: Scenario Description

Example: View example UI file

Scenarios Scenarios describe interactions between user roles and the system. They are written in plain language with minimal technical details so that all stakeholders (customers, developers, testers, designers, marketing managers, etc) can have a common base for use in discussions, development and testing. Scenarios should be phrased declaratively. Don’t make references to UI elements, screens, etc. Try to make it meaningful. Point out the role of a user in a scenario. Key takeaways: you should start by defining the main scenarios of your app

the main scenarios are those, which are generating the biggest value for the end-user Example: For Todo type of app it will be something like: User adds Todo

User adds Todo User marks Todo as done

User marks Todo as done User deletes Todo View example 1.0.0 Scenarios file View example WIP Scenarios file Even simple app has a lot of scenarios. Just imagine how many paths users can take. Why consider only a single scenario at the time? Because it gives you a focus you need to design the best user experience. Remember - a user has only one mission at a time. The scenario is a sequence of contexts.

Contexts Contexts are environments where end-users are taking steps of their journey. The single context for a web app is a onefold situation, e.g. Login View. But when the user is receiving an e-mail, his context is mail client window. It is worth remembering that some parts of the user journey are taken outside the solution you are building.

Key facts: every context is a master component on the contexts Figma page

in scenarios, you should use only instances of context components

a sequence of contexts is representing a single customer journey - a happy (or unhappy) path Suggested context types: desktop

desktop mobile

mobile email For the desktop app, the single context will be for example [Login context] or [Dashboard]. The scenario is a sequence of contexts. The first design of the context can be just an empty frame (we suggest to add just a text label for convenience).

Naming convention Most of the contexts will have similar states, for example: loading - while the context is initiating, data indicator (like spinner)

loaded - when the context was fully loaded

action - when user is interacting with the context

waiting - when the data was submitted and the app is waiting for backend response

success - context with success message

error - context with a fail message As you can see, one context will be, in fact, multiple frames with different states.

To compose a context,you should use components from UI/version Components page. UI/version - Components page.

Components Components are design system elements that you are going to use in multiple contexts.