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.

Adrian Rodgon Figma to Wordpress

<p>Convert Figma to WordPress Gutenberg Blocks with WPLandings. Try it for free without creating an account or installing additional figma plugins.</p>
<h3>How WPLandings works:</h3>
<p>Simply connect the plugin to your Figma account and paste the link of the Figma design you wish to convert. WPLandings extracts the text, and images and convert the Figma design into WordPress Gutenberg Blocks.</p>
<h3>Why choose WPLandings:</h3>
<ul>
<li>No need for creating an account or installing any Figma plugins.</li>
<li>No Figma AUTO LAYOUT preparation.</li>
<li>Pages and posts generated by WPLandings are native WordPress Gutenberg Blocks, so no need to install a cumbersome builder.</li>
<li>Generated pages are fully responsive by default. No need to create additional designs for mobile, WPLandings has you covered.</li>
</ul>
<h3>Features</h3>
<ul>
<li>Direct import from Figma: Easily connect your Figma account and convert Figma designs directly into WordPress with just one click.</li>
<li>Automated Images Handling: Automatically uploads images to the WordPress media library.</li>
<li>Auto Responsive: Designing your landing pages in various resolutions is unnecessary.</li>
<li>Integration with Major Marketing Tools: WPLandings seamlessly integrates with leading marketing plugins for analytics, SEO, lead generation, and more.</li>
<li>Customizable Elements: Adjust the converted pages/posts using WordPress’s native Blocks editor to meet your exact needs.</li>
</ul>


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.

FigMoove – Content for Figma vs Convert Figma to WordPress Gutenberg Blocks – WPLandings