本記事は、All About Group（株式会社オールアバウト） Advent Calendar 2022 21日目の投稿です。
デザインツールであるFigmaについての理解と、私たちのプロジェクトでWebサイト構築にどのように活用しようとしているかを書きます。
まだFigmaの活用を始めたばかりなので、今後の活用方法の変化については続編を書きたいと思います。
Figmaについて
Figma社が提供するデザインツールで、2016年にリリースされて以降人気を順調に伸ばしており、現在はトップのシェアを誇っています。1
引用: 2022 Design Tools Survey
Figmaでは、Figmaと連携が可能なホワイトボードツールのFigJamもありますが、ここではFigmaのみ触れます。
特徴
Figmaは機能が豊富ですが、デザインツールとして以下の点において特に優れています。
- ブラウザ上で操作可能で、複数人との共同編集ができる
- コンポーネント機能による部品の流用ができる
- プロトタイピング機能によるアニメーションや画面遷移の表現ができる
- 世界中のユーザーが自作した豊富なプラグインを使用できる
- 機能的な制限はあるものの無料から使用できる
構造
Figmaは以下のような構造で構成されています。
引用: Figma Helpページ - Get started
| 構造 | 説明 | Figma公式のベストプラクティス |
|---|---|---|
| Team | デザインを共有するチームメンバー | Web、iOS、Androidなど開発グループ単位で分ける |
| Project | チーム内作業スペース（フォルダのイメージ） | ログイン、登録などユーザーフローごとに分ける |
| File | Project内の作業スペース（ファイルのイメージ） | 快適に使える程度のファイル容量を意識して分ける |
| Page | File内でデザイン作成スペース（ファイル内のシートのイメージ） | 記載なし |
デザインはPageの中に作成していきます。デザインにあたって特に重要な要素を挙げます。
- フレーム
- あらゆるオブジェクトの入れ物にあたり、フレームの中にテキストや図形のオブジェクトを組み合わせてデザインを作成します。
- コンポーネント
- オブジェクトをまとめたテンプレートです。ボタンやテーブルなどをコンポーネントとして作成し、Projectの中で流用ができます。
なぜFigmaを使用するか
私たちのプロジェクトでは、ベトナムのラボチームが実装を担当しています。
現在は、ビジネスチームがスプレッドシートで画面の大まかなイメージと仕様を書いてブリッジSEに伝えるスタイルをとっていますが、スプレッドシートではイメージを的確に表現しきれず、仕様を文字で表現することが多くなります。
スプレッドシートでの画面設計イメージ
引用：IPA 発注者ビューガイドライン
仕様の伝達が文字中心になることで、ブリッジSEの翻訳コストや認識齟齬の発生が増えるリスクがあります。
そこで、仕様を明確にして、仕様確認の時間や認識齟齬による実装の手戻りを軽減し開発スピード上げるため、UIの表現に強いFigmaを活用することにしました。
ビジネスチームが直接ブリッジSEとFigma上でやり取りをすることが理想的ではありますが、多忙なビジネスチームの負担を増やさないよう、以下のような流れでビジネスチームとブリッジSEの間にシステム部メンバー(筆者)が入り、仕様を伝達します。
Figmaの活用方法
上述のとおり、私たちのプロジェクトでは、細かなUIデザインというよりも、機能仕様を認識齟齬なく伝えることを主な目的として使います。
構成
チームはWebサイト開発の1チームのみで、画面設計を1Project 1Fileに集約し、Fileの中に複数Pageを作ります。
プロジェクトでは複数のドメインでWebサイトを作成するため、ドメインごとに全ての画面設計を1Page内で作成します。また、画面遷移図としてPageを作成します。他にも独立させたい設計などがあればPageを追加します。
File内の構成
- Page - ドメインA画面設計
- UI
- 機能仕様（日本語）
- 機能仕様（ベトナム語）
- Page - ドメインB画面設計
- UI
- 機能仕様（日本語）
- 機能仕様（ベトナム語）
- Page - 画面遷移図
- etc
Figma公式の、フローごとにProjectを分けるというベストプラクティスからはズレますが、プロトタイピングとして全ての画面遷移を表現したい(プロトタイピング機能ではFileを跨いだ画面遷移が表現できない)ため、まずこの方法で進め、無理があれば分割を検討します。
プラグインの活用
Figmaのメリットとして、非常に多くのユーザーが自作したプラグインを公開しています。
たとえば、テーブルを1から作成するにはそれなりに労力がいるので、↓などのプラグインに含まれているコンポーネントを流用します。
設計上の注意点
継続的に運用を続けていくために、ルールで縛りすぎないようにします。
以下の点を守りながら進めていきます。
- 変更のあった仕様は必ず反映する
- 運用が難しくならないよう、計算ロジックなどデザインでわからない仕様を記載し、デザインを見て分かる仕様は記載しない
ライセンス上の注意点
意図せずにEditorを増やさないため、Editor権限の必要ないユーザーのroleは「Viewer-restricted」にしておきます。Editorが増えると課金対象となります。
なお、月額払いの場合、支払い期日の3日前になると、このままだとどのくらいの請求になるのか通知が来るので、そこで意図せずEditor権限が増えていないか確認することもできます。
今後の活用方針
Figmaをまだ十分に使いこなせておらず理解も浅いので、まずは使いながら理解を進めていくことと、Figmaを活用した仕様伝達の運用を軌道に乗せてから、活用方法の改善を重ねていきたいと思います。
-
2022年9月に競合ツールのAdobeXDを持つAdobe社が、Figmaを買収することを発表しました。今後AdobeXDはFigmaに統合・吸収されていくものと思われます。
https://blog.adobe.com/jp/publish/2022/09/16/cc-intent-to-acquire-figma ↩