| name | figma-to-code |
| description | Translate Figma designs into production-ready frontend code and design-system rules. Inspired by OpenAI Figma implementation skills and adapted for Codex v4.1. Use when implementing a Figma design, extracting design tokens, matching visual fidelity, or converting design specs to components. |
Figma To Code
Workflow
- Inspect the target app's existing component system, tokens, and styling approach.
- Read Figma structure: frames, variants, auto-layout, constraints, typography, colors, effects, and component names.
- Map Figma components to existing code components first.
- Extract tokens only when the project lacks an equivalent.
- Implement layout with responsive constraints, not fixed screenshot positioning.
- Verify visual fidelity with browser screenshots when possible.
Fidelity Checks
- Typography: font family, size, weight, line height, spacing.
- Layout: spacing, alignment, constraints, density, breakpoints.
- Components: states, variants, disabled, selected, focus, hover.
- Assets: icons, images, masks, gradients, shadows.
- Behavior: scrolling, overflow, dialogs, menus, inputs.
Engineering Rules
- Do not create duplicate components when an existing design-system component fits.
- Do not hardcode one-off values if tokens exist.
- Do not copy Figma layer names into code blindly.
- Preserve accessibility semantics even if the design omits them.
Output
State mapping from Figma elements to code components, new tokens/components, fidelity checks, and verification result.
