Table of content
Why use formulas?
Here are some ready-to-use formulas to customize your design system documentation inside Notion, once synchronized with Specify.
You can find an example of this filter in our Notion template for Design System Documentation.
ℹ️ When tokens are collected from Figma, Specify follows the same hierarchy and naming you used when naming & organizing your tokens. To prevent overrides and duplicates, Specify add the path of your token to the token name, for example, a token name text-high-emphasis
inside the folder Text
, itself in the folder Light
will be named by Specify:
Light/Text/text-high-emphasis
Your developers can later on very easily transform this token name to your company standards with our parsers: change the case, remove slash, etc. The good news is, you can do the same inside Notion, thanks to Formulas! It is particularly useful to create new views and have a better read on your design tokens.
Remove all spaces
First, let’s create a property inside the Notion Database you want to customize, Colors in our example and we will call it
Name (Cleaned)
.Change the property type to Formula
Paste the code below and voilà!
replaceAll(prop("Name"), " ", "")
☝️We use the property used by Specify here:
Name
, which should not be renamed or deleted in order to let Specify do its magic.
Keep only the first string
You might want to keep the first part of the name, to either:
Filter by Theme:
Light/Text/text-high-emphasis
and keep only theLight
part.
Filter by Token Type if you have a 2-level hierarchy:
Text/text-high-emphasis
and keep only theText
part of this name.
First, let’s create a property inside the Notion Database you want to customize, Colors in our example and we will call it
Group
.Change the property type to Formula
Paste the code below and voilà!
replaceAll(prop("Name"), "[/].+", "")
👉 You can now group by this new property to display only Light
colors.
Remove only the first string
If you want to remove the first part to keep a cleaner name without it
First, let’s create a property inside the Notion Database you want to customize, Colors in our example and we will call it
Name (Cleaned)
.Change the property type to Formula
Paste the code below and voilà!
replaceAll(prop("Name"), "^.*?(?=/)(/)", "")
Keep only the last string
Let’s bring back our example with the Light/Text/text-high-emphasis
token. Here we would like to only get the text-high-emphasis
part of this name.
First, let’s create a property inside the Notion Database you want to customize, Colors in our example and we will call it
Token Type
.Change the property type to Formula
Paste the code below and voilà!
replaceAll(prop("Name"), "([^//]+)(/)", "")