[android] figmaのデザインのandroidへの落とし方

1. figmaから以下の情報を取得する
🎨 色（Color）
#RRGGBB または RGBA
不透明度（Opacity）
グラデーション

🔤 文字（Typography）
フォント名
サイズ（sp）
行間（lineHeight）
Font Weight

🔲 余白（Spacing）
padding / margin（dp）
コンポーネントの width/height

📐 角丸（Corner Radius）
dp

⭐ シャドウ（Elevation / shadow）
shadow の offset / blur / color

2.ザイントークンとして Android へ落とし込む
Figma の色・文字・spacing 情報をそのままコードに書くのではなく、
“テーマ” として一箇所にまとめる のがプロのやり方

Jetpack Compose のテーマ例（Theme.kt）

object AppColors {
    val Primary = Color(0xFF4CAF50)
    val Secondary = Color(0xFF03A9F4)
    val TextPrimary = Color(0xFF333333)
}

object AppTypography {
    val Title = TextStyle(
        fontSize = 20.sp,
        fontWeight = FontWeight.Bold
    )
    val Body = TextStyle(
        fontSize = 14.sp
    )
}

object AppRadius {
    val Medium = 12.dp
}

object AppSpacing {
    val Small = 8.dp
    val Medium = 16.dp
}

3.Compose の UI 実装（Figma → Compose への変換）
Figma のボタンを例にします。

🎨 Figma のボタン例
幅：200
高さ：48
角丸：12
背景色：#4CAF50

テキスト：白、16sp、Medium

@Composable
fun AppButton(text: String, onClick: () -> Unit) {
    Box(
        modifier = Modifier
            .size(width = 200.dp, height = 48.dp)
            .background(AppColors.Primary, shape = RoundedCornerShape(AppRadius.Medium))
            .clickable { onClick() },
        contentAlignment = Alignment.Center
    ) {
        Text(text, style = TextStyle(color = Color.White, fontSize = 16.sp))
    }
}

これをcomposeとして使う

<Button
    android:layout_width="200dp"
    android:layout_height="48dp"
    android:background="@drawable/rounded_button"
    android:text="Button"
    android:textSize="16sp"
    android:textColor="@android:color/white" />