> ## 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. # Overview > Sync Figma components and export full email designs with the Email Love Figma plugin. The Email Love Figma plugin bridges your design workflow with email production. Whether you're syncing individual components or exporting complete email designs, the Figma plugin makes it seamless to move from Figma to Email Love Builder. These pages cover using the Figma plugin with the Builder. For the full Figma plugin documentation, start with the [Figma plugin docs](/plugin/getting-started/overview). ## What the Figma Plugin Does The Figma plugin provides two powerful capabilities for email designers: ### 1. Sync Design System Components Convert your Figma components into reusable Email Design System (EDS) components in Email Love Builder. Your existing design system in Figma becomes the foundation for a production-ready design system. * Select component frames in Figma * The Figma plugin converts them to MJML (email markup language) * Components are synced to your Email Love Builder design system * Keep your design system in sync as you iterate ### 2. Export Full Email Designs Take a complete email design from Figma and export it directly into Email Love Builder as a ready-to-edit template. * Select your finished email design * Export as a template with one click * Organize it in your Email Love Builder project folders * Start testing, personalizing, and sending immediately ## How Component Syncing Works The Figma plugin uses an intelligent syncing system to keep your design system up to date: ### Initial Sync When you sync a Figma component frame for the first time, the Figma plugin: * Converts the frame and all nested elements to MJML markup * Pushes the component to your Email Love Builder design system * Records the Figma node ID as a unique identifier ### Smart Updates The Figma plugin is smart about subsequent syncs: * **Unchanged components:** Skipped to save time * **Modified components:** Automatically updated in Email Love Builder * **Conflict detection:** If a component was edited in both Figma and Email Love Builder since the last sync, the conflict is flagged so you can decide which version to keep This means you can safely re-sync components without worrying about creating duplicates or losing important changes. ### Sync Status Indicators After syncing, components in Email Love Builder display a visual indicator: * **Green checkmark:** Component is synced from Figma and up to date * **Blue cloud:** Component was edited in Email Love Builder after being synced from Figma These indicators help you understand the relationship between your Figma designs and production components. ## Getting Started ### Prerequisites * An Email Love Builder account * Access to a Figma file where you want to use the Figma plugin * An API key from Email Love Builder (see the setup guide below) ### Quick Start 1. **Generate an API key** in Email Love Builder (Settings > API Keys) 2. **Install the Figma plugin** from the [Figma Community](/plugin/getting-started/install) 3. **Open the Figma plugin** in Figma and paste your API key in Settings 4. **Select your workspace and design system** 5. **Start syncing components or exporting templates** For detailed setup instructions, see [Setting Up the Figma Plugin](/builder/figma-plugin/setup). ## Component Sync Workflow Here's the typical flow for syncing components from Figma to Email Love Builder: 1. Create or modify component frames in Figma 2. Open the Email Love Figma plugin 3. Select the component frames you want to sync 4. Click **Sync to Email Love Builder** 5. The Figma plugin displays sync status and any conflicts 6. Review synced components in your Email Love Builder design system 7. Use them in templates or continue iterating in Figma ## Email Export Workflow To export a complete email design as a template: 1. Finish designing your email in Figma 2. Select the entire design frame 3. Open the Email Love Figma plugin 4. Click **Export as Template** 5. Choose a destination project folder in Email Love Builder 6. The template appears in Email Love Builder ready for editing, testing, and personalization ## Key Features ### Batch Syncing Select multiple component frames at once and sync them together. Ideal for syncing a full design system or a set of related components. ### Conflict Resolution When a component is edited in both Figma and Email Love Builder, the Figma plugin flags the conflict and lets you choose which version to keep. ### Workspace and Design System Selection If your Email Love Builder account has multiple workspaces or design systems, the Figma plugin lets you choose where to sync components and export templates. ### Real-time Status Updates After syncing, the Figma plugin displays clear status messages about what was created, updated, or skipped. ## Best Practices * **Organize Figma frames:** Use consistent naming conventions for your component frames to make syncing and tracking easier * **Test early:** After syncing components, test them in Email Love Builder templates to ensure the MJML conversion looks correct * **Sync regularly:** Regular, small syncs are easier to manage than large batch syncs * **Use design system for reusability:** Synced components in your design system can be used across multiple templates * **Document components:** Add helpful descriptions to components in your design system to guide template builders ## Troubleshooting ### My API key isn't working Make sure you've copied the entire API key from Email Love Builder (they start with "ef\_"). API keys are case-sensitive and must not include extra spaces. ### Synced components don't look right MJML has some layout differences from Figma. Complex nested designs may need refinement in Email Love Builder. Test components in actual email clients to verify they render correctly. ### I see a sync conflict Review the changes in both Figma and Email Love Builder, then choose which version to keep. The Figma plugin will update the component based on your selection. ### The Figma plugin isn't responding Try refreshing the Figma file and reopening the Figma plugin. If the issue persists, check your internet connection and API key settings. ## Next Steps * [Set up the Figma plugin](/builder/figma-plugin/setup) to get started * Learn about [managing your design system](/builder/design-systems/overview) * Explore the [API reference](/builder/api/overview) for programmatic access ## Need Help? If you encounter issues or have questions about the Figma plugin, contact our support team. We're always happy to help!