【Figma】MUIを使ってWebアプリのUIデザインをやってみた！～プロトタイプ編～

はじめに

こんにちは！
AXLBIT株式会社の中村（@ax-nakamura）です。
今回初めてFigmaを使ってワイヤーフレームとプロトタイプ作成に取り組んだので備忘録としてその時調べたことを残します。
前回はワイヤーフレーム編を書いたので、今回はプロトタイプ編です！

プロトタイプとは

プロトタイプとは、
画面のUIデザインの完成形を確認でき、さらにボタン押下やページ遷移もシミュレーションできる状態 のことです。
Figmaのプロトタイプ機能を使うと、特定のボタンを押したときに別のページに遷移する動きを設定できます。

MUIとは

MaterialUI¹の略称で、オープンソースのReactUIライブラリの一つで、Googleのデザイン標準MaterialDesignとして使われていることも有名です²。様々な用途に対応したコンポーネントやボタンが用意されており、それらを全てFigmaデータとして自分の作業ページ上でそのまま使うことができます。
また、デザインから開発まで同じキットを使って行うことができ、シームレスな実装が期待されます。
今回Reactでのフロントエンド実装を視野に入れていたため、コンポーネントを使い回せるようにMUIを使いました。
自分で1からコンポーネント作成するより断然早かったです！

使い方

1.FigmaファイルをこちらからDLする
2.自分のプロジェクト一覧画面でインポートする
3.任意のコンポーネントをコピーして使用したいプロジェクト内で使う

プロトタイプの作成方法

基本手順

ワイヤーフレームを参考にパーツを配置する

作成したワイヤーフレーム内のテキスト、テキストボックス、ボタンの配置に合わせてMUIコンポーネントを配置する
※ボタンの色変更、フォント変更はMUI有料版の使用が必要

テキストの内容や色を決める

テキストの内容や色は自由に変更することができます。色変更の際にはコンポーネントの色サンプルを使用すると統一感が出ます。

▲MUIをインポートした状態でパレットボタンを押すと、「ライブラリ」に登録された色が入っている

ページ遷移を指定する

作成する全てのページのパーツ配置ができたら、プロトタイプモードを使用して、ページ遷移を指定します。

①「デザイン」モードから「プロトタイプ」モードに切り替える

②押下したいボタンの上にカーソルをホバーする

▲ホバーすると＋マークがボタンに出てきます

③クリックしたままドラッグして遷移先のページに矢印をつなげる

④インタラクションを決める
　トリガー…何をきっかけに遷移するか。ボタンクリックでページを変えたいときは「クリック時」にする
　アクション…トリガーで指定した行動が起こったときどう動くか。ページを変えたいときは「次に移動」にする
　移動先…矢印の先が遷移先だが、上手く繋げられないときはこちらで選ぶこともできる
　アニメーション…遷移の動き方について指定ができる。即時は押下と同時に切り替わる。ディゾルブにすると瞬きのような遷移の切り変わりになる。好みで変更する。

⑤完成！画面右上の再生ボタンから作成したプロトタイプを動かせるのでプロトタイプ指定したボタンを押してみる。


▲検索ボタンを押すと次のページに切り替わりました

おわりに

Figmaでデザインワイヤーフレームからプロトタイプまで作ることができました。
今回初めて取り組んだため制作に2週間ほどかかりましたが、UIキットのように便利なツールやほかにもプラグインがたくさんあり、慣れればもっと早くプロトタイプまで作れそうだと思いました！引き続き勉強して表現の幅を増やしていきたいです。
最後までお読みいただきありがとうございます。
皆さんもぜひFigma触ってみてください！

参考文献

1. Material UI https://mui.com/material-ui/v ↩

2. Material UI Overview https://mui.com/material-ui/getting-started/ ↩