[v3] Figma Plugin Companion Tool

[GarthDB]

Overview

Build a lightweight Figma plugin for quick edits by designers, complementing the web-based tool.

Context

Web tool is primary authoring environment. Figma plugin provides quick access for designers already working in Figma, with read-only or export-based workflow.

Goals

1. Lightweight editing in Figma
2. Export changes to web tool
3. Designer-friendly UX
4. No data trapped in Figma

Tasks

• Set up Figma plugin project

  • Create plugin manifest
  • Set up Lit + Spectrum Web Components (reuse POC patterns)
  • Configure Webpack build
  • Add TypeScript support

• Port POC patterns

  • Reuse localEnumForm component for enum editing
  • Adapt table layout for component list
  • Implement three-tab layout (Options, Anatomy, Mapping)

• Implement read-only mode

  • Load schemas from GitHub API
  • Display current mappings
  • Show validation results
  • Browse components and properties

• Build quick edit features

  • Edit single component mappings
  • Add/remove anatomy parts
  • Assign size profiles
  • Basic validation

• Add export functionality

  • Export changes as JSON
  • Generate GitHub Gist or file download
  • Link to web tool for import
  • Clear instructions for PR creation

• Add web tool integration

  • Import exported changes in web tool
  • Validate imported data
  • Merge with existing changes
  • Create PR from imported changes

• Test with designers

  • User testing sessions
  • Gather feedback
  • Iterate on UX
  • Document workflow

Success Criteria

• Designers can make quick edits in Figma
• Changes export cleanly to web tool
• No data trapped in Figma (always exportable)
• Positive feedback from designer user testing

Dependencies

• [Epic] v1 MVP: Basic Mapping Editor Tool #648 (Web tool as primary)
• Figma Plugin API
• POC code to adapt

Estimated Effort

3-4 weeks

Related

• Figma Plugin POC Analysis
• POC repository: ~/Spectrum/Component-Options-Editor