FigMoove – Content for Figma

Description

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

1. Navigate to Figma Files > Add New in your WordPress admin
2. 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

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

Using the Blocks

Figma Content Block

1. Add a new “Figma Content” block to your post/page
2. 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)
3. The block will display a preview in the editor and render the content on the frontend

Figma Component Status Block

1. Add a new “Figma Component Status” block to your post/page
2. In the block settings:
   • Select a Figma file from the dropdown
   • Configure what information to display (last modified, version, thumbnail)
3. 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:

1. wp_figmoove_files – Stores Figma file configurations
2. 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.