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>


FigMoove – Content for Figma

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

Figmentor

<p><strong>Figmentor</strong> is a powerful WordPress plugin that bridges the gap between Figma and Elementor, allowing designers and developers to seamlessly convert their Figma designs into fully functional Elementor templates.</p>
<p>With real-time syncing and a user-friendly interface, Figmentor helps you import, organize, and edit Figma-based designs directly in WordPress using Elementor.</p>
<h3>Key Features</h3>
<ul>
<li><strong>One-Click Import</strong>: Convert Figma designs to Elementor templates instantly</li>
<li><strong>API Integration</strong>: Secure connection between your Figma and WordPress accounts</li>
<li><strong>Template Library</strong>: Manage and organize all your imported templates</li>
<li><strong>Real-time Sync</strong>: Keep your designs synchronized between Figma and WordPress</li>
<li><strong>Responsive Design</strong>: Imported templates maintain responsiveness</li>
<li><strong>Preview Support</strong>: Preview templates before importing</li>
<li><strong>Auto-updates</strong>: Get notifications for new features and improvements</li>
</ul>
<h3>How It Works</h3>
<ol>
<li>Install and activate the Figmentor plugin in WordPress</li>
<li>Connect your Figmentor account using your API token</li>
<li>Install the Figmentor plugin in Figma</li>
<li>Select your Figma frame and export it to Elementor</li>
<li>Import the template directly into WordPress</li>
<li>Edit and customize it with Elementor</li>
</ol>
<h3>Perfect For</h3>
<ul>
<li>Web Designers</li>
<li>Agencies</li>
<li>Freelancers</li>
<li>Design Teams</li>
<li>WordPress Developers</li>
</ul>
<h3>Requirements</h3>
<ul>
<li>WordPress 5.0 or higher</li>
<li>Elementor Page Builder (Free or Pro) – <a href="https://wordpress.org/plugins/elementor/" rel="ugc">Download Elementor</a></li>
<li>PHP 7.4 or higher</li>
<li>Active Figmentor account – <a href="https://figmentor.io" rel="nofollow ugc">Create one here</a></li>
<li>Figma account with the Figmentor plugin installed</li>
</ul>
<h3>Getting Your API Token</h3>
<ol>
<li>Log in to your Figmentor dashboard at <a href="https://figmentor.io" rel="nofollow ugc">https://figmentor.io</a></li>
<li>Go to <strong>Account Settings > API Tokens</strong></li>
<li>Generate a new WordPress token</li>
<li>Copy and paste it into the plugin settings page in WordPress</li>
</ol>
<h3>First Import</h3>
<ol>
<li>Open Figma and install the Figmentor plugin</li>
<li>Select your design frame</li>
<li>Click <strong>Export to Elementor</strong></li>
<li>Go to WordPress > Figmentor</li>
<li>Click <strong>Import Template</strong> on your design</li>
<li>Edit with Elementor!</li>
</ol>
<h3>Additional Information</h3>
<h4>Support</h4>
<p>Need help? Visit our <a href="https://figmentor.io/contact/" rel="nofollow ugc">Help Center</a> or contact us at hello@figmentor.io</p>
<h4>Documentation</h4>
<p>Full documentation is available at <a href="https://figmentor.io/docs" rel="nofollow ugc">https://figmentor.io/docs</a></p>
<h4>Privacy Policy</h4>
<p>We take your privacy seriously. Read our <a href="https://figmentor.io/privacy-policy" rel="nofollow ugc">Privacy Policy</a></p>
<h4>Terms of Service</h4>
<p>By using this plugin, you agree to our <a href="https://figmentor.io/terms-and-conditions" rel="nofollow ugc">Terms and Conditions</a></p>
<h3>Credits</h3>
<p>Figmentor is developed by the <a href="https://figmentor.io" rel="nofollow ugc">Figmentor Team</a>.</p>
<p>Special thanks to:<br />
* The WordPress community<br />
* The Elementor team for the amazing product<br />
* <a href="https://otha.me" rel="nofollow ugc">Othmane N.</a><br />
* <a href="https://otha.me" rel="nofollow ugc">Otha.studio</a><br />
* All our beta testers and early adopters</p>


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

FigMoove – Content for Figma vs Figmentor