--- name: figma-to-compose description: Generate Android Jetpack Compose UI from Figma using Figma Desktop MCP (get_metadata, get_variable_defs, create_design_system_rules, get_design_context, get_screenshot). Automatically detect icon/vector nodes in Figma, obtain SVG/path data when available, and convert icons to Android VectorDrawable XML using Android MCP Toolkit (convert-svg-to-android-drawable). Use when the user shares a Figma link/node-id and asks to implement UI in Compose from Figma. --- # Figma → Jetpack Compose (MCP) + Auto Icon → VectorDrawable XML ## Tools available ### Figma Desktop MCP - get_design_context - get_screenshot - get_variable_defs - get_metadata - create_design_system_rules - get_figjam ### Android MCP Toolkit - convert-svg-to-android-drawable - read-adb-logcat - get-pid-by-package - get-current-activity - fetch-crash-stacktrace - check-anr-state - clear-logcat-buffer - estimate-text-length-difference --- ## What this Skill does 1) Reads Figma frame/component via MCP and generates matching Jetpack Compose code (Material3 default). 2) Extracts tokens (colors/typography/spacing/radius) from Figma variables when present. 3) **Automatically** detects icon/vector nodes from the Figma node tree and: - tries to obtain SVG/path data via MCP, - then **automatically converts** to Android VectorDrawable XML via `convert-svg-to-android-drawable`, - falls back to requesting a batch SVG export only if SVG content is not obtainable. --- ## Inputs (ask only if missing) - Figma link OR node-id (preferred: exact frame/component link) - Which frame/component if multiple exist - Defaults (unless user specifies otherwise): - Jetpack Compose + Material3 - Output: screen + components + theme tokens (Color/Type/Dimens) - Previews: at least 1–2 @Preview --- ## Main workflow: Figma → Compose ### Step 1 — Resolve target - Use `get_metadata` to confirm the exact frame/component node-id(s). - If link includes multiple frames, select based on name or ask user which one. ### Step 2 — Pull tokens & design system rules - Use `get_variable_defs` to extract: - colors (including opacity) - typography (font family, weight, size, line height, letter spacing) - spacing/radius if variables exist - Use `create_design_system_rules` to generate mapping rules: - variables → MaterialTheme.colorScheme / typography - spacing scale → Dimens - component conventions (buttons/textfields/cards) if present ### Step 3 — Generate UI structure - Use `get_design_context` for selected node(s) to obtain layout/component context. - Translate to idiomatic Compose: - Vertical auto layout → Column - Horizontal auto layout → Row - Overlap/absolute → Box (use align/offset only when necessary) - Gap → Arrangement.spacedBy(x.dp) - Padding → Modifier.padding(...) - Fill → fillMaxWidth()/fillMaxSize() - Radius → RoundedCornerShape(r.dp) - Stroke → Modifier.border(...) - Shadow → Modifier.shadow(...) (note: blur may be approximate) - Text styles → MaterialTheme.typography or custom TextStyle tokens - Detect repeated patterns and extract reusable composables. ### Step 4 — Auto icon pipeline (MANDATORY, automatic) Run this automatically while processing the selected screen/component. Do not wait for the user to request it. #### 4.1 Detect icon/vector candidates - Use `get_metadata` to traverse the node tree under the target frame/component. - Mark nodes as icon candidates if any of: - Node type is VECTOR or BOOLEAN_OPERATION - Name matches typical icon naming: `icon*`, `ic_*`, `*Icon`, `*Glyph` - Small, square-ish dimensions (approx 12–48dp equivalent) and uses strokes/fills typical of icons - Component instances that represent icons (by name/metadata) #### 4.2 Obtain SVG/path data (best-effort) For each icon node-id: - Call `get_design_context` for that icon node-id and attempt to extract SVG/path data from the returned context. - Optionally call `get_screenshot` for preview/verification. #### 4.3 Convert to VectorDrawable XML (automatic) If SVG/path data is available: - Call `convert-svg-to-android-drawable` - Output file: `res/drawable/ic_.xml` #### 4.4 Fallback when SVG is not obtainable from MCP output If SVG content cannot be extracted from MCP context: - Produce a section **Assets Needed (SVG export)** containing, for each missing icon: - normalized icon name - node-id - a small preview screenshot (use `get_screenshot`) - Ask the user once (batch) to export those nodes as SVG from Figma and paste/upload SVGs. - Upon receiving SVGs, immediately run `convert-svg-to-android-drawable` and output XML files. ### Step 5 — Visual validation (recommended) - Use `get_screenshot` for the main screen/frame. - Validate major layout/spacing/typography. Call out mismatch risks: - blur/shadow not 1:1 - missing fonts/assets - images needing export (PNG/WebP) ### Step 6 — Output deliverables Generate: - `ui/screen/Screen.kt` - screen composable + state surface + previews - `ui/screen/Components.kt` - reusable components - `ui/theme/Color.kt` - `ui/theme/Type.kt` - `ui/theme/Dimens.kt` (when spacing/radius repeated) - `res/drawable/ic_.xml` for every detected icon converted Always include: - **Generated VectorDrawables** list (file names) - **Mapping Notes**: - token mapping summary - assumptions/approximations - assets required and where to place them --- ## Naming conventions ### Icon names - Normalize to lowercase snake: spaces/dashes → underscore - Strip common prefixes: `icon_`, `ic_` (but keep semantic name) - Examples: - `ic_home_filled` → `ic_home_filled.xml` - `Icon/Search` → `ic_search.xml` - `home-24` → `ic_home_24.xml` --- ## Optional debugging helpers (only when user asks) If user reports crash/ANR after integrating: - For crash: `fetch-crash-stacktrace` + `read-adb-logcat` - For ANR: `check-anr-state` - For noisy logs: `clear-logcat-buffer` Return: root cause + actionable fixes + minimal patches. --- ## Examples that should trigger this Skill - "Implement màn hình này theo Figma bằng Jetpack Compose: " - "Build component set này (Button variants) theo Figma" - "Làm UI theo Figma và tự generate VectorDrawable cho icons"