figma-to-compose-componentlisted

Use when building or recreating a Jetpack Compose component from a Figma design in any Android project. Fire when a figma.com/design or figma.com/file link is paired with "build this", "implement this component", "recreate this in Compose", or a ticket references a Figma node id. Covers retrieving the node without flooding context, checking the design system before writing anything new, and binding to theme tokens rather than raw values. Skip when the project ships its own design-system skill — that one knows its component catalogue.
damson/hard-won-skills · ★ 1 · Web & Frontend · score 67

Install: claude install-skill damson/hard-won-skills

# Build a Compose component from a Figma design ## Procedure ### 1. Read the node, not the file A Figma *file* fetch returns megabytes of unrelated frames. Extract the node id from the URL (`…/design/<fileKey>/<name>?node-id=<id>`) and request that node alone, through whichever Figma integration the environment offers. Ask for, in this order, stopping when you have enough: 1. **Node metadata** — layout, spacing, fills, typography, component name. 2. **The variant set**, if the node is one of several states. 3. **One rendered image** of the node, for visual comparison only. If no Figma integration is available, ask for an export of the node's properties or a screenshot with the spacing/colour values stated. Do not infer hex values from a screenshot — a compressed image does not carry exact colour. ### 2. Search the design system before writing anything Find the module the theme lives in — that is the design system, whatever it is called: ```bash grep -rln "MaterialTheme\|ProvideTextStyle\|lightColorScheme" --include="*.kt" . \ | sed 's|/src/.*||' | sort -u grep -rn "<ComponentName>\|<SimilarConcept>" --include="*.kt" <that-module>/ ``` Take that output as the answer rather than pre-judging it: - **Several lines** → the design system is the shared UI module among them, not a feature module. - **One line** → the project is single-module. The theme lives in the app, so the app *is* the design system; read `<that-module>/` as the app module for the rest of this skill.