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

•

Design Tools

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.

Key Features

01Automated build and manifest configuration with Bun

02Real-time WebSocket communication patterns for CLI integration

031 GitHub stars

04YAML-driven DSL and IR validation via @figram/core

05Standardized canvas rendering logic for service icons and nodes

06Dual-thread architecture management for Main and UI threads

Use Cases

01Debugging canvas rendering errors and plugin UI interactions in FigJam

02Building real-time design tool integrations using WebSockets and the Figma API

03Generating complex architecture diagrams in FigJam from YAML source files

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add 7nohe/figram figjam-plugin

For use in Claude.ai and ChatGPT

Download Skill