XDからFigmaへ移行したい人のためにFigmaの機能を紹介

この記事について

この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。

マスクとして使用

Figmaでもマスクを使うと図形などからはみ出した部分を表示しないようにできます。

画像と図形を用意します。図形はその形からはみ出て部分を表示しなくなるので、その図形でくり抜かれたような表示になります。

マスクの作成方法

マスクとして使用したい図形の前面に画像を配置します。
図形と画像の両方を選択した状態にし、上部ツールバーにある［マスクとして使用］アイコンをクリックします。

メニューから作業する場合は［オブジェクト］＞［マスクとして使用］を選択します。

すると、選択した図形でマスクが作成され、その図形からはみ出した部分の画像は、表示しないようになります。

マスクを指定した部分のレイヤーでは「Mask group」というグループがつくられ、そのグループ内で配置されたものは、マスクとして指定した図形の範囲で表示するようになります。

コンポーネントの作成

コンポーネントを作成すると、再利用可能なデザインのパーツを作成できます。

Webサイトを見ていると、複数箇所で同じデザインパーツを使用していることに気付きます。

その何度も使用するパーツをコンポーネントとして作成すると、ボタンやアイコンなど複数箇所で使用するパーツを再利用できるようになります。

画像の例ではボタンをコンポーネントとして作成しています。

コンポーネントの作成方法

コンポーネントとしたいボタンのパーツを選択した状態で、上部ツールバーにある［コンポーネントの作成］アイコンをクリックすると、そのボタンのパーツはメインコンポーネントとなります。（XDではマスターコンポーネントと呼ばれています。）

メニューからコンポーネントを作成する場合は、コンポーネントにしたいパーツを選択した状態で、［オブジェクト］＞［コンポーネントの作成］を選択します。

メインコンポーネントを複製したものはインスタンスとなります。メインコンポーネントに変更を加えると、そこから複製されたインスタンスにも変更が反映されます。

バリアントの作成

バリアントの作成に入る前にまずバリアントについて説明していきたいと思います。

バリアントとは？

バリアントではコンポーネントをもとに異なるバリエーションのデザインを作成、管理できます。

画像では、「コンポーネントをもとにバリエーションをインスタンスで作成した場合」と「バリアントとして設定した場合」について説明しています。

コンポーネントをもとにバリエーションをインスタンスで作成した場合

メインのコンポーネントを変更してしまうとそこから複製されたインスタンス全てにその変更が反映されてしまうので、「フォントサイズ違いのボタン」というバリエーションを保つこともできず、メインのコンポーネントから何箇所も変更して作成することになるので、一貫性を保つことは難しいです。

バリアントとして設定した場合

バリアントを使用すれば、一つのコンポーネント内でバリエーションを作成するのでデザイン作業時にも変更が容易で、一貫性も保たれたままとなります。

そのため、それぞれ一つずつをメインコンポーネントとし、バリアントとして設定して一つのメインコンポーネントとしてその中でバリエーションが存在する。という形にします。
バリアントとして設定した一つのコンポーネント内で、サイズと状態のバリエーションを持たせています。

バリアントとして作成されたインスタンスを使用すると、プロパティで使用するバリエーションを選択して切り替えることができるようになります。

バリアントを作成

では、コンポーネント化したボタンなどのサイズ、状態などを管理できるようにバリアントを作成する方法です。

コンポーネント化したボタンをサイズと状態というプロパティ別で管理したい場合です。

バリアントの作成方法

まずコンポーネントを作成し、選択した状態にします。
上部ツールバーにある［バリアントの追加］をクリックします。
すると、メインのコンポーネントの下に新たにコンポーネントが追加され、二つのコンポーネントが枠で囲まれた状態になります。
バリエーションをプロパティ値に設定する場合は、レイヤーパネル内でレイヤー名を編集することができます。

プロパティと値を「＝」でつなぎ、プロパティと値が複数ある場合は「,」で区切ります。

プロトタイプ機能を使ってみよう

Figmaでプロトタイプを作成したものは、プレビューで確認できるようになります。
今回はボタンにカーソルがのったhover時に色を変えるアニメーションを作成してみます。

サイドにあるプロトタイプタブを選択します。

ボタンの通常時とhover時が作成された状態のバリアントの部分で、通常時からhover時のボタンコンポーネントへコネクター線で繋ぎます。

プロトタイプタブ内にあるインタラクションの部分を設定していきます。

今回は以下の設定をしています。

• どのタイミングで色を変えるか
• hover時にはどのコンポーネントを表示するか
• アニメーションの設定

アニメーションの部分はいくつか用意されており、選択するとパネル内で動きのデモを確認できます。

スクロールをプロトタイプで表現

Figmaのプロトタイプでは、表示エリア内でスクロールできることがわかるようなプロトタイプも作成できます。例えば、画像が並んだスライダーも再現できます。

例の画像では、表示エリアを指定して、そのエリアの中でスクロールできるというデザインデータにしたい。という例です。

5枚の画像をオートレイアウトで並べています。
デザインタブで、表示エリアを設定します。今回「760」と入力している部分が表示エリアとなります。

指定した幅からはみ出した部分の扱いを設定します。

［Clip content］にチェックを入れています。ここにチェックを入れておくと、はみ出た部分は表示しない。となります。

プロトタイプタブに切り替え、スクロールの動作について設定します。
ここは並べた画像を横スクロールして見たいので、水平の［Horiozntal］を指定しています。

※縦に並べたコンテンツを縦スクロールで見せたい場合は［Vertical］を選択します。
設定が終わったら、プレビューで確認してみましょう。

横スクロールすると、見えていなかった画像を表示することができます。

デザイン上のイメージだけでは、表示エリア内でスクロールの機能を伝えることが難しいかもしれません。プロトタイプを作成すれば、実際の機能に近い状態で確認できるようになります。

Figmaのたくさんある機能の中から実際によく使う機能について紹介しました。
実際に試してみていただけるとうれしいです。