チーム内のUIデザインのコミュニケーションを円滑にするFigmaの機能「Variants」をおさらい！

Transcript

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