Work with rich text fields in CMS

Who can use this feature

Available on all plans

Requires edit access to the site file

Rich text fields let you format content in a CMS—adding headings, paragraphs, lists, links, and images—so writers can naturally structure their writing.

Once you have content in a rich text field, you can connect it with a text layer on the canvas to create a rich text layer.

You apply styling to rich text layers using rich text styles in your file. Rich text styles work like regular text styles, controlling things like the font size or line height.

By separating formatting from styling, writers can focus on the semantic structure of their content, while designers can ensure consistent typography across pages. This separation allows updates to flow from content to design without manual reformatting.

How it works

• Format text and images in the rich text field
• Connect the rich text field to a text layer to create a rich text layer
• Style a rich text layer using rich text styles
• Edit the rich text layer like a regular layer

Apply formatting to a rich text field

First, access a rich text field in your collection:

1. Click CMS in the left navigation bar and select the relevant collection.
2. Select an item and click into a rich text field.

Use the rich text editor to write and format your content. Once you’re done, you can style the content’s fonts, sizes, and other typographic properties using rich text styles.

Use the toolbar in a rich text field to:

• Choose from six heading styles and one body style to define hierarchy
• Apply bold, italic, or underline formatting
• Add links
• Align text to the left, right, or center
• Create numbered or bulleted lists

You can also write using Markdown syntax or paste Markdown-formatted content into a rich text field. The following Markdown formatting is supported in rich text fields:

Action	Markdown formatting
Headings 1–6	# Heading 1 through ###### Heading 6
Bold	**bold**
Italic	*italic* or _italic_
Numbered list	1. First item
Bulleted list	- First item or * First item

Work with images

To insert an image into a rich text field, select Insert image in the toolbar. Then, adjust the layout of the image within the rich text field:

• Align: Align images to the left, right, or center. The image retains its original dimensions and fills the layer if it is larger than its container.
• Fill width: Scale the image so it always fills the width of the containing layer.

You can also add alt text to the image to provide context for users who rely on screen readers. Leave the alt text blank to have screen readers to skip the image.

Connect a rich text field to a text layer

Connect layers in the right sidebar

You can connect layers from the right sidebar while working on the webpage.

1. Select a text layer in the CMS list or CMS page. Make sure you select the actual text layer and not any parent layers, like a frame.
2. At the top of the right sidebar, click Apply variable or CMS field, then choose a rich text field.

Connect layers in connect view

Connect view helps you quickly wire up an existing layout or review what’s already connected. In this view, you choose a field in the CMS, then select the target layer on the canvas.

1. Click CMS in the left navigation bar.
2. Select the Connect tab.
3. Click a rich text field in the collection, then click a target text layer in the CMS page or list to connect it.

Create or edit rich text styles

A text style is a reusable set of typographic properties applied to text layers to ensure design consistency. In Figma Sites files, Figma automatically creates a set of Rich text styles when you connect a text layer to a rich text field. The rich text styles let you customize each of your headings, as well as the body text.

You can adjust these styles in the right sidebar, just like regular text styles.

Edit a rich text layer on the canvas

A rich text layer is a text layer connected to a rich text field in a collection. You can work with it just like a regular layer in Figma, with a few exceptions:

• The Scale tool doesn’t affect font size in rich text fields
• You can only edit the content of a rich text layer—or adjust the layout of its text and images—by editing the corresponding rich text field in the CMS
• It’s not currently possible to set a min or max width or height on rich text layers

Disconnect a rich text layer

To disconnect a rich text layer:

1. Select it in the CMS page or list on the canvas.
2. In the right sidebar, click Remove connection.

When you disconnect a rich text field, Figma converts the single rich text layer into individual layers for each heading, paragraph or image within the current item’s rich text field. All text elements will keep their current styling.