All Collections
Legacy Repositories
Distribute design tokens
Notion
How to filter your design tokens by name in Notion databases?
How to filter your design tokens by name in Notion databases?

You might find it useful to filter your design tokens by names and create different views to consult your design data.

Updated over a week ago

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

  1. 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).

  2. Change the property type to Formula

  3. 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 the Light part.

  • Filter by Token Type if you have a 2-level hierarchy: Text/text-high-emphasis and keep only the Text part of this name.

  1. First, let’s create a property inside the Notion Database you want to customize, Colors in our example and we will call it Group.

  2. Change the property type to Formula

  3. 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

  1. 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).

  2. Change the property type to Formula

  3. 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.

  1. 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.

  2. Change the property type to Formula

  3. Paste the code below and voilà!

    replaceAll(prop("Name"), "([^//]+)(/)", "")
Did this answer your question?