Figmaを完全に理解する

はじめに

エンジニアの言う「完全に理解した」「なにもわからない」「チョットデキル」って本当はこういう意味？「わかる」の声多数 - Togetter

サーバーサイドエンジニアと兼任でプロダクトマネージャもやってます。最初、モックをパワポでつくったり、既存の画面のhtmlをごにょごにょしたりしてたのですが、もうちっといい方法ないかなーと思ってました。そんなおりに、同僚がFigmaを使っていたので、軽く勉強して使ってみたら最高でした。

ということで、僕みたいな、今までSketchとかそういうのを全く使ってなかった人が、簡単な画面だったらモックを作れるよーくらいになれるような、チュートリアルのチュートリアル的なものとして、この記事を残します（細かいところとか間違いがあったらこっそり教えて下さい）

押さえておくべき概念

最低限、下記の概念を理解しておく必要があります（いったん意味がわからなくてもいいです。あとで読み返してください）

概念	説明
チーム	チームですw View only team memberみたいなのが出てきたりするので、アクセス制御の単位だと思う
プロジェクト	チームの下の概念。ディレクトリみたいなものかなーと思っている。ちなみに無料プランだと１チーム１プロジェクトしかつくれなそう
フレーム	枠のこと。中に下記のコンポーネントだったり、インスタンスだったりをもてる
コンポーネント	部品ですw　ボタンとかフォームとかそういうの
インスタンス	コンポーネントから作られたインスタンス（語彙力ｗ

とりあえずファイルを開くまで

まずはSign Upしてください（キャプチャ忘れた

多分、自分のチームとデフォルトのプロジェクトが作られていると思うので、+ボタンからDesign Fileを選びます

一覧ページを作ってみる

勤務時間登録画面をサンプルに作ってみます。

まずは、画面全体になるフレームを作ります。左上の#がフレームです。右のメニューからサイズを色々選べます（ドラッグして、任意のサイズにもできます）いったん、Desktopを選びました。あと、フレームの名前もわかりやすいように「メインページ」とかにしておきます。

次にコンポーネントの置き場所を作ります。任意のサイズで作りました。背景はわかりやすいように、メインページとは変えておきます。

表のヘッダーを作っていきます。コンポーネントのフレームの中にフレームを作り、テキストをいい感じに配置していきます。

出来上がったら右クリックより Create Componentを選びます。これでコンポーネントになります（アイコンも変わります）

あと、Frame1という名前を「勤務時間リスト/ヘッダー」にしておいてください（キャプチャ取り忘れ）

次に、行を作ります。先程作ったコンポーネントをコピペします。 コピペしたものは、インスタンスになります（アイコンも変わります）

右クリックからDetouch Instanceを選ぶと、インスタンスからフレームになります。あとは色とかテキストを調整します。

調整し終えたら、同じ要領でコンポーネント化し、名前を「勤務時間リスト/行/入力済み」にしておいてください（この名前、すごく重要です）

同じ要領で未入力の行も作ってください。最終的には下図のようになります。

ここまでできたら、各コンポーネントをインスタンス化し、メインページに配置していきます。 日にちの部分は、各インスタンスのテキストを変更してください。

なお、上記の命名規則にしておけば、Swap Instanceから入力済みの行と未入力の行を簡単に入れ替えられます（ボタンとかでよくつかいます。アクティブにしたり、非アクティブにしたりとか）

ボタンをつくる

同じ要領でボタンを作る。フレームにテキストを入れ込む形で作ります。 テキストの位置をセンタリングしたら、ボタンのサイズを変えてもテキストの位置が固定されます。

最終的にはこんな感じで、非アクティブのボタンも作り、コンポーネントに入れ込めば、インタンスに自動で反映されます。

画面遷移をつくる

右のメニューから Prototypeを選び、コンポーネントやインスタンスから矢印を遷移先にうにょ〜と伸ばせばOK （ここはチュートリアル動画の方がかわりやすいかと

最終的にこうなります

Flow1のところを再生すると、モックを確認できます。

モーダルを表示する

削除ボタンを押したときに「本当にええんやな？」的なアラートを出してみます。

まずモーダルをつくります。今までやってきたように、フレームを作って、テキストとボタンのインスタンスを配置します。

削除のボタンからうにょ〜〜〜と線を伸ばし

Navigate ToでOpen Overrayを選択。Add background behind overrayにチェックを入れておくとよいです（モーダルを開いたときに、背景が暗くなります）

削除や戻るボタンから矢印を伸ばし、右上の×（矢印を伸ばすとでてくる）につなげます

これでモーダルが完成しました。

おわりに

ある程度規模がおおきくなってくると、コンポーネントの管理だったりとかが課題になってくると思いますが、簡単な業務システムのモックであれば、これだけ押さえておけばだいたい事足りるかなーと思ったりします。