Pinnaflow Collections

About this plugin

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

With this plugin, you can:

🗂 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 copy-pasting.

⚡ Real-Time Preview & Auto Validation

Live feedback lets you know when your component is ready for export, and disables the export button if any structure is invalid.

🖼 Responsive & Intuitive UI

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

🛠 How to use:

Create a Collection

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

Add Items

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

Export to CSV

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

Apply Data to UI

In "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 Webflow compatibility.