Slide 1
Slide 1 text
チーム内のUIデザインをめぐる
コミュニケーションを円滑にする Figmaの機能
メディア・プラットフォーム事業部 齋藤 歩
Variants
Slide 2
Slide 2 text
お話すること
チーム内のUIデザインをめぐるコミュニケーションとは？
Figmaの機能「Variants」をご紹介
Variantsをコミュニケーションに当てはめてみる
Slide 3
Slide 3 text
お話すること
チーム内のUIデザインをめぐるコミュニケーションとは？
Figmaの機能「Variants」をご紹介
Variantsをコミュニケーションに当てはめてみる
Slide 4
Slide 4 text
UIデザインを対象としたコミュニケーションは多い
デザイン確認 コーディング
ビジネス デザイナー エンジニア
👨💼 👨🎨 👨💻
UIデザインを対象としたコミュニケーションの概略図
Slide 5
Slide 5 text
Button
Button
「ボタン」の状態をめぐるコミュニケーションの一例
UIデザインは状態の変化が付きもの
カーソルを合わせたらどうなる？
非活性の場合はどうなる？
こうなります！
こうなります！
👨💼
👨💻
👨🎨
👨🎨
ビジネス
エンジニア
デザイナー
デザイナー
Slide 6
Slide 6 text
UIデザインをめぐるコミュニケーションを円滑にしたい
Slide 7
Slide 7 text
Figmaの機能「Variants」が有用！
Slide 8
Slide 8 text
お話すること
チーム内のUIデザインをめぐるコミュニケーションとは？
Figmaの機能「Variants」をご紹介
Variantsをコミュニケーションに当てはめてみる
Slide 9
Slide 9 text
Variantsをひとことで言うと
コンポーネントを
単一のコンテナにグループ化して
変数を持たせることができる機能
Slide 10
Slide 10 text
Button
Button
Button
Button
Button
Button
❖ Blue Button ❖ Red Button ❖ Green Button
❖ Hovered Blue Button ❖ Hovered Red Button ❖ Hovered Green Button
「ボタン」の状態ごとにバラバラのコンポーネント
Slide 11
Slide 11 text
Button
Button
Button
Button
Button
Button
Variantsを利用してコンポーネントを単一コンテナにグループ化
Slide 12
Slide 12 text
Button
Variantsにより変数（プロパティ）を持ったコンポーネント
Color Property
Text
Boolean
isHover
Label
Slide 13
Slide 13 text
Button
Variantsにより変数（プロパティ）を持ったコンポーネント
Color Property
Text
Boolean
isHover
Label
Slide 14
Slide 14 text
使用された箇所で状態の変更が容易にできる
実際のFigmaの画面
Slide 15
Slide 15 text
お話すること
チーム内のUIデザインをめぐるコミュニケーションとは？
Figmaの機能「Variants」をご紹介
Variantsをコミュニケーションに当てはめてみる
Slide 16
Slide 16 text
デザイン確認 コーディング
ビジネス デザイナー エンジニア
👨💼 👨🎨 👨💻
UIデザインを対象としたコミュニケーションの概略図
Slide 17
Slide 17 text
👨💻
非活性の状態の
デザインは？
非ログイン時の
デザインは？
Slide 18
Slide 18 text
事前に状態を考慮してVariantsを設定することで…
Slide 19
Slide 19 text
Figma内であちらこちらせずにその場で状態を確認できる
実際のFigmaの画面
Slide 20
Slide 20 text
{children}
ボタン
フロント側のPropsと一致させることにより効率化
React コンポーネントの一例
開発体験向上のための一工夫
や 相当の部分にはVariantsのプロパティ名に「↪」を付ける
Slide 21
Slide 21 text
さいごに
他にもFigmaにはチーム開発で
有用な機能が沢山あります！
ぜひチェックしてみてください！