Category: Figma

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" />

Figmaにおける アクセシビリティ（Accessibility） とは、
「誰でも使いやすいデザインをつくるための配慮を、Figma上で設計段階から行うこと」
を指します。

🎯 アクセシビリティとは
アクセシビリティ（Accessibility）は、
障害のある人・高齢者・色覚特性のある人などを含めた すべてのユーザーが使いやすいデザイン にすることを目的としています。
Figmaでは主に ビジュアルと操作の面 でそれを支援します。

🧭 Figmaで配慮すべき主なアクセシビリティ項目
1. 色のコントラスト
テキストと背景の明度差を確保します（WCAG 2.1 準拠）。
通常の文字：コントラスト比 4.5:1以上
大きな文字（18pt以上または太字14pt以上）：3:1以上

🔧 Figmaプラグインで確認可能：
“Contrast”
“Able”
“Stark”（有名なアクセシビリティチェックプラグイン）

2. 色だけに頼らない情報設計
色の変化（例：赤＝エラー）だけで意味を伝えない。
例）アイコン（⚠️）やテキスト（“Error”）も併用。
状態（有効・無効・警告など）を 形やラベル でも伝える。

3. フォントサイズ・行間
小さすぎる文字は避ける（最低 12〜14pt 推奨）。
行間（line height）は1.4〜1.6倍程度を目安にする。
Auto Layout を使うと、テキストが拡大されても崩れにくくなります。

4. キーボード操作・フォーカスの可視化（UI設計段階で）
クリックだけでなく、Tabキー操作 で要素を辿れる設計を意識。
フォーカス時に**明確なハイライト（アウトラインや影）**をデザインしておく。

5. 音声リーダー（スクリーンリーダー）対応を意識
Figma上では直接読み上げ設定はできませんが、
ボタンやリンクに 明確なテキストラベル を付ける
意味のあるコンポーネント名 を使う（例：「btn_submit」ではなく「Button / Primary」など）
開発者が読み上げラベルを設定しやすくなります。

6. レスポンシブ対応・レイアウトの柔軟性
Auto Layout と Constraints を活用し、
画面サイズが変わっても情報が欠けないようにする。
テキスト量が増えてもボタンが崩れない設計に。

7. テキストコントラスト・シミュレーション
🔧 プラグイン “Sim Daltonism” や “Contrast” を使うと、
色覚特性（赤緑・青黄など）での見え方を確認可能。

🧩 Figmaでの実践例
ボタンコンポーネント に対して：
ホバー・フォーカス・無効状態をそれぞれVariantで定義
コントラスト比を4.5:1以上に調整
テキストラベルを付け、アイコンだけのボタンは避ける
フォーム では：
入力欄のエラー時に、赤色＋メッセージ＋アイコンで通知
必須項目には「*」とテキスト補足を併用

💡 まとめ
項目 目的 Figmaでの対応方法
コントラスト 見やすくする Contrastプラグインなどで確認
色依存を避ける 意味を正確に伝える 形・テキストも併用
テキストサイズ 読みやすく 最低12〜14pt、line-height 1.5倍
フォーカス可視化 操作性を確保 Hover/Focus variantで表現
名前付け スクリーンリーダー補助 意味のあるレイヤー・コンポ名に

デザインを作る → 管理する → 共有する → 修正する → 開発に渡す
という 一連の作業の流れ（やり方のルール）

Figma運用ワークフローの全体像（超シンプル版）
フェーズ 目的 Figma上で行うこと
1. 設計 構造や動線を決める ワイヤーフレーム、画面遷移の整理
2. デザイン制作 UIを作る コンポーネント作成、スタイル適用
3. デザインシステム管理 統一性を保つ Color / Text / Components / Icons の共通化
4. プロトタイプ 画面遷移や動きを再現 Prototype でリンク & アニメーション設定
5. 開発へのハンドオフ エンジニアへの受け渡し Inspect / Export / コンポーネント仕様共有
6. 運用・改善 修正やアップデート コンポーネント更新 → 自動反映

構成例
/ 00_Foundation ← 色 / 文字 / グリッド / アイコン
/ 01_Components ← ボタン / 入力欄 / ナビ / 共通パーツ
/ 02_Patterns ← カード / リスト / モーダルなど UIブロック
/ 03_Screens ← 実際の画面デザイン
/ 04_Prototype ← 動きと遷移確認
/ 99_Archive ← 古いもの、破棄予定

UX設計 ワイヤーフレーム、情報設計、遷移図
UIデザイナー コンポーネント作成、スタイル管理、画面デザイン
エンジニア InspectでCSS確認、コンポーネント仕様反映
PM / クライアント プレビューで確認、コメントでレビュー

プラグインにIconifyを追加する

これで使える様になる
おおお、すげえ

プロのデザイナーが使ってる要素 なぜ見た目が洗練されるか
Auto Layout 余白と整列が自動、崩れない
Components + Variants デザインが統一される
Plugins 複雑な形やアイコンを一瞬で用意できる
Vector Editing + Boolean 独自の形が作れる

プロは素人ではなぐらいの洗練されたものを作りますね。

🧩 1️⃣ ハンドオフ前の準備（5分）
まず、開発者が見やすいように整理します：
各画面（Frame）にわかりやすい名前をつける
例：Login, Home, Profile
不要なレイヤーやテスト用要素を削除
コンポーネントやスタイルを整備（色・文字スタイルを登録済みにしておく）
💡Tip：命名規則を統一（例：btn/primary, text/titleなど）

🧭 2️⃣ 「Inspect（検査）」タブを開く（10分）
任意のオブジェクト（ボタン・テキストなど）を選択
右サイドバーのタブを切り替え：
Design
Prototype
👉 Inspect（検査）

すると以下の情報が自動で表示されます👇

項目 内容
Position / Size X, Y 座標・幅・高さ
Typography フォント、サイズ、行間、文字間、太さ
Color カラーコード（HEX / RGBA）
Border / Radius / Shadow 枠線や角丸、影など
CSS / iOS / Android コード 各環境での実装用コード

例：

button {
  background-color: #FAF0E6;
  border-radius: 8px;
  font-family: "Inter";
  font-size: 16px;
  padding: 12px 20px;
}

開発者はここを直接コピーできます ✨

🖼 3️⃣ 画像やアイコンの「書き出し」設定（10分）
書き出し対象の設定
アイコンや画像レイヤーを選択
右パネル下部の Export セクション → + をクリック
出力形式を選択：
PNG（汎用的）
SVG（アイコンなどベクター）
JPG（写真など）
PDF（印刷・資料用）

書き出しサイズの調整
倍率を設定できます：
1x（標準）
2x（Retina対応）
3x（高解像度）

💡Tip：iOSやAndroidアプリ用では 1x / 2x / 3x をまとめて出すことが多いです。

🪄 4️⃣ 開発者との共有（10分）
開発者モードで共有（最も便利！）
右上の 「Dev Mode（ アイコン）」 をクリック
リンク共有（右上の「Share」ボタン）
開発者にリンクを渡すだけでOK！

👀 開発者は：
Inspect情報を閲覧できる
画像・SVGをダウンロードできる
コードスニペットをコピーできる
※ 開発者は 無料Figmaアカウントでも閲覧可能（編集は不可）

🧾 5️⃣ 書き出しファイルの確認（10分）
選択したレイヤーを Command + Shift + E（Mac）または Ctrl + Shift + E（Win）
書き出し先を選択して保存
💡書き出し後にファイル名を自動で付けたい場合は：
レイヤー名を「icon/home」などにしておくと、書き出し時にフォルダ構造風に出力されます

⚙️ 6️⃣ チェックポイント（5分）
✅ Inspectで正しくスタイル情報が見えるか
✅ Export設定が正しく（PNG / SVG）されているか
✅ 開発者がDev Modeリンクでアクセスできるか

多少慣れてきました。

grid, constraint, autolayoutはcssやbootstrapでもよく出てくる概念ですね。
colorとかそういうのをもう少し勉強したい気がするが、まぁいいか。

① 画面（Frame）を2つ作る
② ボタンを置く
③ Prototypeモードに切り替える
④ 画面をつなぐ

Designの中にフレームが一つだけでしたが、複数フレームを置いて、Prototypeモードで繋げるのですね。なるほど！

1. Motion / Interaction の概念理解
Figmaでの「モーション」「インタラクション」は以下の2つを組み合わせて作る
– Variant（状態）: デザイン上の“見た目の変化”, Default / Hover / Pressed など
– Prototype（遷移・動き）: 状態や画面を“動的につなぐ”, クリックで次の画面へ、ホバーで色変化など

prototypeのプレビューでoverlayすると、画面が切り替わる

おおおおおおおお、すげぇええええええええ　
ちょっと世界観変わったぜ！