※これだけ知ってれば最低限Figmaをそれっぽく使える！というレベルの内容ですので高度な内容は一切ありません
#前置き
先日ワイヤーフレームをExcelで作ろうとしたら、社内で冷たい目で見られ、最新のツールを使うことを決意しました。
もうあんな蔑んだ眼差しには耐えられない…！
逆に最新ツールを使いこなしてイキり倒してやるんや…！
せっかくなので新し目のを使ってみたいという事でSketchは除外。
候補はXDとFigmaだったのですが、特に深い理由も無く無料で使える事を確認してFigmaを選択。
ちなみに有料版は料金形態が少しややこしいみたい。
・Figmaのプランを理解せずに契約すると多分困るので解説
今回はお試しだし無料で使えるなら問題なし。
という事でとりあえずこの辺を参考にしつつ起動。
・Sketch はもういらない？ デザインツール Figma の紹介
・FigmaではじめるUI（Web）デザイン｜Part1
##使ってみた感じ
良い感じ！
z-indexがたまによく分からない動きをするもののパーツの配置も楽ちん。
※画面左メニューに表示されている要素の順番がそのままz-indexでした(上にあるほど手前)
ブラウザの検証ツールでborder-radiusとか要素のパラメータをいじりながらパーツの見た目調整する感覚で、パーツのパラメータをいじって調整が出来るのもグッド。
さらに今どきのツールでは当たり前なのかもしれないですが
特定のパーツにTriggerとActionを指定出来るので、例えばこのパーツをクリック(trigger)したらこの画面に繊維(action)みたいな事が出来、動作を画面右上の「present」で確認出来ます。
プレゼンテーションモード(?)で動作確認したら「あれ？サイト完成した？ｗｗｗ」てくらいにサイトの雰囲気が伝わるものが出来上がります。
やゔぁい、Excel使ってる場合じゃねぇわ…
ただやはり導入コストと言いますか学習コストと言いますか…
最初はどうしても苦戦して心が折れそうになるので、ここを押さえておけば楽なんじゃないかなというポイントを書いておきます。
#チームとプロジェクトとファイル
Figmaは
Team > Project > File
という階層構造になっています。
画面左下にある「New team」でチームを作成。
※無料版でもチームの作成には制限がないらしい
次に作ったチームを選択した状態で、中央の画面にある「New Project」でプロジェクトを作成。
※無料版だとプロジェクトが3つまでという制約があるので注意
さらにそのプロジェクトを選択した状態で、中央の画面にある「New File」でファイルを作成。
※無料版でもファイルの作成には制限がないらしい
無料版はプロジェクトにだけ制約があるのが注意ですね。
こんな感じでファイルを作成し、ワイヤーフレームを作っていきます。
#メニューを覚えればなんとかなる
作ったファイルの編集ですが、下の画像の赤枠で囲んだ部分、画面左上にあるメニューを把握する事が兎にも角にも大事です。
これらを覚えれば基本的なデザインは何も問題ありません。
拡大するとこんな感じ
左から
・Move (V)
・Frame (F)
・Rectangle (R)
・Pen (P)
・Text (T)
・Add/Show Comments (C)
となっています。
##Move (V)
そのままですがパーツの移動に使います。主にこれを使用。
移動だけではなく、選択モード的な感じにもなっていて、選択中のパーツの設定変更(画面右メニュー)をこのモードでも行います。
なので選択兼移動モード的な感じです。
困ったときにはとりあえずここにすれば一安心。
##Frame (F)
パーツの親になる要素的な感じのを配置するときに使用します。
後から出てくるRectangleとかTextで作成したものとの決定的な違いは、こいつの領域内に配置したRectangleなどのパーツはそのFrame配下に紐付けされます。
(画面左メニューにあるLayersに、Frameやパーツの階層構造が表示されていますが、Frameは常に親になっています)
画面遷移などの動きを実装する際のAction先もこのFrameが指定対象になるので、重要なパーツとなります。
範囲選択をする場合に、子パーツが配置されている状態だとFrameは背景扱い(?)でいちいち選択されないようになってます。
##Rectangle (R)
デフォルトはRectangleなのですが、アイコンの隣にあるプルダウンのボタンを押すと他のパーツも選択出来ます。
・Rectangle (R) ←デフォルト
・Line (L)
・Arrow (Shift + L)
・Ellipse (O)
・Polygon
・Star
・Place Image (Shift + Command + K)
配置したいパーツに応じて必要なものを使う感じです。
##Pen (P)
おそらく押してしまって一番「ひええええええ」となるのがこれです。
これもプルダウンで選択が出来、
・Pen (P) ←デフォルト
・Pencil (Shift + P)
となっているのですが、Pencilはただのフリーペイントに対して、デフォルトのPenはベクターで描画するタイプのペイントになります。
ぽちぽちすると無限に線が作成されて狼狽えるのですが
このモード中は左上のメニューが上の画像のように変化しています。
この一番右にある「Done」を押せば、描画が終了します。
##Text (T)
よくあるテキスト。
##Add/Show Comments (C)
指定したポイントにコメントを挿入出来ます。
このモードにしないとコメントは表示されないので、他の作業の妨げにならずにいろいろとメモを残す事が出来ます。
#画面遷移の設定
Rectangleなどの細かい要素のパラメータについては、要素を選択したときに画面右メニューに出ている項目(タブメニューはデフォルトの「design」)をそのままぽちぽちするだけで簡単なので省略します。
ここではPresent(プレゼンテーション画面)で画面を遷移させるTriggerとActionについて説明します。
ここまで出来ればすごくそれらしいワイヤーフレームになります。
説明用の画面を用意しました。
それぞれ
ホーム画面(「ホーム画面ですよ」と書かれている方)
メニュー1画面(「メニュー1画面ですよ」と書かれている方)
とします。
ホーム画面の左メニューの「MENU1」をクリックしたときに、メニュー1画面に遷移させます。
##対象のパーツを選択する
アクションを登録したい要素を選択します。
今回の場合は、ホーム画面の左メニューの「MENU1」(Textで作成)なのでその要素を選択します。
##PrototypeでTriggerとActionを設定する
要素を選択したら、Figmaの右メニューにあるタブを「Prototype」へ切り替えます。
切り替えたら
Triggerに「On Click」を選択
Actionに遷移させたい画面のFrame名を選択
します。
(例だとホーム画面もメニュー1画面もFrame名がMacBookになっていてちょっと分かりにくいですが、メニュー画面1の方を選択しています。)
##設定完了
設定すると、いかにも要素と遷移先が紐付いてますよ的な矢印が表示されます。
この状態でFigmaの画面右上にあるPresentボタンを押すと、プレゼンテーション画面になります。
これでプレゼンテーション画面で、ホーム画面の「Menu1」をクリックすると、メニュー画面1へ遷移する、というアクションを確認する事が出来ます。
#終わりに
以上、これでそれらしいワイヤーフレームがイケてるツールで作れるようになりました。
明日からExcelを使ってワイヤーフレームを見かけたらイキり倒していきましょう。