Note
本記事ではFigmaの表面に触れるだけです。より深く学びたい方はこちらの中国語ドキュメントをご覧ください。

Figmaとは？

『Figmaは世界初の共同作業可能なデザインツールで、デザインとプロトタイプ制作が同じ場所で行け、より早くアイデアをプロダクトに変換できる』という言葉通り、先日友人にUIアニメーションを見せたくて、まず思い浮かんだのはAEとBlenderでした。しかしAEは使い慣れておらず、Blenderで午後いっぱい作業してみたものの面倒すぎ、しかしインタラクティブ要素も欲しかったためFigmaを見つけました。ゼロからアニメーション完成までわずか2〜3時間で、ゲームする時間を大幅に確保できました。以下、ちょっとした文章とGIFでシンプルなUIインタラクティブアニメーションを一緒に作ってみましょう。

はじめに

まずこちらでアカウントを登録し、こちらからお使いのシステムに合ったクライアントをダウンロードして、ログインすれば第一歩完了です。

インターフェース

Figmaのインターフェースはほとんどのデザインツールと同様で、ツールバー、レイヤーパネル、キャンバス、プロパティパネルで構成されています。

ツールバー

ツールバーはメニュー（Main menu）、移動・スケールツール（Move／Scale）、エリアツール（Region tools）、シェイプツール（Shape Tools）、描画ツール（Drawing Tools）、テキストツール（Text）、ハンドツール（Hand Tool）、コメント追加／表示（Add/Show Comments）、コンポーネント作成（Create Component）、画像マスク（Use as Mask）、ブール演算（Boolean Groups）、共有（Share）、プレゼンテーション（Present）、ビュー（Zoom/View Options）で構成されています。

ツール名	用途
移動ツールとスケールツール	その名の通り、要素の移動（Move）とスケール（Scale）に使う
エリアツール	アートボードのようなものを作成できる
シェイプツール	基本要素の作成：長方形（Rectangles）、ライン（Line）、矢印（Arrow）、楕円（Ellipse）、ポリゴン（Polygon）、星（Star）、画像挿入（Place image）
描画ツール	折れ線・滑らかな曲線を描くペンツール（Pen）とフリーハンドの鉛筆（Pencil）
テキストツール	文字を入力する
ハンドツール	キャンバスを移動する
コメント追加／表示	コメントの追加と表示
コンポーネント作成	要素を再利用可能なコンポーネントに変換
画像マスク	要素の骨格を透けて見せる、つまり透視
ブール演算	ブール演算を行う
共有	他人と共有する
プレゼンテーション	最終効果を確認する
ビュー	ビューを調整する

レイヤーパネル

ツールバーはレイヤーパネル（Layers Panel）、アセットパネル（Assets Panel）、ページリスト（Pages List）で構成されます。ここではレイヤーパネルのみ使用します。

プロパティパネル

プロパティパネルはデザイン（Design）、プロトタイプ（Prototype）、インスペクト（Inspect）で構成されます。

プロパティパネル	用途
デザイン - エフェクト	インナーシャドウ（Inner shadow）、ドロップシャドウ（Drop shadow）、ぼかし（Layer blur）、背景ぼかし（Background blur）で構成。背景ぼかしはCSSのbackdrop-filterを使用しており、フロストガラス効果を実現できる
プロトタイプ	主にUIインタラクションとアニメーションを設定する場所。後ほど詳しく説明します
インスペクト	要素の詳細データや、CSS／iOS／Androidでの実装方法が確認できる

UIを作ってみる

Figmaではプログラミング知識不要、誰でも簡単にUIを構築できます。以下、自分のブログUIを参考にシンプルなUIを作ってみましょう。

アイキャッチ画像を描く

エリアツール（Region tools）のフレーム（Frame）を使ってフレームを作成。ここではお馴染みのiPhone 8 Plusでデモします。次にシェイプツール（Shape Tools）の長方形（Rectangles）で要素を作り、色やサイズなどのパラメータを変更します。

ちょっとした装飾

再び長方形（Rectangles）を使い、先ほどのアイキャッチ画像に投稿日や文字数などの情報を追加します。

GIFの圧縮による色の劣化はご容赦ください

もっと記事を増やす

先ほど作成した要素をすべて選択し、Ctrl + Gでグループ（Group）にまとめ、左のレイヤーパネルで名前を『記事フレーム』に変更すれば、まとめて操作できます。記事フレームを複製して適切な位置に配置します。

ブログに背景を設定

シェイプツール（Shape Tools）から画像挿入（Place image）を選び、画像を選択したら背景を追加したい要素（ここではフレームの空白部分）をクリックし、画像の見た目を調整します。画像がフレームの最前面にあるため他の要素を覆っていますが、左のレイヤーパネルで画像を最背面に移動すればOKです。

Note
レイヤーパネルで画像を移動する際、フレームの外に出さないよう注意してください

簡単でしょ？次はインタラクティブ要素を追加しましょう

ドロワーメニューがあり、左上のメニューアイコンを押すと左から右へスライドして背景が暗くなれば理想的です。これにはプロパティパネルのプロトタイプ（Prototype）を使います。

まず左のレイヤーパネルでインタラクションを追加したいメニューアイコンを選択し、右のプロパティパネルのプロトタイプタブにインタラクション（Interactions）機能があるのが分かります。インタラクション機能の右側の＋ボタンをクリックして要素にインタラクティブアニメーションを追加します。

ここでFigmaのトリガーとアクションを簡単に紹介します：

トリガー

トリガー	役割
On tap	シングルクリックイベント、HTMLのonclickに相当。クリックするとインタラクションが発生
On drag	ドラッグイベント、HTMLのondragに相当。要素をドラッグするとインタラクションが発生
While hovering	ホバリングイベント、CSSの:hoverに相当。マウスを要素上に置くと発生、外すと解除
While pressing	プレスイベント、HTMLのonmousedownに相当。マウスダウンで発生、マウスアップで解除
Key/gamepad	キーボード入力イベント、HTMLのonkeydownに相当。対応キーを押すと発生
Mouse enter	マウスエンターイベント、HTMLのonmouseoverに相当。マウスが要素に入ると発生、外れても解除されない
Mouse leave	マウスリーブイベント、HTMLのonmouseoutに相当。マウスが要素から外れると発生
Touch down	マウスダウンまたはタッチで発生
Touch up	マウスアップまたはタッチ解除で発生

アクション

アクション	役割
None	トリガー後に何も起きない
Navigate to	トリガー後に別フレームへ切り替える
Open overlay	トリガー後に別フレームをオーバーレイ表示
Scroll to	トリガー後にフレーム内の指定位置へスクロール
Swap overlay	トリガー後に別フレームで現在のオーバーレイを置き換える
Back	トリガー後に前のフレームへ戻る
Close overlay	トリガー後にオーバーレイを閉じる
Open link	トリガー後にリンクを開く

上記を理解すれば、On tapトリガーでOpen overlayアクションを設定すれば求める効果が得られます。下のオーバーレイ（Overlay）で「他をクリックしたら閉じる（Close when clicking outside）」と「背景オーバーレイを追加（Add background behide overlay）」にチェックを入れ、アニメーション（Animation）で移動（Move in）を選択、方向を左→右、トランジションをEase in and outにすれば完成です。

スクロールしたい場合は？

ブログオーバーレイに情報が多く、内容がフレームからはみ出してしまった場合、垂直スクロールのインタラクションを追加できますか？とても簡単です。レイヤーパネルでフレームを選択し、プロパティパネルのプロトタイプでオーバーフロー動作（Overflow behavior）を垂直スクロール（Vertical scrolling）に設定するだけです。

まとめ