はじめに
「UIデザインを作るならFigma」という話を聞いたことはないだろか。筆者はない。デザイナーではない自分にはあまり縁のないツールだと思っていたが、普段はExcelやパワポで資料を作っている普通の会社員だが、せっかく資料を作るなら、なるべくたくさんの人の目に止まってほしいし、長く残ってほしい。デザインセンスにはあまり自身がないが、どうやら「Figmaナニガシ」とやらを使うと、こんな自分でもそこそこオシャレなデザインを素早く簡単に作れるらしい。
「いや、ほんまかいな」という声が聞こえてきそうなので、実際に作ってみたデザインを載せておこうと思う。流石にインストールした直後は基本操作もおぼつかないため、効率的に学習を進めるために「Figma for UIデザイン（著：沢田俊介）」という書籍を買った。一通り学習を進める中で、実際に手を動かして筆者が作った画面サンプルが以下である。
「めっちゃオシャレやん（小並感）」
文字や画像の配置、配色、サイズなど細かな部分はFigmaではなくデザイン自体の勉強が必要そうというのが、一通り書籍の内容を学習した筆者の見解である。とはいえ、デザインに詳しくない筆者でもFigmaを使えば（ほぼ書籍の通りに実装しただけだが）これくらいオシャレな画面が作れるようだ。
Figmaってなに。何ができるの。
Figmaがどんなツールなのか少しだけ調べてみたところ、専門的なサイトには難しい言葉が並んでいたが、私なりに解釈すると、
- インストール不要。Chromeなどのブラウザで動く
- 基本無料（有料プランはあるが、大半の機能を無料で使える）
- リアルタイム共同編集可（みんなで一緒につくれる）
という特徴をもったクラウド版の便利なデザインツールだそう。アカウントを作ったらすぐに使い始められるので、とにかく始めるためのハードルが低いのが魅力のようだ。最近はOutlookやExcel、Slack、Notionなど色々なツールがSaaSとして提供されているが、一部のショートカットがブラウザと競合する影響で、筆者はデスクトップ版が好みである。
便利だと思った機能
作ったデザインを部品化（コンポーネント）できる
一度作ったボタンやラベルを画面の至るところで使い回したいというケースはよくあるだろう。こういう時は自作したデザインを「コンポーネント」と呼ばれる部品に分けることができる。JavaやC++をかじったことがある人向けに言い換えると、コンポーネント=クラスと置き換えて差し支えないと思う。コンポーネントは「部品の型」のようなもので、これを元にインスタンスと呼ばれるコピーを量産することができる。コンポーネント側の設定（たとえばボタンの色や形）を変更すると、そこから派生したインスタンスすべてに変更が反映される。作業効率が著しく向上するので、マストで覚えておきたい機能だ。
筆者の場合、「Components」というページを作り、そこにコンポーネントをまとめておいておくと管理がしやすいと思う。実際にデザインを作成するページ（以下の例だとDesign）にはインスタンスだけ置くようにする。
バリアントでダークモードに切り替え
バリアント（変数）と呼ばれる仕組みを使えば、ボタン１つでデザインをライトモードとダークモードに切り替えることが可能。バリアントとは簡単に言うと、１つのコンポーネントに複数のバリエーションを持たせられる機能のこと。たとえば「ボタン」コンポーネントがあったすると、ボタンには色々な状態がある。
- 通常の状態
- マウスが乗った状態
- クリックされた状態
- 無効な状態
これらを別々のコンポーネントとして作ると管理が大変だが、バリアントを使えば「ボタン」という１つの親コンポーネントの中に、全ての状態を格納できる。
簡単な例を示すと、以下では「Dark Mode」というバリアントを設け、true / falseの２値を設定できるようにした。
バリアントは画面右上の＋ボタンから「バリアント」から作成できる。true/false以外にも数値や文字列などの値を作成できるので、バリエーションに応じたキー/値を設定することで、様々なデザインを切り替えることができる。
なお、ライトモードとダークモードの配色として「色スタイル」を活用すると便利だ。色スタイルは作った色に好きな名前をつけ、いつでも呼び出せるようにする機能のこと。これを活用すれば、デザイン間で色を統一することができるし、直感的な名称で色を識別することができ、開発を効率化できる。
色スタイルを作成するときは、画面右側の「色スタイル」から、＋ボタンを押して以下の画面を表示する。「名前」には「Light/Label/1」のようにスラッシュ区切りで入力すると、以下のように色を階層化できる。
おわり
自分はデザイナーではないが、Figmaを使うとこれくらいのデザインならすぐに作れるようになると思う。もちろん今回紹介したデザインは模写に近いものなので、０から独自のデザインを作成できるようになるまでは途方もない努力が必要になるだろう。また、今回は紹介しきれなかった便利機能（オートレイアウトなど）がたくさんあるので、また別の機会に記事化してみようと思う。
Figma公式サイトはこちら
https://www.figma.com/ja-jp/
コメント