WordPress plugin to integrate Figma content into your website. Manage multiple Figma files and display content from specific layers.

OVIXIA

DataPocket – Connect product data with your design tools

Sync product feeds into your design tools and create on-brand assets with real-time data.

DataPocket brings your product data (images, prices, copy)  …

Levels Branding and Webdevelopment

Figma to Oxygen Builder – ready→made WordPress Integration

The official WordPress integration for the ready→made Figma plugin. Seamlessly copy-paste sections from your Figma designs into Oxygen Builder.

POSIMYTH

Sagar Patel

Devang Vachheta

Dhaval Panchal

UiChemy — Figma Converter for Elementor, Gutenberg and Bricks

Convert Figma to WordPress, Elementor, Gutenberg & Bricks. Design in Figma, Import to WordPress. 100% Editable. No Code. No Rebuild. 80,000+ users.

Figmentor

The fastest way to convert your Figma designs into Elementor templates. Import designs from Figma to WordPress with one click.

Adrian Rodgon Figma to Wordpress

Convert Figma to WordPress Gutenberg Blocks – WPLandings

Convert Figma to WordPress Gutenberg Blocks with WPLandings. Try it for free without creating an account or installing additional figma plugins.

10up

Jeffrey Paul

Darin Kotter

Embed Block for Figma

Display Figma files using an Embed block.

lightsyncpro

tagteamdesign

LightSync Pro – Connect & Sync Cloud Assets | Lightroom, Canva, Figma, Dropbox & Shutterstock

Cloud-to-CMS image synchronization for WordPress & Shopify. Connect Lightroom, Canva, Figma, Dropbox, Shutterstock or generate with AI models — up …

Harish Chouhan

Themeist Co

Grid Overlay – Figma Style Layout Grid for WordPress

Visually check if your layout matches your design by overlaying a responsive grid on the frontend — inspired by Figma’s layout grid system.

cownected

<p>A WordPress plugin that allows you to integrate Figma content into your website. Manage multiple Figma files, display content from specific layers, and track component status.</p>
<h3>Trademark Notice</h3>
<p>This plugin is not affiliated with, endorsed by, or sponsored by Figma, Inc. “Figma” is a trademark of Figma, Inc. This plugin is an independent third-party tool that integrates with the Figma API.</p>
<h3>Third-Party Service: Figma API</h3>
<p>This plugin requires the use of the Figma API, a third-party service provided by Figma, Inc.</p>
<p><strong>What is Figma and what is it used for?</strong><br />
Figma is a collaborative design tool. This plugin uses the Figma API to fetch design content (text, images, colors, and layout information) from your Figma files and display it on your WordPress website.</p>
<p><strong>What data is sent and when?</strong><br />
– When you configure a Figma file, your Figma File ID and Personal Access Token are stored locally in your WordPress database<br />
– When displaying content, the plugin sends requests to the Figma API using your access token to fetch:<br />
  – File metadata (file name, pages, layers)<br />
  – Design content (text content, colors, images)<br />
  – Component status information<br />
– Data is sent only when:<br />
  – You manually sync content<br />
  – The automatic hourly sync runs<br />
  – A visitor views a page containing Figma content blocks<br />
– Your access token is sent with each API request for authentication<br />
– No user data from your WordPress site is sent to Figma</p>
<p><strong>Privacy and Service Terms:</strong><br />
– <a href="https://www.figma.com/privacy/" rel="nofollow ugc">Figma Privacy Policy</a><br />
– <a href="https://www.figma.com/terms-of-service/" rel="nofollow ugc">Figma Terms of Service</a><br />
– <a href="https://www.figma.com/developers/api" rel="nofollow ugc">Figma API Documentation</a></p>
<p><strong>Important:</strong> This plugin is not affiliated with, endorsed by, or sponsored by Figma, Inc. “Figma” is a trademark of Figma, Inc.</p>
<h3>Features</h3>
<ul>
<li><strong>Admin Interface</strong>: Manage multiple Figma files with their IDs and access tokens</li>
<li><strong>Content Block</strong>: Display content from Figma files, pages, and layers</li>
<li><strong>Component Status Block</strong>: Show the status of Figma components</li>
<li><strong>Database Tracking</strong>: Track block usages for content synchronization</li>
<li><strong>REST API</strong>: Endpoints for fetching Figma data</li>
<li><strong>Automatic Sync</strong>: Scheduled content synchronization with Figma</li>
</ul>
<h3>Configuration</h3>
<h3>Adding Figma Files</h3>
<ol>
<li>Navigate to <strong>Figma Files</strong> > <strong>Add New</strong> in your WordPress admin</li>
<li>Fill in the required information:
<ul>
<li><strong>Name</strong>: A friendly name for your Figma file</li>
<li><strong>Figma File ID</strong>: The file ID from your Figma URL (the part after <code>/file/</code>)</li>
<li><strong>Access Token</strong>: Your Figma personal access token</li>
<li><strong>Description</strong>: Optional description for the file</li>
</ul>
</li>
</ol>
<h3>Getting a Figma Access Token</h3>
<ol>
<li>Go to your <a href="https://www.figma.com/settings" rel="nofollow ugc">Figma account settings</a></li>
<li>Scroll down to “Personal access tokens”</li>
<li>Click “Create new token”</li>
<li>Give it a name and copy the token</li>
<li>Use this token in the plugin settings</li>
</ol>
<h3>Using the Blocks</h3>
<h3>Figma Content Block</h3>
<ol>
<li>Add a new “Figma Content” block to your post/page</li>
<li>In the block settings:
<ul>
<li>Select a Figma file from the dropdown</li>
<li>Choose a page from the file</li>
<li>Optionally select a specific layer</li>
<li>Configure display options (texts, colors, images)</li>
</ul>
</li>
<li>The block will display a preview in the editor and render the content on the frontend</li>
</ol>
<h3>Figma Component Status Block</h3>
<ol>
<li>Add a new “Figma Component Status” block to your post/page</li>
<li>In the block settings:
<ul>
<li>Select a Figma file from the dropdown</li>
<li>Configure what information to display (last modified, version, thumbnail)</li>
</ul>
</li>
<li>The block will show the component status information</li>
</ol>
<h3>Block Attributes</h3>
<h3>Content Block Attributes</h3>
<ul>
<li><code>figmaFileId</code>: The Figma file ID</li>
<li><code>pageId</code>: The page ID within the file</li>
<li><code>layerId</code>: The layer ID within the page</li>
<li><code>blockId</code>: Unique identifier for the block</li>
<li><code>showTexts</code>: Whether to display text content</li>
<li><code>showColors</code>: Whether to display color information</li>
<li><code>showImages</code>: Whether to display image references</li>
</ul>
<h3>Component Status Block Attributes</h3>
<ul>
<li><code>figmaFileId</code>: The Figma file ID</li>
<li><code>componentId</code>: Specific component ID (optional)</li>
<li><code>showLastModified</code>: Whether to display last modified date</li>
<li><code>showVersion</code>: Whether to display version information</li>
<li><code>showThumbnail</code>: Whether to display thumbnail image</li>
</ul>
<h3>REST API Endpoints</h3>
<p>The plugin provides REST API endpoints for fetching Figma data:</p>
<ul>
<li><code>GET /wp-json/figmoove/v1/files</code> – Get all configured files</li>
<li><code>GET /wp-json/figmoove/v1/files/{file_id}/pages</code> – Get pages from a file</li>
<li><code>GET /wp-json/figmoove/v1/files/{file_id}/layers</code> – Get layers from a file</li>
<li><code>GET /wp-json/figmoove/v1/files/{file_id}/content</code> – Get content from a node</li>
<li><code>GET /wp-json/figmoove/v1/files/{file_id}/component-status</code> – Get component status</li>
<li><code>POST /wp-json/figmoove/v1/sync-content</code> – Manually sync content</li>
</ul>
<h3>Content Synchronization</h3>
<p>The plugin automatically tracks block usages and synchronizes content:</p>
<ul>
<li>Block usages are saved to the database when posts are saved</li>
<li>Content is cached to improve performance</li>
<li>A scheduled task runs hourly to sync content from Figma</li>
<li>Manual sync can be triggered via the REST API</li>
</ul>
<h3>Database Tables</h3>
<p>The plugin creates two database tables:</p>
<ol>
<li><code>wp_figmoove_files</code> – Stores Figma file configurations</li>
<li><code>wp_figmoove_block_usages</code> – Tracks block usages for synchronization</li>
</ol>
<h3>Requirements</h3>
<ul>
<li>WordPress 5.0+</li>
<li>PHP 7.4+</li>
<li>Active internet connection for Figma API access</li>
</ul>
<h3>Development</h3>
<h3>File Structure</h3>
<pre><code>`
</code></pre>
<p>figmoove/<br />
├── figmoove.php          # Main plugin file<br />
├── includes/<br />
│   ├── class-database.php       # Database operations<br />
│   ├── class-admin.php          # Admin interface<br />
│   ├── class-api.php            # API functionality<br />
│   └── class-blocks.php         # Block registration<br />
├── assets/<br />
│   ├── js/<br />
│   │   ├── blocks.js            # Block editor JavaScript<br />
│   │   └── frontend.js          # Frontend JavaScript<br />
│   └── css/<br />
│       ├── blocks.css           # Frontend styles<br />
│       └── blocks-editor.css    # Editor styles<br />
└── README.md<br />
    `</p>
<h3>WordPress Coding Standards</h3>
<p>This plugin follows WordPress coding standards and best practices:</p>
<ul>
<li>Proper sanitization and validation</li>
<li>Security nonces for form submissions</li>
<li>Prepared statements for database queries</li>
<li>Proper enqueuing of scripts and styles</li>
<li>Internationalization support</li>
</ul>
<h3>Support</h3>
<p>For support and feature requests, please contact the plugin author.</p>
<h3>License</h3>
<p>This plugin is licensed under the GPL v2 or later.</p>


Alternatives to FigMoove – Content for Figma

Top alternatives