[WordPress] 外掛分享： FigMoove – Content for Figma

內容簡介

### 摘要
- 這是一個 WordPress 外掛，可讓您將 Figma 內容整合到您的網站中。管理多個 Figma 檔案，顯示特定層中的內容，以及追蹤元件狀態。
- 這個外掛並非與 Figma, Inc. 有關聯、贊助或贊同。"Figma" 是 Figma, Inc. 的商標。該外掛是一個獨立的第三方工具，通過 Figma API 進行整合。
- 該外掛需要使用由 Figma, Inc. 提供的第三方服務 Figma API。

### 問題與答案
1. 這個外掛是用來做什麼用途的？
- Figma 是一個合作設計工具。該外掛使用 Figma API 從您的 Figma 檔案中取得設計內容（文字、圖片、顏色和版面資訊），並在您的 WordPress 網站上顯示它。

2. 使用這個外掛時，會發送什麼資料以及何時會發送？
- 當您設置 Figma 檔案時，您的 Figma 檔案 ID 和個人存取權杖將在您的 WordPress 資料庫中進行本地儲存。
- 在顯示內容時，外掛會使用您的存取權杖向 Figma API 發送請求，以取得以下內容：
- 檔案元數據（檔案名稱、頁面、層）
- 設計內容（文字內容、顏色、圖片）
- 元件狀態信息
- 資料只會在以下情況下發送：
- 您手動同步內容
- 自動每小時同步運行時
- 訪客查看包含 Figma 內容區塊的頁面

3. 如何增加 Figma 檔案？
- 在 WordPress 管理員中移至 Figma 檔案 > 新增
- 填入必要信息：
- 名稱：您的 Figma 檔案的友好名稱
- Figma 檔案 ID：從您的 Figma URL 中取得（在 /file/ 之後的部分）
- 存取權杖：您的 Figma 個人存取權杖
- 描述：檔案的可選描述

這裡是您要的繁體中文摘要和相應問題與答案的 HTML 列表。希望對您有所幫助！如果有其他問題，請隨時告訴我。

外掛標籤

開發者團隊

📦 歷史版本下載

trunk1.0.20

原文外掛簡介

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.

延伸相關外掛