claude

figma-react

Full Figma-to-React lifecycle — design analysis, component implementation, visual sync, and Code Connect mapping. Requires Figma MCP.

121 on GitHubby BitoviMITupdated 2 months ago
/

Plugin figma-react from marketplace bitovi-ai-enablement in bitovi/ai-enablement-prompts. Commands read from the repo's manifest — 1 month ago.

What it installs

Skills (4)

  • figma-component-sync

    Check a React component against its Figma design source and identify differences. Use when reviewing component implementations, syncing designs, auditing visual accuracy, or updating components to match new Figma designs.

  • figma-connect-component

    Generate Figma Code Connect mappings that link React components to their Figma counterparts. Use when a component exists in code and needs a Code Connect file so Figma shows real code snippets in Dev Mode. Also triggers on phrases like "connect this component to Figma", "generate Code Connect", "pub

  • figma-design-react

    Design React components from Figma files. Use when given a Figma URL to analyze a design and propose React component architecture, props API, and variant handling. Outputs design analysis and suggested API - does not build components.

  • figma-implement-component

    Implement React components from Figma designs. Use after figma-design-react has analyzed the design. Delegates to create-react-modlet for folder structure, then adds Figma-specific implementation, stories for each variant, Code Connect mapping, and README with design context.

View source on GitHub

More from bitovi/ai-enablement-prompts

All 9 plugins →

figma-from-code

claude

Rebuild a Figma design system from a running web app's codebase

11 skills · hooks

121

code

claude

Baseline planning, spec, and codebase understanding skills. Works with any codebase, any stack.

9 skills

121

playwright

claude

Playwright-based QA workflows — E2E testing, debugging, responsive verification, visual diffing, and pixel-perfect orchestration. Requires Playwright MCP.

8 skills

121

implement-workflow

claude

End-to-end feature implementation workflow: design, build, test, self-review via a code-reviewer agent, then prep a PR.

4 skills · 1 agent

121

react

claude

Core React component development patterns — modlet structure, component extraction, registry, reuse, and validation.

5 skills

121

react-mock

claude

Mock data and data model patterns for Zod-based React apps — sample data generation, data model management, and feature workflows.

3 skills

121

Maintain figma-react?

This page updates itself from your repo. Add the badge to your README, or get it Featured to pin it above the organic results with a followed link to your site.

claude & codex plugins9 plugins