Once your design system is in production or used by a larger team, new items will need to be added. Components and elements will get created, and we need a strategy to promotes those assets to the core system or one of the sub UI kit files.
We will go through the step-by-step process we like to use at Headway to keep our design systems up to date.
For this example, we'll assume we're using a federated team model where there isn't a single owner, but the team owns it.
I also did a presentation on our design system management process that covers everything in this article. You can watch the video below.
Before your system goes live, it's good to create your design system project board. This can be set up using a kanban board with Trello, Asana, or even Notion. We need a board set up that will allow the team to catalog new components that they would like to nominate for promoting up or depreciating.
On this board, we set up our columns in a similar fashion to the build process but add a few more columns.
You don't have to follow this board setup but it's generally what works the best for the product teams at Headway.
The to-do list might be a carryover from when your project was first started. This might be what's left from your design system checklist and can house components that are still outstanding, and the team would like to get in the system.
When a designer is working on a project and creates something they need/want to componentize, they can add a card with a link to the Figma frame and where they think it should go. Then the team can discuss in the standup if they believe it should go in or not.
Depending on your structure or permissions, this might be a column to tell the team what is being added. And then the discussion isn't needed.
This column is for components that are set up and completed. Once the team agrees on what should get the go-ahead from the design column or to-do columns and the works is complete they would get moved here.
Once this checklist is done, make sure the component is linked to or has written documentation.
There are components or styles that the design team is ready to remove from the system. Once an item is identified here, a member from the design team should append a ⚰️ to the name, so the team knows it will be removed.
This is the time to discuss if there will be a replacement component or not. Once an item is marked for depreciating, it is best to give it until the next design system stand up before it's been entirely removed.
Items that have been entirely removed out of the system go here before they are dragged into complete. This is just a spot to let the team know that it's gone, and they will not find it in the system anymore.
All tasks, when completed and reviewed as a team, will end up here.
Once your system goes live, it's good to establish a recurring design system standup meeting. This can be either once or twice per week.
The standup meeting allows the design team to share new components being creating and discuss items they'd like to nominate to be added to the system. They can also suggest changes they'd like to see to the current system.
When working in the federated team model, it's ideal to have the entire team discuss what's being added and removed. Using the board set up above to facilitate the conversation will help keep the design team updated with the latest design system changes.
This is a great time to connect with the development team to see where the live design system might be. Your board might get a bit more complicated when working with the development team, so you might want to think about adding a few new columns. Some of the ones we suggest are in development and design QA.
This column is here to communicate to the development team that this component is ready to be developed in the live system. Once complete, the developer and the designer should re-connect on the documentation side of things.
Once a component is in the live system, it's always good to have the design team do a final QA pass on the component before moving it to complete.
Create a central hub for designers, engineers, product and marketing teams. Connect everyone working with your design system.
A design system manager plugin for Figma. Define or update design tokens in one single panel, right from Figma and immediately see the changes cascading through your Figma design.
Set up a design system channel on your team's slack for asynchronous communication, short discussions, and quick feedback.
Notion is an excellent place for documentation and creating a design system project board to manage updates.
Learn how we manage component status and other assets within our Figma design systems to create clear communication across our design teams.
During a product life cycle, teams eventually create smaller or adjacent products to the core product being designed. Those situations are the perfect time to expand out a design system and UI kit.
Learn how to set up your Figma file and some tools that can help facilitate the tokenization of your design system in Figma.
An introduction to creating design systems, including some of the tools and best practices we've picked up along the way for successful design system planning.
Discover our favorite Figma plugins we use in 2021 to help us improve our app design workflows, communication, and build better products.
See all the ways we can help you grow through design, development, marketing, and more.
A podcast about building successful software. We provide actionable advice around product validation, execution, and promotion.
A show where we go behind the scenes on what it really takes to bring a new product to market.
Receive the latest articles, resources, events, and more!