3 Notion templates to better manage your design system
Notion: not the best for hosting your design system documentation, excellent to run the business
Because Notion is a note-taking app, you might think it would be an excellent tool for documenting your design system. It’s possible, and if it works for your company, by any means please go ahead (there’s not a unique solution for anything related to design systems, after all).
But that’s not what I want to talk about, and in my opinion, I won’t choose it for that use case for a couple of reasons:
- It’s not meant for documentation: Notion is fantastic, but that doesn’t mean that it’s great for everything, like searching for content that you never consulted before.
- You can’t use your own components or design language with it, which is a missed opportunity to differentiate your brand and showcase what your design system can do.
- It will be hard to distinguish your design system content from the rest of your company’s, especially if you want to publish it on a public-facing website, although I never looked into Notion’s API. It might be possible, but why not use a headless CMS instead?
Ok, so what is it good for? Running the business!
Especially being able to document how the sausage is made, track projects, create templates, and, most of all, be the glue between your different organization tools and the one-stop shop for your team.
Another way to look at it is in terms of audience: the content you’re going to put there might not be suitable for the system’s consumers or contributors but very valuable for the maintainers, the permanent team, or your stakeholders.
And that’s made possible by those main features, in my opinion:
- It’s accessible to everybody in your organization, and might be more integrated in its culture — and diplomatically more neutral — than a design tool like, let’s say… Figma. You can even share pages outside of your organization if you’d like. (A good use case would be with an external agency.)
- It supports links to other tools like Jira, GitHub, Figma, and more!
- But I think I fell in love with it because Notion democratizes creating simple databases and establishing relations between them.
Let me explain through 3 use cases in the next section.
3 real-life examples of design system management
Use case #1: Elements tracker
This use case is trying to come up with a solution to a straightforward and expected question I repeatedly hear from system users: “Can I use this*?”
* Replace this here with any element of your component library.
This simple question calls for a terrible answer: “Well, it depends.”
Indeed, your design system might support multiple platforms: Web, iOS, and Android (to name a few), and you can’t always know in which context your user is talking. Furthermore, do they need to know if it’s available in their favorite design tool? Is it documented? Tested?
So if you want to give your users a tool where they don’t need someone from the system team to investigate and answer that question directly, you need some tracker tool that can display the status of each platform, à la Can I use…?
In Notion, you can create a database to track all your elements and add attributes to them like:
- Coverage per platform
- Current status
- History
- Comments
- Owner
- etc.
And on top of that:
- You can create different views of the same database to show only mobile elements, for example.
- You can decide which properties you want to show in the table vs. in a detailed view.
- You can add a default template to easily add any new element to the list.
- You can also quickly get and communicate your percentage of coverage by platform.
- You can decide who in your organization can view or edit the info.
- Bonus point: if you choose to import data from Jira (see our use case #3 later), you can add related Jira tickets per component for extra transparency on the component status.
Side note: I didn’t have time to look into it, but I’m assuming you could use Notion API to surface that content elsewhere too, like in your documentation portal.
Use case #2: a simple CRM (Customer Relationship Management)
You frequently hear that “a design system is a product” or “a startup within a startup”. If you — like me! — believe that, you understand the need for some simple CRM to keep track of your relationships with potentially many stakeholders.
And suppose you have several people on the system team owning stakeholder relationships. In that case, it can start to be very complex and time-consuming to keep track of everything and ensure that the entire group follows some guidelines around your brand or tone and voice (remember, your design system is a product/startup!).
This is another fantastic use case for Notion because:
- You can create a database with entries around each communication (past, present, and future!).
- You can create different views around someone, a theme, an audience, a period, or a combination of all.
- You can create a default template to guide your teammates to communicate effectively, even if that’s not their strongest suit.
Use case #3: OKRs & Sprint planning
This one is a bit more advanced but can be very powerful.
Let’s say your organization has implemented some OKR or goal methodology that you must follow. And at your team level, you’re using some version of an Agile process with Sprints and your engineers — even designers, if you’re lucky! — track their work in Jira with tickets or some similar application.
How do you tie everything up so you can clearly communicate progress on OKRs? How do you reveal relationships between Objectives, Key results, Sprints, Epics, and Tickets?
To solve for this in Notion, we’ll need 3 steps:
- Import your data from Jira
- Create another database for your OKRs
- Establish relationships between the two.
1 Import data from Jira
Notion created the concept of connections to build bridges with other applications. They’re already natively supporting a bunch (see the complete list here), but I’m going to only name a few that might interest you: Jira, Slack, Figma, and Google Drive. And other companies provide solutions for other tools’ integration too. Does that sound promising to you?
Creating a connection with Jira is pretty straightforward, in my opinion: it sets a Database in Notion and imports the data reasonably regularly.
I did notice though some glitches. It sometimes takes a while to get the update (you can manually trigger an import), or some tickets don’t get imported now and then for nebulous reasons.
Already having this data in Notion makes it way more accessible to people in your organization who don’t have access to Jira or typically don’t use it. For example, you can display your current Sprint to your stakeholders by filtering the tickets from that Sprint and the properties you want to show to simplify the experience.
2 Create an OKR/Initiative database
The first part should sound pretty familiar by now. We’ll need to create a new Database with the appropriate properties:
- Objective
- Key result
- Task or Initiative
- Period (think Quarter, for example)
- Owner or DRI (Directly Responsible Individual)
- Status
- Contributors
- And so on…
Once again, remember that you can decide which properties you want to show for each view and leave some for the detailed one.
3 Create relations between the OKRs and Jira — and potentially more!
This is possible because Notion implemented Relations and Rollups.
To create a relation between our 2 databases (Jira and Initiatives):
- We will add a column/property to our OKR database. This new property needs to be a Relation from the Type menu.
- You’ll be asked to find the database you want to create the relation with. You can use the input at the top to search for your Jira database.
- Click the blue Add relation button to finalize the creation of the new relation property.
Now, what should be the bridge between the 2 worlds? What makes the most sense to me is creating a 1–1 relationship between Initiatives in the OKR world and Epics in Jira. It can even be a 2-way relationship so you can see in your Jira Database how tickets relate to your OKRs.
The benefit of this is that now you can communicate with your stakeholders and team a clear view of:
- what is your team currently working on with a Sprint view
- and how it relates back to your roadmap and OKRs
You can even slice and dice the data in every possible way, so, for example, you can display a view to filter out only the tickets of a teammate for the current Sprint.
Bonus point: you can even get fancy and create a separate database for the Objectives and Key Results and then set a relationship between this one and the Initiatives one.
The Initiative database now has a relationship with Jira tickets AND your OKRs.
Did you enjoy this article?
Good news! You can speed up your process by downloading the Notion templates at the DSSC store. Don’t miss out on the special bundle!
You can hire me
Contact me if you want me to help you with your design system or product organization.
Find me for more content around design systems, design, or front-end development:
- Medium publication
- I’m also the host of the Design System Social Club and couldn’t recommend it enough for excellent design system content with first-class guests.
