Design Dependencies & Reusable Flows in Figma

Modular flows that can be shared and reused across teams

A sketch demonstrating the concept of reusable flows where separate modules combine into a single flow — by Ed Orozco.

Most of the advancements in the modern design workflow come from design tools catching up to how developers have been working for a long time.

In software development, there’s the concept of dependencies:

Software dependencies are programs other programs rely on to run.

Design dependencies

Most of us are pretty familiar with shared libraries in Figma as they’re essential to our workflows. The components in these libraries, and the libraries themselves, are design dependencies.

I’ve come up with a working definition of design dependencies:

Design dependencies are styles, components, and libraries that specific flows depend on.

A broader definition of design libraries

Most design teams only share page-level components and organisms, but not entire groups of screens.

Just as we reuse buttons and navbars, some flows are core pieces of a product experience and should be kept consistent as well.

When you work in a large organization, you often have to use flows designed by other design teams. This usually means asking people for the correct file and copying and pasting the flow you need into your project.

Copying and pasting flows can affect consistency. If you’re working on a feature that depends on a work-in-progress file, and that file changes, your own work will be inconsistent with the rest of the product.

I probably don’t need to tell you that inconsistent flows are a massive waste of time and a headache for everybody involved, especially the customer.

Shared Figma flows as design dependencies

Reusable flows apply the same principles of shared libraries to entire flows, improving speed, consistency, and scalability.

Reusable flows allow designers to work with the source of truth of a flow.

If a design dependency gets updated, you can apply the changes to your work to keep it consistent.

A screenshot of Figma’s notification telling you that new component updates are available. — Screenshot by Ed Orozco
Figma’s way of reminding you to stay consistent


Some examples of reusable flows

Your mileage may vary depending on the product you’re working on, but some common examples of reusable flows are:

  • Log in
  • Sign up
  • Add or modify personal details
  • Checkouts
  • Uploading files

Creating reusable flows

1. Choose the screens

The way it works is straightforward: Simply select a group of screens from a flow and turn them into a component.

A sketch showing a cursor selecting multiple screens and turning them into a component — by Ed Orozco
Creating components out of multiple screens

2. Create the components: Workshop and Storefront

I typically create the flow components in separate pages I call workshops*. These will be my dependencies.

Then I place instances of those components in a presentation page of the file —or storefront— to share with clients and stakeholders and spare them the mess.

As we make changes to the master components of the design dependencies, the presentation version of the flow updates automatically.

Pro tip: If you group all the instances in the storefront page inside an auto-layout, the whole flow will remain aligned and evenly spaced even if the master dependencies change length or size.

Sharing it across the team

You can put the different reusable flows in a single Figma file and publish them as a shared library for others to use.

As a shared library, the flows will work as expected. Your colleagues can enable the library in their files and insert the flows as if they were regular components —because, well, they are.

This technique will save everyone a ton of time and make it easier to keep essential experiences consistent across the entire product.


Further reading

* The concept of Workshop and Storefront was first proposed by Brad Frost

  1. 📰 Workshop and Storefront — Brad Frost
  2. 📰 Grouping Components In Atomic Design Systems—Ed Orozco
  3. 📙 Atomic Design— Brad Frost

Subscribe to Ed Orozco

Don’t miss out on the latest issues. Sign up now to get access to the library of members-only issues.
jamie@example.com
Subscribe