AutoFrame

About this plugin

AutoFrame: Connect Airtable Data to Your Figma Designs

Bridge the gap between your data and your designs! Autoframe allows you to seamlessly connect your Airtable bases directly to Figma, automating the creation and synchronization of design elements.

Stop manually copying and pasting data. With Autoframe, you can generate perfectly structured Figma frames populated with real content from your Airtable views, saving you time and reducing errors.

Key Features:

1. Secure Airtable Connection: Easily connect your Airtable account using a secure OAuth 2.0 flow.
2. Automated Frame Generation: Select an Airtable Base, Table, and View, and instantly generate Figma frames for each record.
3. Data-Driven Content: Choose specific Airtable fields to populate text layers within your frames, ensuring your designs reflect your actual data.
4. Custom Frame Naming: Designate an Airtable field to automatically name your generated frames.
5. Dynamic Frame Sizing: Optionally add a "Dimensions" field (e.g., 300x500) in your Airtable view to automatically set the width and height of corresponding Figma frames.
6. Flexible Layout: Control the arrangement of generated frames by specifying the number of columns.
7. Figma to Airtable: Push text edits or frame name changes made in Figma back to your Airtable base.
8. Airtable to Figma: Pull the latest data from Airtable to update your existing generated frames without needing to regenerate everything.
9. Secure Login: Protects access via an Email + One-Time Passcode (OTP) verification system.

How It Works:

1. Connect: Log in and securely connect your Airtable account.
2. Select: Choose your Airtable Base, Table, View, and the fields you want to use for frame names and content.
3. Generate: Click "Generate Frames" to automatically create frames on your Figma canvas populated with your data.
4. Sync: Use the "Sync Changes to Airtable" or "Sync From Airtable" buttons to keep your designs and data aligned.

Ideal For:

1. Data-driven design workflows
2. Managing dynamic content within designs (e.g., user profiles, product cards)
3. Populating components for design systems
4. Quickly visualizing data structures from Airtable
5. Anyone looking to streamline their design process by integrating directly with Airtable.

Get started with AutoFrame today and bring your Airtable data to life in Figma!