Contentful for Figma

The Contentful for Figma widget connects Contentful content to Figma design files so teams can bind entries to component instances and preview real content on the canvas.

To use the widget, you need a Contentful account, and access to a space and environment.

NOTE: We recommend creating a dedicated alias for design work so you can change the underlying environment without breaking your workflow. Like a website, a Figma file is connected to a single Contentful space and environment, so it's important to choose a stable configuration before creating bindings.

Once Contentful is set up, add the widget to your Figma file and connect it to the right space and environment.

• A Contentful account with access to a space and environment

• A Figma account

Step 1: Prepare Contentful

The widget reads and writes content through the Contentful APIs. You need to set up your space before you install anything in Figma.

Account and access

You need a Contentful account with permission to read (and usually edit) the space you plan to use.

NOTE: If you're joining an existing team, ask an admin for access to the right space and environment.

Space and environment

Create or choose the space and environment that should back your design file, for example a staging or preview environment that mirrors how you treat production on a website.

Each Figma file stores linkage to exactly one space and one environment. Bindings, entry search, and preview all use that connection. Changing it later can leave existing bindings out of sync, so pick something you expect to keep for the life of the file.

Design alias (recommended)

Create a dedicated environment alias for design work (for example design), similar to how you might use a stable alias on a website while swapping the target environment underneath.

An alias lets you repoint design work to a new environment without reconfiguring every Figma file, as long as content structure stays compatible. Treat this the same way you would a production alias: deliberate changes, not ad hoc swaps mid-project.

Step 2: Authorize and connect

Add the Contentful for Figma widget to your Figma canvas, sign in with Contentful, and save which space and environment this file uses. Attaching the widget to a frame and creating bindings come later in the Usage section.

Add the widget to the canvas

1. Open the Design file you want to connect. The widget stores linkage information in that Figma file so save the file to your team or personal workspace.

2. Open the Contentful for Figma widget from the Figma Community (or your organization's published widget).

3. Drop the widget onto the canvas.

You can move the widget anywhere in the file. It remains associated with the file, not a single page.

Authorize Contentful

1. On the widget, click the gear icon to open configuration.

2. Choose Sign in with Contentful. Your browser opens for Contentful login.

3. When Contentful confirms you are signed in, click Copy to clipboard on the session transfer code.

4. Return to the Figma panel, paste the code into Session transfer code, and click Enable session.

The transfer code is single-use. Do not share it. Sign-in uses Contentful OAuth within your Contentful permissions.

Select space and environment

After you're signed in:

1. Open Contentful configuration from the gear icon.

2. Select the organization, space, and environment for your Figma file.

3. Save the linkage.

The choice is stored per Figma file and shared across everyone working in that file. All bindings and entry operations use this connection.

Once saved, the widget header shows the connected space and environment names.

Step 3: Verify your setup

You can be sure your setup is correct if:

• The configuration opens without errors.

• The space and environment in the header match what you intended.

• You can open the plugin panel from the widget.

Once Contentful is linked and the widget is displayed on your canvas in Figma, you can use the widget and plugin panel together to bind component instances to Contentful and preview real entries on the design.

1. Create a frame and attach the widget

1. Build a frame that contains the component instances you want to connect to Contentful. For example, a card, hero, or profile block built from your design system components.

2. Place the Contentful for Figma widget on the canvas near that frame, then attach the widget to the frame. The widget scans instances inside the frame and builds a binding map: a list of bindable instances it can connect to Contentful.
   

NOTE: You can attach only one widget to a frame at a time. The map reflects what is on that frame at attach time. If you add or rearrange instances later, refresh or re-attach as needed so the map stays accurate.

2. Select an instance in the binding map

Once the widget is attached to a frame, the binding map opens in the widget. It is a clickable map made up of sections, each one laid out to match a bindable instance on the attached frame.

To select an instance in the binding map:

1. Click the section on the map for the instance you want to work on. This focuses that instance in the design and opens the plugin panel for it.
   

   NOTE: Bindings, apply, and entry attach actions are applied to the focused instance (and its corresponding component) until you pick a different section on the map. Each instance can have its own display entry and edit its component’s binding.

2. Finish one, then click the next section.
   

3. Create bindings for the Figma component

To create bindings for the Figma component:

1. With an instance selected, open the Binding editor in the plugin panel.

2. Map Contentful fields (from the entry’s content type) to Figma component properties: text layers, component properties, images, and variants as your component supports.

3. Define transforms where needed (dates, rich text, literals, and so on) so content shape matches what the Figma component expects. See Map Figma properties to Contentful field types for which Figma properties map to which Contentful field types.
   

4. Save bindings for the component. They stay with your Figma file. Each time you attach an entry and apply, the widget pushes Contentful values through those mappings into the instance. See Concepts for terminology.

4. Attach and apply a Contentful entry

To attach and apply a Contentful entry:

1. Search for or browse Contentful entries in the panel (Entry search or instance workspace, depending on your flow).

2. Pick an entry whose content type matches the bindings you defined.

3. Attach or apply the entry to the Figma instance. The widget pushes field values through your bindings into the component so the instance shows real content on the canvas, not placeholder copy.

NOTE: You can change the linked entry or refresh when content updates in Contentful, subject to your permissions and sync state.

5. Explore entries and validate the design

To explore your entries and validate the design:

1. Duplicate or swap instances on the frame and attach different entries: shorter titles, longer bios, alternate images, edge cases. The widget helps you see how the same component behaves with varied real-world content before handoff to development.

2. Use this pass to stress-test line lengths, empty fields, and asset aspect ratios. Catching layout and content gaps in Figma reduces rework when the same components ship in production.

3. When you are satisfied with bindings and previews on one component, repeat steps 2–5 for other instances on the frame.