< Back

Content Management System (CMS)

Manage your design in Figma and your content in Notion.

figma.to.website can connect to your Notion databases to serve as a CMS.
You can create list of items or blog posts to add to your website automatically.

The syntax used by figma.to.website to template the pages is Twig by Symphony.
Learn more about Twig’s capabilities in Twig’s guide for Designers.

figma.to.website will connect to other CMS in the future, let us know your priority.

Create a Notion database

If you don’t have an existing Notion database, start by creating a new page in the appropriate Notion space.

Add a table.

Select “New empty database”

Give it a distinctive name because we will need to find it by name later.

Create your first page and open the page editor.

From here, you can add properties to your blog page and start writing content.

figma.to.website will let you access each property individually and also use the content of the page in your designs.

Example of a Notion database with properties

Connect figma.to.website to Notion

Launch the figma.to.website plugin and select the “CMS” tab.

Start by clicking the [Connect to Notion] button and follow the guide.

If everything goes smoothly, you should see your first collection in the “CMS” tab.

Collections: List of your loaded collections.
Collection content: The first 10 items inside this collection.
On the right: The data content of the selected item in “Collection content”

This view let you explore your content and the structure of your properties.

How to use this data inside your website

There are 2 main use cases to use data from Notion:

How to create new webpages for each page in a Notion database (commonly used for blog posts or product pages)

How to repeat layers for each item in a Notion database (for a list of the latest blog posts or the list of products)

1 - How to create new webpages for each page in a Notion database

This is commonly used for blog posts and product pages.

In this scenario, you want all the pages to have the same design but the content should change for each page.

To tell figma.to.website to create a new page for each item in a collection, add the name of the collection in squared brackets right after the page name.

By calling the section `/blog/[posts]`, we are telling figma.to.website to create a new page for each item in the collection called “posts”.

figma.to.website will use the following URL for each page:

/blog/title-of-post-1
/blog/title-of-post-2
/blog/title-of-post-3
...

The end of the URL is defined by the “slug” property in your Notion page.
If the “slug” property is not available then the URL path is automatically generated based on the title of the page in Notion.

It’s recommended to have a “slug” property on each page of your Notion database. This way, you control the URL generated. It will allow you to rename the “Title” of your page without changing the URL of your page. This is important if you rely on SEO.

If you don’t like the “slug” property and want to use another property name, you can define this in the section name. Use “/blog/[posts:url_path]” section name to use property “url_path” instead of the default “slug” property.

You can now template your design with properties and content coming your collection items.

In the following example, text nodes are templated with:

Where “property_name” is the property found in the collection.

The template engine used here is Twig. You can learn more about all the possibilities of the syntax in Twig’s guide for Designers.

You can also use the template in the layer name, such as for images in the following example:

For images to work, the layer needs to be a Frame or Rectangle and have an image fill. figma.to.website will replace this image fill with the image from the corresponding property.

2 - How to repeat layers for each item in a Notion database

figma.to.website can release elements in the page base on the content of the Notion database.

Here is a design of a blog list with a single card for a single blog.

We can repeat this card by adding some code to the parent layer:

The code {% for post in posts %} tells figma.to.website to repeat the first child layer (here, component "Blog-Card") for each item in the collection called "posts" and create a variable call "post" for each repeat. We can also sort the result based on a property with the built-in function "sort_by" like:

{% for post in posts|sort_by('published_data') %}

Replace “published_date” with any property in the “posts” collection.

sort_by('property_name') will sort descending by default.

sort_by('property_name', 'asc') will sort ascending.

You can then template the child layers:

For images to work, the layer needs to be a Frame or Rectangle and have an image fill. figma.to.website will replace this image fill with the image from the corresponding property.

You can check the result in [Preview] before publishing: