Figma To Elementor
Figma plugin to easily convert figma design into Elementor widgets
Plugin Preview
About this plugin
Figma to Elementor ConverterTransform your Figma designs into fully functional Elementor widgets with just one click. This powerful plugin generates clean JSON data that seamlessly integrates with Elementor's editor.📚 ResourcesWatch Video Tutorial - Step-by-step guidePurchase License Key - Get full accessWordPress Preparation- Enable SVG support in Elementor settings- Install SVG support plugin for full compatibility🚀 Quick StartSelect: Select your Figma design and run the pluginOption: Enable "Convert without connection"Convert: Click "Convert to elementor" and wait to finishCopy: Click "Copy" to get the generated JSON dataPaste: Right-click in Elementor editor → "Paste from other site" → Ctrl+V✨ Key Features🏷️ Tagging SystemTake full control of your conversions with our tagging feature:Select any frame or node in your Figma designNavigate to the "Tagging" tab in the Figma to Elementor plugin panelClick the specific widget type you want that element to becomeConvert with precision-targeted resultsThis powerful feature overrides automatic detection, giving you complete control over how each element converts to Elementor widgets.Image RecognitionAutomatically detects locked nodes as imagesRecognizes any element containing "image" in its nameExample: "hero-image", "product-image-gallery" → converted as image widgetsFlexible Connection OptionsDirect connection: Upload images directly to your WordPress siteTemporary server: Enable "Convert without connection" for connection issuesImages automatically transfer to your site when pasting JSON data🔧 Setup RequirementsAuthentication- Application password authentication requires HTTPS- For local development, add to wp-config.php:define( 'WP_ENVIRONMENT_TYPE', 'local' );💡 Pro Tips for Better ResultsNaming ConventionsUse "button" in element names → converts to Elementor button blocksAvoid "image" in names unless you want image conversionExample: Rename "image-group" to "content-group" to prevent image conversionPro tip: Use the tagging system for even more precise controlDesign OrganizationGroup image elements and lock them for proper image widget creationGroup related elements before conversion for cleaner outputFix broken layouts by manually grouping problematic elementsTroubleshootingPreview showing broken layout? Re-group elements and convert againConnection issues? Toggle "Convert without connection" optionImages not uploading? Check HTTPS setup and WordPress permissions---Transform your design workflow today. Convert Figma designs to Elementor widgets in seconds, not hours.
Plugin Details
| Version | 79 |
|---|---|
| Created | September 28, 2023 |
| Last Updated | December 21, 2025 |
| Category | Import & export plugins |
| Creator | Syarifuddin Yusuf |
| Stats | 1507 installs, 447 likes |
| Pricing | Free |
Technical Details
- API:1.0.0
- UI:dist/ui.html
- main:dist/code.js
- Document Access:dynamic-page
- Network Access:
This plugin need to upload image and svg files to the WordPress site specified in the settings
- Editor Types:figma
- Allowed Domains:
- *
More Like This
Discover other plugins in the Import & export plugins category.
html.to.design — by ‹div›RIOTS — Import websites to Figma designs (web,html,css)
Convert any website into fully editable Figma designs
Anima - Figma to Code React, HTML, CSS, Tailwind, MUI (DevMode Inspect React / HTML / Vue / CSS)
Anima - AI Powered Design to code
Figma to HTML
Convert Figma design to HTML