Figma CMS Table Generator

Figma CMS Table Generator helps you structure CMS data directly in your Figma file and export it as a Webflow-compatible CSV.

What You Can Do with This Plugin

Create CMS Collections

Define fields with types like Plain Text, Rich Text, Image, Number, Date, or Switch — all directly in your Figma UI.

Add CMS Items

Populate data using a form-driven interface. Each item becomes a variant within your CMS component.

Export CSV for Webflow

Download a ready-to-import CSV with your data structured according to Webflow CMS standards.

Apply CMS Data to Design

Inject field values into selected Figma elements by choosing collection, item, and field — no more copy-pasting.

Real-Time Preview & Auto Validation

Get live feedback when your component is ready for export. The export button is disabled automatically if any structure is invalid.

Responsive & Intuitive UI

Enjoy a clean, responsive layout with tooltips, modals, and auto-tab interactions for a seamless workflow.

How to Use

1. Create a Collection

Go to the "Create Collection" tab → enter a collection name → define fields → click "Create Collection".

2. Add Items

Switch to "Create Item" → fill in values for each defined field → click "Create Item".

3. Export to CSV

Select the CMS component → click "Export CSV" in the Collection tab.

4. Apply Data to UI

In the "Apply Data" tab → choose collection, item, and field → select a text layer in your design → click "Apply to Selected Element".

Best Practices

• Your CMS component must contain a frame named “CMS Properties”, with text layers in the format:
  Field Name | Field Type
• When applying data, make sure the selected element is a single text node.
• Only one CMS component should be selected at a time when creating items or exporting.
• Use consistent field names and valid types for clean CSV output and full Webflow compatibility.