Figma to Android Native Code
Convert Figma design information into production-ready Android native XML + Kotlin code with 1:1 visual fidelity.
When to Use
Trigger phrases:
- "figma to android"
- "convert figma design"
- "design to android code"
- "figma node json"
- "figma 转 android"
- "figma 生成代码"
- "设计稿转代码"
- "还原设计稿"
- "figma 还原"
Do NOT use when:
- Target is Jetpack Compose (use a Compose-specific workflow instead)
- Target is Flutter, React Native, or other cross-platform frameworks
- User only needs design review without code generation
Hard Constraints
- Android native View system ONLY — XML layouts + Kotlin + ViewBinding.
- Jetpack Compose is strictly forbidden — no
@Composable, Modifier, Material3 Compose, or Preview.
- No pseudo-code — output must be complete, runnable, and maintainable.
- All output code must be directly usable in an Android Studio project.
Conversion Workflow
When the user provides Figma data (node JSON / layer description / annotation / screenshot), follow this exact order:
Step 1 — Page Structure Analysis
Identify:
- Overall page type (list page, detail page, form, dashboard, etc.)
- Component hierarchy and nesting
- Scrollable regions vs fixed regions (headers, footers, floating buttons)
- Repeating items that need RecyclerView
- Reusable modules that should be extracted as
<include> sub-layouts
Step 2 — Output Directory Structure
List all files that will be generated:
res/layout/activity_xxx.xml
res/layout/item_xxx.xml (if RecyclerView items exist)
res/layout/layout_xxx_header.xml (if reusable modules exist)
res/drawable/bg_xxx.xml
res/drawable/shape_xxx.xml
res/values/colors.xml (additions only)
res/values/dimens.xml (additions only)
res/values/strings.xml (additions only)
XxxActivity.kt / XxxFragment.kt
XxxAdapter.kt (if RecyclerView exists)
XxxItemBean.kt (data class if needed)
Step 3 — Generate Code (Strict Output Order)
Output code blocks in this exact sequence:
- XML layout — main page layout
- RecyclerView item XML — if lists exist
- Sub-layout XML — reusable
<include> modules
- Drawable XML — shapes, selectors, backgrounds, gradients
- Resource values — additions to
colors.xml, dimens.xml, strings.xml
- Kotlin code — Activity/Fragment, Adapter/ViewHolder, data classes
Every code block MUST include its target file path as a header comment, e.g.:
// res/layout/activity_home.xml
Step 4 — Risk Notes
Output a "还原风险点与注意事项" (Reproduction Risks & Notes) section listing:
- Visual effects that could not be fully inferred from the design data
- Font, icon, or image assets that need to be provided separately
- Interactions that may require additional business logic
- Screen adaptation considerations
Layout Rules
| Rule |
Detail |
| Root layout |
Prefer ConstraintLayout; use LinearLayout, FrameLayout, NestedScrollView, RecyclerView, ViewPager2 only when clearly more appropriate |
| Positioning |
Constraints, margins, padding, gravity, layout_weight, guideline, barrier — never absolute coordinates |
| Units |
dp for dimensions, sp for text sizes — never raw px |
| Resource extraction |
All colors → colors.xml, all dimensions → dimens.xml, all shapes → drawable/ — no inline hardcoding |
| Lists |
Always use RecyclerView with separate item_xxx.xml — never flatten repeated items into the page XML |
| Scrolling |
Correctly distinguish ScrollView / NestedScrollView / RecyclerView responsibilities; avoid nested scrolling conflicts |
| Complex interactions |
Sticky headers, floating elements, tabs, collapsing toolbars, fade effects — use native Android solutions (CoordinatorLayout, AppBarLayout, TabLayout, etc.) |
Naming Conventions
| Category |
Pattern |
Examples |
| View IDs |
lowercase_underscore |
tv_title, iv_avatar, btn_submit, rv_list, layout_header |
| Colors |
color_ prefix |
color_primary, color_text_main, color_divider |
| Dimensions |
dp_ / text_ / radius_ prefix |
dp_4, dp_8, text_14sp, radius_8 |
| Drawables |
descriptive prefix |
bg_card_white_radius_12, shape_btn_primary, ic_arrow_right |
Code Style
- Kotlin first, Java only if user explicitly requires it.
- ViewBinding — no DataBinding, no Compose, no
findViewById.
- Keep layout nesting shallow; use
ConstraintLayout to flatten hierarchy.
- Add brief comments only for complex constraint relationships.
- Ensure basic responsive behavior across common Android screen sizes.
- All
import statements must be included — never write "remaining code omitted".
Supplementary Rules for List Pages
When the page is primarily a list or long-scrolling content:
- Use
NestedScrollView + content container, or a standalone RecyclerView — avoid double-scrolling.
- List items must be in a separate
item_xxx.xml.
- Form inputs use
EditText / TextInputLayout.
- Top bar, filter bar, bottom button bar — extract as reusable
<include> modules.
- Prioritize clear structure and reusable resources.
Handling Insufficient Input
If the provided Figma data is incomplete:
- Generate the best possible native implementation based on available information.
- Mark uncertain areas with
// TODO: Figma data insufficient — confirm [specific detail] comments.
- List all missing information at the end of the output.
- Never ask "do you need me to generate code?" — always generate directly.
Checklist
Before marking work complete:
1---2name: figma-to-android3description: Use when converting Figma design data (node JSON, layer descriptions, annotation data, or screenshot descriptions) into production-ready Android native View XML and Kotlin code. Trigger phrases: figma to android, figma 转 android, figma 生成代码, 设计稿转代码, design to android code, figma node json, convert figma, 还原设计稿.4---56# Figma to Android Native Code78> Convert Figma design information into production-ready Android native XML + Kotlin code with 1:1 visual fidelity.910## When to Use1112**Trigger phrases:**13- "figma to android"14- "convert figma design"15- "design to android code"16- "figma node json"17- "figma 转 android"18- "figma 生成代码"19- "设计稿转代码"20- "还原设计稿"21- "figma 还原"2223**Do NOT use when:**24- Target is Jetpack Compose (use a Compose-specific workflow instead)25- Target is Flutter, React Native, or other cross-platform frameworks26- User only needs design review without code generation2728## Hard Constraints29301. **Android native View system ONLY** — XML layouts + Kotlin + ViewBinding.312. **Jetpack Compose is strictly forbidden** — no `@Composable`, `Modifier`, `Material3 Compose`, or `Preview`.323. **No pseudo-code** — output must be complete, runnable, and maintainable.334. All output code must be directly usable in an Android Studio project.3435## Conversion Workflow3637When the user provides Figma data (node JSON / layer description / annotation / screenshot), follow this exact order:3839### Step 1 — Page Structure Analysis4041Identify:42- Overall page type (list page, detail page, form, dashboard, etc.)43- Component hierarchy and nesting44- Scrollable regions vs fixed regions (headers, footers, floating buttons)45- Repeating items that need RecyclerView46- Reusable modules that should be extracted as `<include>` sub-layouts4748### Step 2 — Output Directory Structure4950List all files that will be generated:5152```53res/layout/activity_xxx.xml54res/layout/item_xxx.xml (if RecyclerView items exist)55res/layout/layout_xxx_header.xml (if reusable modules exist)56res/drawable/bg_xxx.xml57res/drawable/shape_xxx.xml58res/values/colors.xml (additions only)59res/values/dimens.xml (additions only)60res/values/strings.xml (additions only)61XxxActivity.kt / XxxFragment.kt62XxxAdapter.kt (if RecyclerView exists)63XxxItemBean.kt (data class if needed)64```6566### Step 3 — Generate Code (Strict Output Order)6768Output code blocks in this exact sequence:69701. **XML layout** — main page layout712. **RecyclerView item XML** — if lists exist723. **Sub-layout XML** — reusable `<include>` modules734. **Drawable XML** — shapes, selectors, backgrounds, gradients745. **Resource values** — additions to `colors.xml`, `dimens.xml`, `strings.xml`756. **Kotlin code** — Activity/Fragment, Adapter/ViewHolder, data classes7677Every code block MUST include its target file path as a header comment, e.g.:78```79// res/layout/activity_home.xml80```8182### Step 4 — Risk Notes8384Output a "还原风险点与注意事项" (Reproduction Risks & Notes) section listing:85- Visual effects that could not be fully inferred from the design data86- Font, icon, or image assets that need to be provided separately87- Interactions that may require additional business logic88- Screen adaptation considerations8990## Layout Rules9192| Rule | Detail |93|------|--------|94| Root layout | Prefer `ConstraintLayout`; use `LinearLayout`, `FrameLayout`, `NestedScrollView`, `RecyclerView`, `ViewPager2` only when clearly more appropriate |95| Positioning | Constraints, margins, padding, gravity, `layout_weight`, guideline, barrier — **never** absolute coordinates |96| Units | `dp` for dimensions, `sp` for text sizes — **never** raw `px` |97| Resource extraction | All colors → `colors.xml`, all dimensions → `dimens.xml`, all shapes → `drawable/` — **no** inline hardcoding |98| Lists | Always use `RecyclerView` with separate `item_xxx.xml` — **never** flatten repeated items into the page XML |99| Scrolling | Correctly distinguish `ScrollView` / `NestedScrollView` / `RecyclerView` responsibilities; avoid nested scrolling conflicts |100| Complex interactions | Sticky headers, floating elements, tabs, collapsing toolbars, fade effects — use native Android solutions (CoordinatorLayout, AppBarLayout, TabLayout, etc.) |101102## Naming Conventions103104| Category | Pattern | Examples |105|----------|---------|----------|106| View IDs | lowercase_underscore | `tv_title`, `iv_avatar`, `btn_submit`, `rv_list`, `layout_header` |107| Colors | `color_` prefix | `color_primary`, `color_text_main`, `color_divider` |108| Dimensions | `dp_` / `text_` / `radius_` prefix | `dp_4`, `dp_8`, `text_14sp`, `radius_8` |109| Drawables | descriptive prefix | `bg_card_white_radius_12`, `shape_btn_primary`, `ic_arrow_right` |110111## Code Style112113- **Kotlin first**, Java only if user explicitly requires it.114- **ViewBinding** — no DataBinding, no Compose, no `findViewById`.115- Keep layout nesting shallow; use `ConstraintLayout` to flatten hierarchy.116- Add brief comments only for complex constraint relationships.117- Ensure basic responsive behavior across common Android screen sizes.118- All `import` statements must be included — never write "remaining code omitted".119120## Supplementary Rules for List Pages121122When the page is primarily a list or long-scrolling content:1231241. Use `NestedScrollView` + content container, or a standalone `RecyclerView` — avoid double-scrolling.1252. List items must be in a separate `item_xxx.xml`.1263. Form inputs use `EditText` / `TextInputLayout`.1274. Top bar, filter bar, bottom button bar — extract as reusable `<include>` modules.1285. Prioritize clear structure and reusable resources.129130## Handling Insufficient Input131132If the provided Figma data is incomplete:1331. Generate the best possible native implementation based on available information.1342. Mark uncertain areas with `// TODO: Figma data insufficient — confirm [specific detail]` comments.1353. List all missing information at the end of the output.1364. **Never** ask "do you need me to generate code?" — always generate directly.137138## Checklist139140Before marking work complete:141- [ ] All code blocks include file path headers142- [ ] No Compose code anywhere in output143- [ ] All colors and dimensions extracted to resource files144- [ ] RecyclerView used for all list/repeating content145- [ ] ViewBinding used in all Kotlin code146- [ ] All imports included, no code omitted147- [ ] Risk notes section present
aihip