デザインからコードへの再現も容易！ プロトタイピングツール「Figma」の開発フェーズ別便利機能【要件定義・画面設計編】

共同作業に最適なプロトタイピングツール「Figma」入門　第3回

　ブラウザ上で簡単に使用でき、共同作業が便利なプロトタイピングツール「Figma」。前回は要件定義フェーズ・画面設計フェーズでの活用方法を紹介しました。第3回ではデザインフェーズ、開発フェーズでの利用方法を紹介します。

デザインフェーズ

　Figmaの真骨頂とも言えるデザイン制作のフェーズ。機能を使いこなせばレスポンシブを考慮した画面作成、アニメーション作成、プロトタイプ作成など、再現性が高いUIデザインを制作できるため、デザイナーはしっかり習熟したいところです。再現性が高いデザインを作成すれば、エンジニアがFigmaを見るだけでデザインの詳細まで確認と判断が可能になるということに繋がります。

レスポンシブの作り方

デザインガイド・コンポーネント作成の重要性

　UI制作を進める際、最初にカラーやフォントなどのスタイル、デザインガイド、アトミックデザインに則ったコンポーネントの形成が重要です。これを最初にFigmaで用意しておくことで、ページデザインを作成する際にコンポーネントを組み合わせ、カラーやフォントをスタイルから選択して設定することでデザイン制作を効率的に進められるようになります。

　アトミックデザインとは、最小単位素材から作成して、それらを段階的に組み合わせ、徐々に単位を大きくしてUIを設計する手法です。プロダクトの統一性を上げ、画面を作るまでの工程を効率的に進めることができます。

アトミックデザイン

　あらかじめ組織で汎用的に使用するデザインガイドやコンポーネントをライブラリ化し、効率性をさらに高めることもできます。既存のFigmaファイルをライブラリにして他のファイルへ読み込むことができるので、新規プロジェクトでもカラーやフォントのスタイル、コンポーネントを利用することができます。もちろんライブラリが更新された場合は紐付いているファイルへ反映させることができますし、反映しないことも選択可能です。

　この準備を進めつつ画面デザインを作成していきますが、この段階で実装時のアニメーションもイメージしながら、デザインを作成していきます。アニメーションはエンジニア工数のリスクになりやすいため、株式会社ブリューアスでは、一部のエンジニアをデザインフェーズで招待しておき、デザイナーが実装したいアニメーションイメージを予めデザインのそばにメモ書きや参考となるURLを添え、エンジニアが開発工数の予測をできるようにしています。

メモの活用

プロトタイプの作成

　ワイヤーフレームやデザインを作成した後は、プロトタイプで操作感を確かめます。Figmaのプロトタイプ作成画面は、画面遷移前と後の画面を直感的につなぐだけで遷移設定が完了し、遷移のトリガーとアニメーション設定もできます。完成形に近い挙動を再現できるため、開発工数の判断、承認者との合意も手早く行うことができます。作成したプロトタイプの閲覧方法はURLを発行して共有するだけなので、簡単に承認者やエンジニアに閲覧してもらえます。

　Figmaでのプロトタイプの利点として、編集した内容が閲覧中のプロトタイプにリアルタイムで反映されることが挙げられます。承認者とプレゼンターが確認・議論をしながら、生じた変更点を作業者が即反映させる方法に適しています。

　また、1つのファイルの中で、複数のプロトタイプのフローを作成することができる点も便利です。遷移案を複数作成しておくと、プレビュー閲覧中でもすぐに別案へスイッチできます。

プロトタイプの閲覧

アニメーションの作成

　今ではローディングアニメーション、ボタンやフォームなどに対する細かいインタラクションなど、Webサイトでもアプリでも多くの箇所にアニメーションを施すことでユーザービリティの向上が図られています。Figmaでもアニメーション作成までできるので、After Effectsなどの別の動画制作アプリケーションでアニメーション作成をする必要が減り、デザイナーの負担が大幅に軽くなるというメリットが生まれました。

　アニメーションの再生はプロトタイプで閲覧とリアルタイム編集ができるので、「このアニメーションを少し早くしてほしい」などの要望をすぐに反映して確認することができます。