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.

Trademark Notice

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.

Third-Party Service: Figma API

This plugin requires the use of the Figma API, a third-party service provided by Figma, Inc.

What is Figma and what is it used for?
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.

What data is sent and when?
– When you configure a Figma file, your Figma File ID and Personal Access Token are stored locally in your WordPress database
– When displaying content, the plugin sends requests to the Figma API using your access token to fetch:
– File metadata (file name, pages, layers)
– Design content (text content, colors, images)
– Component status information
– Data is sent only when:
– You manually sync content
– The automatic hourly sync runs
– A visitor views a page containing Figma content blocks
– Your access token is sent with each API request for authentication
– No user data from your WordPress site is sent to Figma

Privacy and Service Terms:
– Figma Privacy Policy
– Figma Terms of Service
– Figma API Documentation

Important: This plugin is not affiliated with, endorsed by, or sponsored by Figma, Inc. “Figma” is a trademark of Figma, Inc.

Features

Admin Interface: Manage multiple Figma files with their IDs and access tokens
Content Block: Display content from Figma files, pages, and layers
Component Status Block: Show the status of Figma components
Database Tracking: Track block usages for content synchronization
REST API: Endpoints for fetching Figma data
Automatic Sync: Scheduled content synchronization with Figma

Configuration

Adding Figma Files

Navigate to Figma Files > Add New in your WordPress admin
Fill in the required information:
- Name: A friendly name for your Figma file
- Figma File ID: The file ID from your Figma URL (the part after /file/)
- Access Token: Your Figma personal access token
- Description: Optional description for the file

Getting a Figma Access Token

Go to your Figma account settings
Scroll down to “Personal access tokens”
Click “Create new token”
Give it a name and copy the token
Use this token in the plugin settings

Using the Blocks

Figma Content Block

Add a new “Figma Content” block to your post/page
In the block settings:
- Select a Figma file from the dropdown
- Choose a page from the file
- Optionally select a specific layer
- Configure display options (texts, colors, images)
The block will display a preview in the editor and render the content on the frontend

Figma Component Status Block

Add a new “Figma Component Status” block to your post/page
In the block settings:
- Select a Figma file from the dropdown
- Configure what information to display (last modified, version, thumbnail)
The block will show the component status information

Block Attributes

Content Block Attributes

figmaFileId: The Figma file ID
pageId: The page ID within the file
layerId: The layer ID within the page
blockId: Unique identifier for the block
showTexts: Whether to display text content
showColors: Whether to display color information
showImages: Whether to display image references

Component Status Block Attributes

figmaFileId: The Figma file ID
componentId: Specific component ID (optional)
showLastModified: Whether to display last modified date
showVersion: Whether to display version information
showThumbnail: Whether to display thumbnail image

REST API Endpoints

The plugin provides REST API endpoints for fetching Figma data:

GET /wp-json/figmoove/v1/files – Get all configured files
GET /wp-json/figmoove/v1/files/{file_id}/pages – Get pages from a file
GET /wp-json/figmoove/v1/files/{file_id}/layers – Get layers from a file
GET /wp-json/figmoove/v1/files/{file_id}/content – Get content from a node
GET /wp-json/figmoove/v1/files/{file_id}/component-status – Get component status
POST /wp-json/figmoove/v1/sync-content – Manually sync content

Content Synchronization

The plugin automatically tracks block usages and synchronizes content:

Block usages are saved to the database when posts are saved
Content is cached to improve performance
A scheduled task runs hourly to sync content from Figma
Manual sync can be triggered via the REST API

Database Tables

The plugin creates two database tables:

wp_figmoove_files – Stores Figma file configurations
wp_figmoove_block_usages – Tracks block usages for synchronization

Requirements

WordPress 5.0+
PHP 7.4+
Active internet connection for Figma API access

Development

File Structure

figmoove/
├── figmoove.php # Main plugin file
├── includes/
│ ├── class-database.php # Database operations
│ ├── class-admin.php # Admin interface
│ ├── class-api.php # API functionality
│ └── class-blocks.php # Block registration
├── assets/
│ ├── js/
│ │ ├── blocks.js # Block editor JavaScript
│ │ └── frontend.js # Frontend JavaScript
│ └── css/
│ ├── blocks.css # Frontend styles
│ └── blocks-editor.css # Editor styles
└── README.md
`

WordPress Coding Standards

This plugin follows WordPress coding standards and best practices:

Proper sanitization and validation
Security nonces for form submissions
Prepared statements for database queries
Proper enqueuing of scripts and styles
Internationalization support

Support

For support and feature requests, please contact the plugin author.

License

This plugin is licensed under the GPL v2 or later.

FigMoove – Content for Figma