What is the main purpose of the FigJam Plugin skill?

It assists developers in building, debugging, and maintaining FigJam plugins, specifically those that render diagrams from structured data source like YAML.

How does the skill handle diagram data validation?

The skill utilizes @figram/core to validate incoming DSL (nodes array) or IR (nodes object) and normalizes it before rendering to the canvas.

What is the recommended build workflow for this skill?

The skill is designed to work with Bun. You can run 'bun run build' within the plugin package and then import the manifest.json into the Figma desktop app.

Does this skill support real-time previewing?

Yes, it includes architectural patterns for a WebSocket bridge between a local CLI and the ui.ts file to enable live updates.

Can I use browser APIs like fetch or window in code.ts?

No, code.ts runs in the Figma main thread which does not support browser APIs. You must use ui.ts for WebSockets or DOM-related tasks and communicate via postMessage.

FigJam Plugin Development

Name: FigJam Plugin Development
Author: 7nohe

by7nohe

•

デザインツール

Streamlines the development and maintenance of FigJam plugins for rendering architecture diagrams from YAML definitions.

概要

The FigJam Plugin skill provides a specialized framework for building and debugging FigJam extensions that transform structured data into visual architecture diagrams. It simplifies the complexities of Figma's dual-thread architecture by providing clear patterns for canvas rendering in the main thread and UI/WebSocket management in the browser thread. This skill is particularly useful for developers using the Figram repository to automate design workflows, ensuring proper DSL validation and efficient rendering of complex nodes directly onto the FigJam canvas.

主な機能

Automated build and manifest configuration with Bun
Real-time WebSocket communication patterns for CLI integration
1 GitHub stars
YAML-driven DSL and IR validation via @figram/core
Standardized canvas rendering logic for service icons and nodes
Dual-thread architecture management for Main and UI threads

ユースケース

Debugging canvas rendering errors and plugin UI interactions in FigJam
Building real-time design tool integrations using WebSockets and the Figma API
Generating complex architecture diagrams in FigJam from YAML source files

概要

主な機能

Automated build and manifest configuration with Bun
Real-time WebSocket communication patterns for CLI integration
1 GitHub stars
YAML-driven DSL and IR validation via @figram/core
Standardized canvas rendering logic for service icons and nodes
Dual-thread architecture management for Main and UI threads

ユースケース

Debugging canvas rendering errors and plugin UI interactions in FigJam
Building real-time design tool integrations using WebSockets and the Figma API
Generating complex architecture diagrams in FigJam from YAML source files