【画像付き】Figmaでプロトタイプを作る
導入
Figmaとは、デザインコラボレーションツールです。 現在デザインツールの中で世界中で最も支持されている。
Figmaをプロトタイプの制作に使ってみる。
Figmaを利用するメリット
・ほとんどの機能が無料。
・クロスプラットフォームを採用しているため、WindowsやMac、ブラウザ
かを問わずチームで同じデザインを編集できる。
・作業効率が良い。オートレイアウト機能や部品の集まりをコンポーネントとして、
共通化して様々なデザインを使い回せる。
プロトタイプとは
プロトタイプとは、製品やサービスのアイデアを具体化するための初期段階の試作品や模型のこと。設計者や開発者がアイデアの妥当性や実現可能性を検証するために使用される。
プロトタイプは、様々な形で作成される。例えば、製品の外観や機能を再現した3Dプリントモデル、ソフトウェアのデモ版、ユーザーインターフェイスのワイヤーフレーム、あるいは手書きのスケッチなどがある。製品やサービスの開発過程で何度も改訂されることがあり、最終的な製品やサービスの形態を決定する上で重要な役割を果たす。
Figmaを使えば、デザインに簡単な動きをつけれるので、プロトタイプ作成にうってつけだ。
プロトタイプの作成
では、Figmaで実際にプロトタイプを作成してみよう。
今回は、最近見かけるようになったラーメンの自動販売機のプロトタイプを作成する。
大きく分けてデザインファイルとFigJamボードの2つの機能があるが、
今回はデザインファイルを使う。
左上に様々なメニューがある。
その中でも一番重要なのはフレームの概念。
リージョンツールからフレームを選択する。
フレームは画面上のものを乗せていく土台のような形で使える。
今回は豚骨ラーメンと醤油ラーメンを注文できるプロトタイプの画面をつくる。
まず、フレームに名前をつける。今回はメニューとした。
今度はボタンをはっていく。ボタンは四角形のテキストでつくる。
シェイプツールを使って長方形を張る。
テキストに豚骨ラーメンと書く。
テキストを中央に揃えるとデザインの微調整ができる。
続いては醤油ラーメンをつくる。
同じような設定を使いまわしたいときは、
Ctrlボタンを押しながら、四角形とテキストの両方を選択する。
Ctrlまたは右クリックでコピーし、貼り付けで同じデザインを作成できる。
メニューの背景が寂しかったら、先ほどのフレームの属性から色を変えられる。
メニューの上に2つのラーメンが乗るように並べて、
新しいタブもしくはプレビューを選択すると、
今回は何も動きが入っていないので、何も起きない。
続いて、ホットコーヒーの中の画面をつくっていく。
まず、フレームを準備する。
フレーム名を商品購入とする。
この画面には商品名と金額、購入するボタンをつくる。
これで商品購入画面ができた。
続いて、醤油ラーメンも同様につくる。この時に使うのがコンポーネント。
商品購入全体のフレームを選択して、右クリック。コンポーネントの作成を選ぶ。
左側のレイヤーを見ると、マークが変わって紫色になっている。
このコンポーネントを使って、豚骨ラーメンの購入画面を作成してみる。
情報を整理するためにページを使う。
ページの横にある+を押すと、新たなページが作成される。
それぞれプロトタイプとコンポーネント管理に名前を変える。
先ほど作ったコンポーネントをコンポーネント管理のページに移動させてみる。
右クリックして、ページ移動からコンポーネント管理を選択する。
これで、コンポーネントの移動ができた。
先ほどの、醤油ラーメンと豚骨ラーメンの部品を使い回したい場合は、リソースのメニューを開く。
ここに先ほどのコンポーネントが存在している。これをクリックすると、共通の部品を使い回せる。
これをもとに醤油ラーメンの購入ボタンを作成する。
次に、画面に動きをつけてみる。
最初はメニュー画面が表示され、豚骨ラーメンを選んだら豚骨ラーメンの購入画面へ、
醤油ラーメンを選んだら醤油ラーメンの購入画面が表示されるような動きをつけていく。
メニュー画面を選んで、右側にあるプロトタイプからフローの開始点を開く。
続いて、メニューから豚骨ラーメン画面への遷移を作成する。
豚骨ラーメンの+ボタンをクリックし、遷移先に紐付けする。
こうして、画面遷移の制御ができた。
画面を切り替える時のアニメーションの種類にはいくつかあるので切り替えることも可能。
醤油ラーメンにも同じ画面遷移の制御をしていく。
また、メインメニューに戻る制御もつけていく。
これで、簡単な画面制御ができた。
実際の画面の動きを見るのは、右上のプロトタイプビューから。
このURLは右上の共有から他者に共有できる。
最終的な成果物は以下のリンクにあるので参考にしてみてください。
Discussion