> ## Documentation Index > Fetch the complete documentation index at: https://help.emaillove.com/llms.txt > Use this file to discover all available pages before exploring further. # Setting Up the Figma Plugin > Install and configure the Email Love Figma plugin and generate your API key. This guide walks you through installing and configuring the Email Love Figma plugin so you can start syncing components and exporting templates. Your API key is the authentication credential that allows the Figma plugin to access your Email Love Builder workspace. **To create an API key:** 1. Log in to Email Love Builder and click **Settings** in the left navigation 2. Go to the **API Keys** tab 3. Click **Create API Key** 4. Enter a descriptive name (e.g., "Figma Plugin") 5. Click **Create** 6. **Copy the key immediately**: it's only shown once and cannot be retrieved later API keys always start with `ef_`. Store this key somewhere safe; you'll need it in Step 3. The Email Love Figma plugin is available in the Figma Community. **To install the Figma plugin:** 1. In Figma, go to **Plugins** in the left sidebar 2. Click **Browse all plugins** 3. Search for **Email Love** 4. Click on the Email Love Figma plugin 5. Click **Install** The Figma plugin is now available in your Figma account and can be used in any of your files. For more detail, see the [Figma plugin install guide](/plugin/getting-started/install). Once installed, open the Figma plugin and configure it with your Email Love Builder account details. **To set up the Figma plugin:** 1. In any Figma file, go to **Plugins** > **Email Love** 2. The Figma plugin window opens on the right side 3. Click **Settings** (gear icon or settings button) 4. Paste your API key in the **API Key** field 5. Click **Connect** The Figma plugin will verify your API key and load your Email Love Builder workspaces. After connecting your API key, choose where you want to sync components and export templates. **To select your workspace and design system:** 1. In the Figma plugin, look for the **Workspace** dropdown 2. Select the workspace where you want to work 3. Look for the **Design System** dropdown 4. Select the design system where components will be synced If you only have one workspace and design system, these are selected automatically. ## Syncing Components Now that your Figma plugin is configured, you can start syncing Figma components to Email Love Builder. ### How to Sync Components 1. In Figma, select the component frame(s) you want to sync 2. Open the **Email Love** Figma plugin (Plugins > Email Love) 3. The selected frames appear in the Figma plugin panel 4. Click **Sync to Email Love Builder** 5. The Figma plugin converts the frames to MJML and pushes them to your design system ### What Happens During Sync * The Figma plugin converts your Figma component to MJML (email markup language) * It records the Figma node ID so future syncs update the same component * If the component already exists, it's updated; otherwise, a new component is created * Unchanged components are skipped to save time ### Syncing Multiple Components You can sync several components at once by selecting multiple frames before clicking Sync. This is useful for syncing an entire design system or a related set of components. ## Understanding Sync Status After syncing, components in your Email Love Builder design system show status indicators that tell you about their relationship with Figma: ### Green Checkmark The component is synced from Figma and matches the latest Figma version. No changes have been made in Email Love Builder since the sync. ### Blue Cloud The component was originally synced from Figma but has been edited or modified in Email Love Builder after the sync. The component in Email Love Builder may differ from what's in Figma. ### Conflict Indicator If a component was edited in both Figma and Email Love Builder since the last sync, the Figma plugin flags this conflict. You'll need to review both versions and decide which to keep. The Figma plugin will guide you through conflict resolution. ## Exporting a Full Email Want to move a complete email design from Figma to Email Love Builder? Use the export feature. **To export an email as a template:** 1. In Figma, select the entire email design frame 2. Open the **Email Love** Figma plugin 3. Click **Export as Template** 4. Select a destination **Project** folder in Email Love Builder (if available) 5. Optionally enter a **Template Name** 6. Click **Export** The email design is converted to MJML and appears in your Email Love Builder project as a new template, ready for editing, testing, and personalization. ## Verifying Your Setup To confirm everything is working correctly: 1. Open the Email Love Figma plugin in Figma 2. Check that your workspace and design system are selected 3. Create a simple test component frame (e.g., a colored rectangle) 4. Select it and click **Sync to Email Love Builder** 5. Go to Email Love Builder and check your design system: the test component should appear If you see the test component in your design system, you're all set! ## Troubleshooting ### "API Key Invalid" Error * Make sure you copied the entire key from Email Love Builder (it should start with `ef_`) * Check that there are no extra spaces before or after the key * API keys are case-sensitive ### Figma Plugin Isn't Loading * Try refreshing the Figma file * Close and reopen the Figma plugin * Check your internet connection ### Synced Components Look Incorrect MJML has different layout rules than Figma. Complex designs may need refinement in Email Love Builder: * Test the component in an email client * Adjust spacing, sizing, or nesting in Email Love Builder if needed * Consult the [Figma plugin docs](/plugin/getting-started/overview) for best practices ### I Don't See My Design System * Verify you selected the correct workspace * Make sure you have a design system created in Email Love Builder * Check that your API key has the necessary permissions ## Next Steps * Learn about [syncing and exporting with the Figma plugin](/builder/figma-plugin/overview) * Explore [managing your design system](/builder/design-systems/overview) * Check the [API reference](/builder/api/overview) for programmatic access ## Questions? If you need help, contact our support team. We're here to make your workflow as smooth as possible!