本記事は、KDDIアジャイル開発センター Engineer & Designer Advent Calendar 2022の22日目の記事です。
本記事で扱う内容
プロジェクトで商品を購入するウェブサイトを作成することになり、新たな取り組みとしてFigmaとAmplify Studioを連携させたウェブ開発をチームで試みることになりました。
作業する中で、Amplify Studioと連携が可能なFigmaファイルの作成で苦戦した点が多かったため、本記事ではAmplify Studioと連携できるFigmaファイルを作成する上で知っておいた方がよかったと思う点、特にコンポーネントの設計ルールを中心にまとめています。
※ FigmaとAmplify Studioを連携させる手順は省略しています。ご興味のある方は、Amplifyのチュートリアルをご覧ください。
連携の全体像とチームでの役割分担
Figmaでコンポーネントとプロトタイプを作成し、Amplify Studioと同期させ、Reactへコード変換を行いました。最初にFigmaとAmplify Studioが同期できる環境を開発チームに整えていただき、その後のFigma作成とAmplify Studioの同期はデザインチームで、Reactへのコード変換以降は開発チームで役割分担しました。
デザインチームの具体的な作業としては、Figmaでコンポーネントを新規作成または変更を行った際に、Amplify Studioに同期させて、エラーが出ない状態にすること、Amplify Studio上とFigma上のコンポーネントの表示に差異が生じないようにFigmaファイルを修正することを行いました。
連携用Figmaファイルの概要
AWS Amplifyが用意しているFigmaファイル（AWS Amplify UI Kit）とプラグイン（AWS Amplify Theme Editor）を使用してデザインファイルを作成しました。
Figmaファイル（AWS Amplify UI Kit）は以下のページで構成されています。
- README：各ページの説明、コンポーネントの作り方などを記載
- Primitives：ボタンや入力フォームなど、デフォルトのコンポーネントが用意されているページ
- My Components：自作のコンポーネントを置くページ（ここで作成したコンポーネントがAmplify Studioに同期される）
- Examples：サンプルのウェブUIのモックアップ
プロジェクトでは、上記に新しくページを追加してプロトタイプを作成しました。
プラグイン（AWS Amplify Theme Editor）は、カラー定義のために利用しました。このプラグインを使用することで、カラーやフォントサイズの定義もAmplify Studioに同期できるようになり、便利でした。
コンポーネントの設計方法
コンポーネント作成に取り組んでいた2022年9〜11月時点の情報をもとに記載しています。
コンポーネントの設計ルールについてはREADMEやウェブのチュートリアルにも記載がありますが、作業してみてから気づいた点もあったため、作業前に押さえておきたかった点をまとめました。
ルール
-
Auto Layoutを使って作成する
オブジェクトの間隔や余白は、右側のパネルから設定する -
コンポーネント名はパスカルケースで命名（1文字目と各構成語の先頭を大文字にする）
例）NG：product_card → OK：ProductCard -
各オブジェクトの名前を半角英字に変更（数字やスペース、アンダーバー等は不可）
テキストのオブジェクト名も変更が必要
命名規則は、適切にReact変換するために外せないポイント - コンポーネント名は一意にする（重複NG）
-
Variantを使うときは、レイヤー構成（オブジェクト名も含む）を統一する
一つでも異なる箇所があるとエラーが出て連携できない
例）商品カードでVariant機能を利用して①通常時 / ②売り切れ時を表現する場合、「売り切れ」のオブジェクトを非表示や削除すると、レイヤー構造が①と②で不一致となるため、エラーが発生する
→ 解決例：不透明度を0%にして非表示にする
できないこと
以下はFigma上では実現できたのですが、React変換はされなかったものです。（開発の方々にコードに直で書いてもらうことで対応いただきました。）
-
フォントの定義
AWS Amplify Theme Editorでカラーやテキストサイズの定義ができたのですが、フォントの設定はできませんでした。 -
テキストのプロパティが一部反映できない
Figma上では縦横の中央揃えの指定や、テキストエリアを文字数に自動調整するよう設定ができましたが、Amplify Studioには反映されませんでした。テキストエリアを自動調整可能にした場合は、文字が正しく収まっているか確認が必要です。 -
Variant以外のComponent Propertiesは反映されない
BooleanやInstance swapで用意したパターンは切り替えができないようでした。
所感
コンポーネントの設計ルールを理解するまでは開発チームの方と試行錯誤を重ねましたが、ルールがわかっていくにつれてスムーズに連携できるようになりました。
Auto Layoutを使った余白や配置の設定については、HTMLやCSSの知識があると比較的納得感のあるルールだと思いました。また、うまく設計できれば、レスポンシブデザインに対応したコンポーネントが作成できるため、サイズ変更や画面サイズに合わせた微調整が簡単に行えました。
しかし一方で、Figma上で設定できたものが必ずしも忠実にAmplify Studioに同期されるとは限らないとわかったため、上記でまとめた「ルール」や「できないこと」が参考になれば幸いです。
また、開発者の視点でも連携してよかった点とイマイチだった点を聞いてみたいと思いました。
開発者の視点も踏まえて、FigmaとAmplify Studioを連携させたシステム開発に適したプロジェクトが何か判断したいです。
参考
Figma初心者だった私が今回のプロジェクトに取り組む上で参考にしたサイトです。
Auto Layoutの使い方
FigmaのCommunityで公開されているFigmaファイルです。
コンポーネントの考え方
Variantの考え方