android-design-to-code

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Android Design to Code (The Bridge) 📐🌉

Android 设计转代码（桥梁工具）📐🌉

Professional strategies for translating high-fidelity design specifications into clean, semantic, and pixel-perfect Jetpack Compose code.

将高保真设计规范转换为简洁、语义化且像素级完美的Jetpack Compose代码的专业策略。

⚡ When to Use

⚡ 使用场景

UI Handover: Implementing a new screen from Figma/Sketch.
Micro-Copy: Translating exact text styles and case formatting.
Grid Alignment: Replicating specific spacing and layout grids.
Component Building: Creating atoms/molecules from design symbols.
Pixel Perfection: Verifying accuracy through developer tools.

UI交接: 基于Figma/Sketch实现新界面。
微文案: 转换精确的文本样式和大小写格式。
网格对齐: 还原特定的间距和布局网格。
组件构建: 从设计符号创建原子/分子级组件。
像素级完美: 通过开发者工具验证准确性。

🏗️ The 4 Principles of High-Fidelity Translation

🏗️ 高保真转换的4项原则

Semantic Match: Use MaterialTheme tokens (Primary, BodyLarge) instead of raw hex/pixel values.
Structural Accuracy: Replicate Flexbox (Row, Column) and Constraint systems as intended.
Interaction Fidelity: Add the correct hover, press, and click ripple effects.
Responsive Layouts: Handle how the design should shrink or grow beyond the mock's dimensions.

语义匹配: 使用MaterialTheme令牌（Primary、BodyLarge）而非原始十六进制/像素值。
结构准确: 按设计意图还原Flexbox（Row、Column）和约束系统。
交互保真: 添加正确的悬停、按压和点击波纹效果。
响应式布局: 处理设计在超出原型尺寸时的收缩或拉伸逻辑。

🛠️ Translation Workflow

🛠️ 转换工作流程

1. Spacing & Grids (The 8dp Rule)

1. 间距与网格（8dp规则）

Rule: Most modern Android designs use an 8dp grid.
Use
```
8.dp
```
,
```
16.dp
```
,
```
24.dp
```
, etc.

In Compose:

Spacer(Modifier.height(16.dp))

PaddingValues(16.dp)

规则: 大多数现代Android设计采用8dp网格。
使用
```
8.dp
```
、
```
16.dp
```
、
```
24.dp
```
等单位。

在Compose中：

Spacer(Modifier.height(16.dp))

或

PaddingValues(16.dp)

。

2. Colors & Typography

2. 颜色与排版

Don't just copy the
```
0xFFAABBCC
```
. Check if it's already in the
```
colorScheme.primary
```
or
```
surface
```
.
Use the M3 Typography scale (HeadlineLarge, BodyMedium) to match the designer's intent.

不要直接复制
```
0xFFAABBCC
```
这类值，先检查它是否已存在于
```
colorScheme.primary
```
或
```
surface
```
中。
使用M3排版刻度（HeadlineLarge、BodyMedium）来匹配设计师的意图。

3. Shadows & Elevation

3. 阴影与海拔

Designs often have custom "Soft Shadows".

Rule: In Android, use

Modifier.shadow()

with a high

elevation

for M2, or use

MaterialTheme.colorScheme.surfaceColorAtElevation()

for modern M3 designs.

设计中常包含自定义“柔和阴影”。

规则: 在Android中，M2使用带高

elevation

参数的

Modifier.shadow()

，现代M3设计则使用

MaterialTheme.colorScheme.surfaceColorAtElevation()

。

🚀 Speeding Up Implementation

🚀 加速实现

Figma Plugins: Use "Relay" or "Copy as Compose" plugins to generate base code.
Lottie/Rive: Export complex animations as JSON or RIV files for pixel-perfect motion.
Vector Assets: Export as SVG or VectorDrawable (AVD) for sharp rendering.

Figma插件: 使用“Relay”或“Copy as Compose”插件生成基础代码。
Lottie/Rive: 将复杂动画导出为JSON或RIV文件，实现像素级完美的动效。
矢量资源: 导出为SVG或VectorDrawable（AVD）以获得清晰的渲染效果。

📐 Interaction Best Practices

📐 交互最佳实践

Ripple Effects: Ensure all
```
clickable
```
modifiers have the standard ripple or custom
```
Indication
```
.
States: Implement all design states (Enabled, Disabled, Pressed, Hovered).
Haptics: Add
```
LocalHapticFeedback
```
for tactile confirmation on success/error.

波纹效果: 确保所有
```
clickable
```
修饰符都带有标准波纹或自定义
```
Indication
```
。
状态: 实现所有设计状态（启用、禁用、按压、悬停）。
触觉反馈: 添加
```
LocalHapticFeedback
```
，在成功/错误时提供触觉确认。

🧪 Verification & Checklist

🧪 验证与检查清单

The "Overlay" Test: Use a semi-transparent screen capture of the design overlaid on the running app.
Layout Inspector: Verify all margins, paddings, and alignment match the specs.
Dynamic Font Scales: Does the design survive a 200% font size increase?
Localization: Does the layout break with long German or Russian strings?

“叠加”测试: 将设计的半透明截图叠加在运行中的应用上进行对比。
布局检查器: 验证所有边距、内边距和对齐方式是否符合规范。
动态字体缩放: 设计能否承受200%的字体大小增长？
本地化: 布局在遇到长德语或俄语字符串时是否会崩溃？

📜 Key Terms for Designers

📜 面向设计师的关键术语

dp: Density-independent pixels (The standard).
sp: Scalable pixels (For text only).
Material 3: The framework we use to build.
Composable: The UI function we are creating.

dp: 密度无关像素（标准单位）。
sp: 可缩放像素（仅用于文本）。
Material 3: 我们使用的开发框架。
Composable: 我们创建的UI函数。

🔗 Related Resources

🔗 相关资源

Android Adaptive Layouts
Design System (M3) Skill
Accessibility Skill

Android自适应布局
设计系统（M3）技能
无障碍技能