Spotify Design not too long ago migrated to Figma. We’re excited to open up the music field and describe how we have formed the instrument to swimsuit our wants and tradition at Spotify. But on this article, we’re not discussing why or how we moved. Instead, that is the place we’ll geek out over file buildings.
Check out our Figma Ways of Working above, and have a learn of this text to know among the rationale behind it. We hope this info shall be helpful for different design groups in search of extra organisation for his or her work in Figma.
Defining our aim
At Spotify Design, we actively encourage everybody to discover issues collectively, get impressed by each other and discover concord throughout design options. So as we had been planning the migration, we set a aim to spice up this effort and information us by the entire course of: organise our work in ways in which enhance collaboration between designers. New instruments similar to Abstract and Figma supply the flexibility to work collectively like by no means earlier than, however permitting a number of folks into the identical file doesn’t routinely result in higher collaboration. Our recordsdata would should be organised in a means that’s seen and discoverable by everybody. After all, you possibly can’t collaborate on work you could’t discover.
This is very true in organisations like Spotify. Our squad mannequin is optimised for autonomy, which is useful for a lot of causes however can lead to designers working in isolation. Not solely are we unfold out amongst cross-functional squads, however we’re additionally unfold throughout a number of product areas—which we name “business units”—and quite a few workplaces all over the world.
New course of, new challenges
In our pursuit of higher visibility of labor, we would have liked to be aware of how we impacted velocity and energy—two necessary components in a designer’s workflow. Increasing visibility might be detrimental because it introduces extra folks, extra construction, extra guidelines, and extra pondering to easy duties. Our selections may simply improve the hassle required to maintain work organised or make it slower to navigate to recordsdata, doubtlessly leading to fewer sketches, prototypes, and iterations. The problem was to stability our want for each visibility and velocity.
Previous makes an attempt at storing our design recordsdata helped us perceive how the migration would possibly play out if we weren’t considerate sufficient. Some of the issues we anticipated when designing the Figma workflow had been:
People naturally optimise for velocity, creating private workflows and carving out personal areas for themselves or their squad. While requirements can enhance velocity in the long term, particular person workflows appear extra instantly useful.
People interpret construction in their very own means utilizing varied psychological fashions—groups, merchandise, initiatives, folks—and requirements not often develop organically. Guidelines need to be clear and intuitive to interrupt by particular person instincts.
While some folks iterate on options and doc specs throughout the identical file, others separate them into completely different paperwork. Seemingly small selections circulate into processes with engineers and PMs and outline their understanding of the best way to discover work.
We needed to take each element of those behaviours into consideration earlier than transferring ahead.
Ways of working
So we had a aim, and we knew the challenges that lay forward, however how did we deal with the issue? Design Ops used our trusted working group (WG) mannequin and pulled collectively a crew of designers from throughout Spotify that had been capable of signify the design groups of their enterprise items.
To begin, the group outlined a set of ideas that mirrored our aims and would information our concepts:
Unifying: People must be organically uncovered to different related work, no matter the place they sit within the org.
Discoverable: Work ought to have a transparent dwelling. There must be no lingo, no looking for recordsdata, and no getting misplaced.
Manageable: Spaces shouldn’t turn out to be so busy that recordsdata aren’t simple to organise and entry.
Sustainable: The variety of groups and initiatives shouldn’t develop to an untenable measurement, turn out to be irrelevant, or should be often modified.
Autonomous: Each workforce must be empowered to diverge from our suggestions, acknowledging that one resolution could not work for everybody.
From there, we explored a spectrum of choices that aimed to stability visibility and velocity. Some elevated the dimensions of areas the place extra folks would work alongside one another, whereas others narrowed them right down to smaller definitions with simply a few designers working side-by-side. With a set of choices, a stack of printouts, and even Figma prototypes, we performed rounds of analysis with designers in our enterprise items. Yes, we acquired that nerdy. We had file construction design workshops!
Here’s an instance of among the workshop materials:
The workshops allowed us to determine the most typical psychological fashions, check the intuitiveness of our concepts and provides everybody a voice. Perhaps most significantly, it gave the design workforce some empathy for the issue we had been attempting to unravel. We might be obsessed with our private workflows (we use them day-after-day!) so sharing the issue with the workforce helped them recognise how in a different way everybody can take into consideration these items.
The end result
This course of led us to the next three key selections:
Teams shall be organised by the merchandise we construct.
Projects shall be organised by a product’s options or characteristic units.
Specs shall be centralised inside a single mission in every workforce.
Organising Teams on this means communicates our expansive product suite at Spotify similar to our cell app, Spotify Kids, Ad Studio, Spotify for Artists, Anchor, and lots of different exterior and inner merchandise. From our org overview you possibly can instantly inform that design work from the entire firm is correct at your fingertips. The construction guides designers from completely different enterprise items and squads to work collectively in the identical house when designing for a similar product, and it allows us to cleanly map our Encore (design system) libraries to every workforce.
These identical attributes are mirrored within the Team construction the place a product’s set of options are communicated by Projects. Emojis assist us distinguish between specs, characteristic explorations, new initiatives, and a playground for fast concepts, and every Project is normally stuffed with work from solely three or 4 designers so folks nonetheless have a way of their very own, private house.
Lastly, we took the chance to rethink how and the place we doc our specs—the screens, states, and flows that signify our supply of reality. Our resolution didn’t instantly really feel intuitive to the design workforce, however we held a robust conviction that its worth would quickly turn out to be obvious.
“Where’s the latest design?” is a message we ship and obtain far too typically. Similar to how we’re bringing visibility to exploration work by our new Team and Project buildings, we additionally wished to tug specs out from particular person recordsdata and into the open. Each Team (i.e. product) now has a single spec file, and inside these recordsdata are pages that signify every of our options. As a designer hones in on an answer, they transfer their work into these centralised specs to doc their selections.
Like the software program we ship, these specs always evolve as outdated screens substitute new ones, and elements replace to tackle new kinds and performance. It’s a illustration that we’re all working collectively in direction of a unified product, sharing patterns and options with one another. And there is no such thing as a “wanting on the flawed factor,” as a result of there is just one place to look.
Where all of it comes collectively
Finally, the WG developed a playbook and included this into the coaching we hosted after we onboarded designers onto Figma. The WG wanted to do some well mannered policing, usually checking the instrument to do some mild housekeeping—checking on rogue groups (typically with random squad names), pinging folks on Slack after we noticed diversions to the conventions, and internet hosting demos to indicate folks the best way to arrange issues accurately. We created a #figma channel for designers to ask us questions and even added some exterior people from the Figma product workforce.
We have now been utilizing the brand new construction for 3 months and up to now, so good. For essentially the most half, designers have adhered to the system, and now we have seen situations of groups throughout the organisation collaborating on merchandise, quite than hiding their work inside their orgs. We consider this can have the influence we got down to obtain, and we’ll proceed to iterate as we obtain suggestions and spot rising traits.
If you are going by the method of making your personal organisation system, bear in mind to make use of your design workforce’s superpowers to assist information your construction—analysis how your personal workforce works, check concepts with designers, and prototype options earlier than agreeing on a construction that works on your workforce tradition.
—
Shoutout to our Figma WG members: Achal Varma, Alex Cameron, Daniel Elg, David Owen Morgan, Ed Samour, Felipe Fiuza, Hanna Brazier, Ian VanNest, Jacqueline Sibert, Juli Sombat, Kamdyn Moore, Mattias Johansson, Michael Brand, Mikael Sundström, Nicholas Atkins, Patrik Nyblad and Shamik Ray!
Credits