Concepts

These terms describe what you work with in Figma and Contentful when using the widget and the plugin panel it opens. No setup beyond getting started is assumed here.

A binding is the saved map from Contentful fields to Figma properties, optionally through a transform (formatting dates, plain text from rich text, literals, and so on). Bindings are stored as Figma Variables in a Contentful collection in your file; you can publish that collection as a library and reuse bindings in other files, or back up bindings and entry links to a Contentful asset and install that snapshot later. See Map Figma properties to Contentful fields for the mapping table, the Binding library section for variables, sharing, and backup, the String templating section for {fieldName} templates, and the Rich text one for formatters.

After bindings exist, attaching an entry applies field values into the instance so you see real content instead of placeholders.

A Contentful entry is one record of content in your space, for example a person, article, product, or landing page block. Entries are authored in Contentful and identified by an entry ID.

In the widget workflow you search for entries, attach an entry to a Figma instance, and preview that entry’s field values on the canvas through your bindings. Different entries of the same content type let you stress-test layout with real variations (short vs long title, missing image, and so on).

A content type is the schema for entries: which fields exist (text, rich text, media, references, and so on) and their types. Every entry belongs to exactly one content type.

When you create bindings, you map fields from a content type to properties on a Figma component. The content type behind your entry must expose the fields your component needs. If the type changes in Contentful or the component changes in Figma, existing bindings may need review.

A Figma component is the reusable definition in your file or library. The master you design once and place as instances. Component properties (text, boolean, variant, and so on) and nested layers are what bindings target.

Bindings describe how Contentful data fills that component’s structure. Multiple instances on a frame usually share the same component definition but can show different entries.

A Figma instance is a placed copy of a component on the canvas. When you attach the widget to a frame, it builds a binding map in the widget: a clickable layout whose sections visually match bindable instances on that frame.

You focus an instance by clicking its section on the binding map. Each instance can have its own bindings and display entry, even when instances share one underlying component.

The Figma widget is the control surface on the canvas: attach to a frame, view linkage (space and environment), see the binding map, and preview bound vs unbound instances. Actions such as attach, open configuration (gear), and focus an instance start here.

The widget does not replace the full binding editor or entry search. It works together with the plugin panel you open from the widget.

The Figma plugin is the larger panel UI opened from the widget, for example Open panel or when configuration needs the full interface. In the panel you sign in to Contentful, choose space and environment, edit bindings, search entries, run bulk operations, and apply content to instances.

Think of the widget as on-canvas context and shortcuts. The plugin is where most detailed work happens. Both act on the same file linkage and bindings for the Figma file you are in.

1. You attach the widget to a frame and pick an instance from the map.

2. In the plugin, you map content type fields to the component via bindings.

3. You attach a Contentful entry and apply it so the instance displays real content on the canvas.