figma-and-lit_skill

Overview

This skill teaches how to create a Figma plugin using Lit web components, covering project setup, component development, WebAssembly (WASM) integration, and building the final plugin package for Figma Desktop. It walks through configuring TypeScript and Webpack, creating a LitElement UI, wiring plugin code to Figma, and optionally adding AssemblyScript-based WASM for heavy computations. The result is a reproducible workflow for building interactive, performant Figma plugins with modern web tooling.

How this skill works

You set up a Node + TypeScript project with Webpack that bundles a Lit web component UI and a Figma plugin code entry. The Lit component renders the plugin UI and communicates with the plugin controller via postMessage. The plugin controller (code.ts) handles messages, creates Figma nodes, and manages viewport/selection. For heavy computation, an AssemblyScript WASM module is built, inlined into the UI bundle, and invoked from the Lit component before sending data to Figma.

When to use it

• You need a polished, component-driven UI for a Figma plugin.
• You want to keep plugin UI code modular and testable using Lit web components.
• The plugin requires CPU-heavy logic that benefits from WASM acceleration.
• You need a reproducible build pipeline for dev (watch) and production (inline UI).
• You want to ship a local plugin that integrates with Figma Desktop quickly.

Best practices

• Keep UI and plugin controller responsibilities separate: UI posts messages, code.ts manipulates the Figma document.
• Use TypeScript typings (@figma/plugin-typings) to avoid runtime errors when manipulating nodes.
• Inline small WASM binaries into the UI bundle for Figma compatibility; use AssemblyScript for simple numeric workloads.
• Use webpack dev watch during iteration and build production bundles before zipping the plugin folder.
• Validate postMessage payload shapes and handle errors before calling figma APIs to avoid plugin crashes.

Example use cases

• A rectangle generator UI (count input) that creates and focuses multiple rectangles on the canvas.
• A measurement or layout tool that computes placements in WASM and applies nodes programmatically.
• A batch-image or asset processor where heavy pixel/math work runs in WASM and results are sent back to Figma.
• A component library manager UI built with Lit that inserts symbols or components into the file.