Map Figma properties to Contentful field types

Bindings connect Contentful fields to Figma component properties. The table below lists what you can map on each side.

You configure bindings in the plugin panel Binding editor. When you attach an entry and apply, the Contentful for Figma widget fills in the component for you.

Where things are saved

• Binding mappings are stored as variables in the file's Contentful variable collection. See Binding library for variables, sharing across files, and backup to Contentful assets.

• Which entry is on an instance is remembered per instance when you attach.

• Curious what's stored? Tools → Storage (bindings as Variables on the Component tab, entry links on the Instance tab).

Limits

• Some list-of-object field types are not supported yet

• Linked entries need the gear icon setup before they work

• Instance swap and variant values must match options defined in Figma

• Template strings cannot pull from rich text or linked asset fields yet

Combine fixed words with placeholders for entry fields in a single text property. In the Binding editor, choose Hardcoded value as the source, write your template, and the widget fills in placeholders when you apply an entry.

Examples

Limits

• Placeholders must be fields on the same content type as the binding.

• Linked entries and assets cannot be dropped into a template string today (use a normal field bind or the gear icon instead).

• Missing fields show up as blank.

Figma does not expose background image fill or background color fill as native component properties. The Contentful for Figma widget lets you bind them anyway by renaming layers inside your component with a special pattern.

Layer naming

Rename the target layer inside your component:

• [layer_name]::background-image

  for images

• [layer_name]::background-color

  for colors

Example: hero-photo::background-image or card-bg::background-color.

After renaming in Figma, refresh the component definition. The property appears in the Binding editor.

You can also use Configuration → toolbox → Tools → Add image or color property for a quick reference on these patterns.

Binding images

Map the layer to a Contentful asset field. When you apply an entry, the image from Contentful appears in the layer.

To use an image on a linked entry, bind the layer to the entry, then open the gear icon and choose an asset field inside that related content type.

Binding background colors

Map the layer to a field that supplies a color value. Hex strings (for example, #ff0000) are most common. Short text, JSON object, and linked entry sources are also supported at bind time. When you apply, the color is written to the layer fill.

You can bind rich text from Contentful to a text layer in Figma and keep formatting when you apply an entry.

The widget uses a formatter: a small reference component you place beside your text layer and rename to {layerName}::formatting (for example, body::formatting beside a layer named body). The formatter tells the widget how headings, paragraphs, bold, links, and other marks should look when content is applied.

You can create one quickly from the plugin panel: open Configuration → toolbox → Rich text → Create formatter. That adds a ready-made RichText::formatting component to your file. Style the sample rows, drop an instance next to the text field you bound, rename it to match that layer, and you are attached. Use Inspect formatters to confirm before you apply.

For a lighter path, map the rich text field in the Binding editor with formatted selected and skip the formatter. Basic marks (bold, italic, headings, lists, links) still carry over with sensible defaults.

Basic formatted rich text

In the Binding editor, map your Contentful rich text field to the Figma text property and keep formatted selected (not plain text).

When you apply an entry, the widget carries over common marks from Contentful: bold, italic, headings, lists, and links. No formatter is required for this path. Heading and paragraph styling uses sensible defaults from Figma unless you add a formatter below.

Custom typography with a formatter

When default styling is not enough, the formatter is how you match your design system. It is a RichText::formatting reference component with sample rows for each tag (h1 through h6, p, strong, em, and so on). You style those rows in Figma. At apply time, the widget reads them and paints the bound text layer to match.

Quick setup:

1. Configuration → toolbox → Rich text → Create formatter (adds the component to your file).

2. Edit the styles on the sample rows inside that component.

3. Place an instance beside the text layer you bound in the Binding editor.

4. Rename the instance to {YourTextLayerName}::formatting so it matches the text layer exactly.

5. Inspect formatters on the focused instance to confirm attachment and tag rows.

6. Apply an entry.

Formatter styles live on the canvas in Figma, not in Contentful.

Plain text only

If you only need the words and not the formatting, switch to plain text in the Binding editor. The widget applies a flattened string with no headings, bold, or other marks.

Troubleshooting

Formatter not attached: the formatter instance must sit beside the target TEXT layer (same parent). Rename it exactly {textLayerName}::formatting to match the text layer name.

No tag rows in Inspect formatters: layers inside the formatter must use recognized names: h1 through h6, p, li, a, strong, em, u, blockquote, code, pre.

Wrong styles on apply: confirm only one formatter is paired with the text layer you bound, bindings are saved, and you applied after setup.

The Repeater tool duplicates a focused component instance once per Contentful entry you select, with each clone already linked to its entry. Use it to build lists, grids, or carousels and stress-test how your component behaves with varied real content.

Repeater creates instances and attaches entries. Apply pushes bound field values into each clone on the canvas. See the Usage section for the overall workflow.

Before you start

1. Attach the widget to a frame and select an instance on the binding map.

2. Bindings must exist for that component. If the Repeater modal opens with no bindings, click Open Bindings to create them first.

How to run it

1. Focus an instance on the binding map.

2. Open Configuration → toolbox → Tools → Repeater.

3. Pick entries: search and select one row per clone you want (up to 50). The picker works like Entry search.

4. Click Create. Progress shows clone, attach, and refresh steps while the widget works.

5. When complete, click Apply to open the Apply modal with the new clones pre-selected. Apply transformed properties to fill content on the canvas.

You can close the modal after Create without applying, then apply later from the instance workflow.

What Repeater does vs Apply

Bindings are shared across every clone because they come from the same component definition. Each clone can show a different entry.

Tips

• Pick entries whose content type matches the bindings on the focused instance.

• To swap which entry is on a clone, use Apply or attach a different entry from the instance panel.

• If you add or move instances on the frame, refresh or re-attach the widget so the binding map stays accurate.

When you save bindings in the Contentful for Figma widget, they are stored as Figma Variables in a variable collection named Contentful. That collection works like any other variables in your file: you can browse it in Figma's Variables panel, and it travels with the file the same way color or spacing variables do.

What lives in the collection

Each binding you save for a component is written into the Contentful collection for your linked space and environment. The widget keeps metadata and binding data in variables scoped to that Contentful connection, so bindings stay aligned with the content types you are mapping.

When you open the Binding editor and save, you are updating variables in this collection, not loose plugin data on the canvas.

Inspect bindings as variables

Tools → Storage → Component tab shows the Contentful variables for the active binding library. Use the library dropdown there (or in the panel footer) to see which suite of bindings you are viewing.

On the instance shell, the panel footer includes a Library row where you can switch between available binding libraries for the focused instance.

Share bindings across files

Because bindings live in a normal Figma variable collection, you can publish the Contentful collection as part of a Figma library, the same way you publish color or typography variables.

1. Build and save bindings in a source file (local Contentful collection).

2. Publish that file's variables as a team library in Figma.

3. Enable the library in other design files.

Other files can use those bindings as a read-only library. The widget lists imported libraries in the footer Library dropdown alongside Local. Pick the library that matches the bindings you want to apply.

To change bindings, work in Local on the file where you author mappings, then publish an updated library for consumers.

Local vs imported library

When you open a file that uses an imported binding library, the widget can refresh local copies from the library when needed so you stay on the latest published bindings.

Backup to Contentful assets

Bindings in variables and entry links on instances are both part of your file's Contentful setup. You can snapshot that setup and store it in Contentful assets so you can rebuild later.

Open Configuration → Backup.

Create a backup

Create backup collects:

• Local bindings variables from your file's Contentful collection for the linked space and environment

• Entry attachments and other widget-owned data on eligible nodes in the file.

The snapshot uploads as an unpublished asset in your linked Contentful space. It stays private unless someone publishes the asset later. Keep backups unpublished if they include sensitive entry data.

Install a backup

Pick a backup from the list and choose Install backup. The widget restores plugin data and local bindings variables from that snapshot into the current file, then refreshes the panel and binding map.

Use this when you need to recover after accidental changes, rebuild bindings and entry links in a fresh file, or roll back to an earlier known-good state. Install replaces widget-owned data for that scope with what is in the backup, so save a new backup first if you might need today's work.

You can also Open in Contentful to view the asset in the Contentful web app, or Delete backups you no longer need.

How library, variables, and backup fit together

NOTE: Publishing bindings as a Figma library is great for day-to-day design files. Backup is the safety net in Contentful when you want a dated snapshot you can restore wholesale.