Phase 2

[mirabelledoiron]

Figma Plugin

Steps:

1. Scaffold the plugin -- Create apps/figma-plugin/ in the monorepo. Use Figma's Plugin API with a React UI panel (manifest.json, code.ts for sandbox, ui.tsx for the iframe)
2. Bundle the core engine -- Import @colorx/core via the pnpm workspace. Configure esbuild or Vite to bundle it into the plugin's sandbox code
3. Build the plugin UI -- Color picker input, generate button, light/dark theme preview with swatches (reuse the same component patterns from the web app)
4. Inject tokens as Figma variables -- Use the Figma Variables API (figma.variables.createVariable()) to create a variable collection with all 15 tokens for both light and dark modes
5. Inject as local paint styles -- Fallback for teams not using variables yet. Create ColorX/primary, ColorX/text, etc. as solid paint styles via figma.createPaintStyle()
6. Add contrast audit panel -- Read existing color styles from the current Figma file (figma.getLocalPaintStyles()), run them through checkContrast and checkAPCA, display pass/fail results in the UI
7. Add CVD simulation preview -- Show simulated swatches for each deficiency type in the plugin panel so designers can check before handoff
8. Test with real design files -- Load the plugin in Figma dev mode, test with various files, verify variables sync correctly
9. Write plugin README -- Installation, usage, screenshots
10. Publish to Figma Community -- Submit via Figma's plugin publishing flow