This comprehensive documentation guides you through every aspect of Figmentor, from installation to advanced usage. Whether you're converting your first Figma design or optimizing your workflow, you'll find step-by-step instructions, troubleshooting tips, and best practices to help you succeed.
Quick Links
Overview
What is Figmentor?
Figmentor is a complete toolchain that lets you convert Figma designs into fully importable Elementor templates for WordPress. It consists of:
Figma Plugin
Export selected frames from Figma directly to your WordPress site.
WordPress Plugin
Import and place templates directly in Elementor with a single click.
Figmentor Studio
Manage exports, plans, and integration tokens from our SaaS platform.
How Figmentor Works
Figmentor converts your Figma designs into clean, optimized code that works seamlessly with Elementor. The process preserves your layout, styling, images, and text while making everything editable in Elementor.
Quick Start
1. Install & Connect
Figma Plugin
- Search "Figmentor" in the Figma Community Plugins.
- Click Install.
- Open your Figma file → Plugins → Figmentor → Login & Connect using your access token.
WordPress Plugin
- Go to Plugins → Add New in your WP Admin.
- Upload the Figmentor WordPress plugin (
figmentor.zip). - Activate the plugin.
- Paste your API Token from Figmentor Studio in the plugin settings.
2. Export from Figma
- Select a frame you want to export.
- Open Figmentor Plugin.
- Click "Export to WordPress".
- Your export will be processed and appear in your Figmentor dashboard.
Important Notes
- You must select a top-level frame to export.
- Nested frames will be included automatically.
- Export process may take a few seconds to complete depending on complexity.
3. Import into Elementor
- Open your WordPress Admin → Pages or Posts.
- Click Edit with Elementor.
- Inside Elementor, use the Figmentor Widget or the "Import Figmentor Template" button.
- Choose your exported design → Click Insert.
Figmentor import widget in Elementor editor
API Token Setup
Your API token connects your Figma plugin, WordPress plugin, and Figmentor Studio account. Follow these steps to set up your token:
- Visit your Figmentor Studio Dashboard.
- Navigate to API & Integrations.
- Click "Generate Token" and copy it.
- Use this token in both Figma and WordPress plugins.
Security Warning
Keep your API token private. If compromised, regenerate a new token immediately and update your plugins.
Plan Limits & Usage
Each export counts as one usage. Your current usage and remaining exports are visible in:
- Figmentor Studio Dashboard (main overview panel)
- Inside both plugins under "Usage Overview"
Understanding Plan Limits
| Plan | Monthly Exports | Renewal |
|---|---|---|
| Starter | 20 exports | Monthly reset on billing date |
| Pro | 100 exports | Monthly reset on billing date |
| Agency | Unlimited exports | N/A |
Tip: Usage Optimization
Before exporting a large design, consider splitting it into logical sections or components to preserve exports and make your templates more reusable.
Sync & Billing
Sync
Plugins auto-sync with Figmentor Studio. If your plan changes or your token is revoked, you'll be notified in the plugins.
Sync Frequency
- Figma plugin syncs on startup and before each export
- WordPress plugin syncs on admin page load
- Manual sync available via refresh button
Billing
All billing is managed securely via Paddle. You can view and manage your subscription anytime in the Billing tab of Figmentor Studio.
Billing Features
- Change your subscription plan
- Update payment methods
- View invoice history
- Cancel subscription
Troubleshooting
Encountering issues? Here are solutions to common problems:
Figma Plugin Issues
Export button disabled?
Make sure a frame is selected. Only top-level frames can be exported.
Solution: Select a single frame and try again.
Not syncing?
This usually indicates an authentication or network issue.
Solution: Re-login and check your token. Ensure you have internet connection.
Export fails with error?
Complex designs or specific features might not be supported.
Solution: Try simplifying your design, checking for unsupported elements, or exporting a smaller section.
WordPress Plugin Errors
Template not loading?
Check your Elementor version (min 3.x required).
Solution: Update Elementor to the latest version.
Token expired?
API tokens may expire or be revoked for security reasons.
Solution: Re-generate from Figmentor Studio and replace it in your WordPress plugin settings.
Plugin conflicts?
Some page builder or optimization plugins might conflict with Figmentor.
Solution: Temporarily disable other plugins to identify conflicts. Contact support if the issue persists.
SaaS Dashboard
Usage not updating?
Dashboard statistics may have a slight delay in updating.
Solution: Refresh your dashboard or clear cache. If still not updating after an hour, contact support.
Subscription error?
Payment processing or subscription status issues may occur.
Solution: Contact support at [email protected]
Best Practices
Follow these recommendations to get the best results with Figmentor:
Use Auto-Layout
Auto-layout in Figma translates better to Elementor's responsive structure. Whenever possible, use auto-layout for your components and sections.
Standard Frame Sizes
Keep design sizes inside a standard 1440px wide frame. This ensures compatibility with most WordPress themes and Elementor's content width.
Web-Safe Fonts
Use web-safe fonts or ensure fonts are installed in your WordPress theme. Custom fonts will need to be added to your website separately.
Flatten Complex Effects
Some advanced Figma effects may not translate perfectly. Consider flattening complex effects to images for pixel-perfect results.
Component Organization
Well-organized Figma components convert more predictably. Use clear naming and structure for best results.
Modular Approach
Instead of exporting entire pages, consider exporting reusable sections. This saves exports and makes your templates more flexible.
More Resources
Changelog
Track all the latest updates, features, and improvements to Figmentor.
Roadmap
See what's coming next and vote on new features you'd like to see.
Feature Requests
Share your ideas and suggestions for Figmentor's future development.
Community Discord
Join our community of designers and developers using Figmentor.
Documentation Updates
This documentation is updated regularly to reflect the latest features and changes. Last updated: April 30, 2025.
Need Help?
We're here to support you! If you need assistance with Figmentor, there are several ways to get help:
Need a Custom Solution?
For Enterprise customers or specialized needs, our team can provide personalized onboarding, custom training, or dedicated support. Contact our sales team to discuss your requirements.
Learn About Enterprise