とっても便利な機能が満載！UIデザインツール「Figma」を使い始めたおはなし

開発陣のコンポーネント開発導入に伴い、当社のデザイン業務もアップデートしました。

「コンポーネント開発」とは、部品（コンポーネント）から開発し、最後にページを作り上げる開発手法です。
今までのデザイン業務では「ページデザイン」がゴールでしたが、そのままコンポーネント開発を行う場合、開発担当者がページ内を見回して部品をピックアップ＆整理しなければならず、とても非効率です。
こういった課題を解決するため、新たなデザインツールとして「Figma」を導入しました。

「Figma」を使うことで、デザイン時の今までとは違う考え方から、パーツ作成の概念、新しいツールを使うこと自体の学びなど…違う刺激がどんどん入ってきて、怒涛の情報量です。
新しいことを始めるのは大変ですが、いろいろなことを吸収している充実感と楽しさを味わっております。

今記事では、「Figma」を使い始めた「いちデザイナー」として、便利で感激した機能について、ほんの一部になりますが、実務中の経験談を交えてお話させていただこうと思います。
具体的な機能の説明は、公式サイト含めわかりやすく解説されているページが多いため、そちらをご参照いただくとして、ここではあまり他で解説を目にしないですが、実務で嬉しかった機能をメインにご紹介します。

当社のFigma導入時は英語版のみでしたが、ついに2022年7月27日本語版がリリースされました！
この記事は言語設定を日本語に切り替えた内容で表現しています。

便利で感激！Figmaの機能

使えば使うほど、「Figma」はコーディングや開発工程のことを意識して作られている「UIデザインツール」であると思い知らされます。
コーディングでどう再現するするかを、細かくデザインデータに設定できるのです。
それを実感した機能がこちら。

●オートレイアウト（Auto Layout）

「Figma」を語る上で外すことができない機能「オートレイアウト」。
まずはこの機能を把握し、自由に使えるようになることが必要でした。

「オートレイアウト」は含まれる要素を自動で整列させる機能です。この機能を使うことで正確なレイアウトの指定が可能になり、文字数やレスポンシブなどによるサイズ可変時の挙動など、開発者へどのように再現して欲しいのか、正確に伝わるようになります。

ざっと以下の設定が可能です。

↓↓「オートレイアウト」の詳細設定で嬉しかった機能がこちら！↓↓

●テキストベースライン揃え【オートレイアウト＞詳細なレイアウト】

フォントによっては、文字自体の余白が多く、純粋に左揃えや左下揃えにするとずれてしまうことがほとんどです。
この場合、「テキストベースライン揃え」を選択することで、フォントやサイズが異なる文字も、その文字が持つ「ベースライン」に揃えて配置できます。
今までは余白をマスクをしたりスペースを追加するなどで高さ調整し、無理やり再現していましたが、この機能で実際のコーディングを再現できるようになりました。

●フレーム（Frame）

オートレイアウトを使用する際に必要になる「フレーム」機能。
この機能の存在価値を思い知ったのは、以下の流れからでした。

Adobe XDなど他ツールでデザインする場合、ある領域内に文字やアイコンなど（子要素）を配置する際、その領域を長方形ツールで「図形」を配置して代用していました。
borderについても同様で、四方に表示する場合は問題ありませんが、下だけにborderを表示など個別の設定が無いため、この場合も長方形ツールやラインツールで代用していました。
でもそれは、見た目は同じでも、実際のコーディングとは異なるレイアウト…
FIgmaのインスペクト（Inspect）＞コード（Code）で確認すると、コーディングでの再現とは異なる表現になってしまいます。

そこで「フレーム」機能の登場です。

「フレーム」は、まさにこの「領域（親要素）」部分を指定するもので、background、borderも設定することができます。
似たような機能として、フレーム同様レイヤーをまとめる「グループ（Group）」があります。こちらはシンプルにグルーピングするのみ。
レイアウトの指定は「フレーム」化して「オートレイアウト」で行うことになります。

これでまた、実際のコーディングに近づきました！

●絶対位置の指定【フレーム＞絶対位置】

パーツからはみ出す位置に配置したいボタン。これを当初、オートレイアウトで実装しようとしていて、かなり複雑で難解な方法で無理やり実現させていました。（しかも超無理やりなので扱いづらい）
でも、よく使われる配置方法なので何かもっとシンプルな方法があるはず、と一緒に試行錯誤している後輩さんが探してくれまして、設定方法ありました！
該当のオブジェクトをフレーム化することで「絶対位置」の指定が可能に。とっっっても簡単に実現できます。
この例だと、もとのコンポーネントの領域から左上に5pxはみ出していますが、実際に配置する際にこのはみ出た部分はサイズに含まれず配置できるので、アイコンを表示/非表示を切り替えても、オートレイアウトの配置にも影響が出ません。

編集が便利！ストレスフリーなありがたい機能

●バリアント（Variants）

デザインパーツの管理を行う際に「コンポーネント（Components）」を使用します。
コンポーネント開発は部品を先に用意して、その部品を組み合わせてページを作っていく開発手法ですが、それと同様の作業がFigmaでも可能です。
Figmaで作成したコンポーネントには、利用目的によって変更可能な「値（Propaties）」が設定できます。
この機能を活用すると、デザイナーでなくてもコンポーネントを使ってルールに沿って配置することで、ページの作成が可能となります。

コンポーネントを作成する時に便利な「バリアント」は、状態や用途が似ているコンポーネントを１つのグループとして管理することができます。
プロパティ名とその値をそれぞれのパターンに設定し、実際の配置する際はプロパティの値を切り替えて使います。
コンポーネントをどのようにカテゴリー分けするか、プロパティをどう使い分けるかなど、作り込みは大変ですが、出来てしまえば配置はカンタン！

ここではボタンのコンポーネントを例にご紹介。

値を「ON/OFF」もしくは「True/False」に設定すると、プルダウンではなくスイッチでの切り替えができるようになるのが嬉しい！

各パターンを複製する際、オブジェクトを同じ階層・レイヤー名にしておくことで、全パターンの設定を一括変更可能（マッチングレイヤー）になり、編集にとても便利です。
この概念は、アニメーションの設定をする時も必要になるので、同じオブジェクトの階層やレイヤー名は、配置した先で不用意に移動させたり独自のものを付けないように管理するのが良さそうです。

地味だけど便利…！かゆいところに手が届く機能

●テキストの設定に省略（…）がある！【テキスト＞タイプの設定＞サイズ変更】

今まではテキストで「…」を配置して再現するも、自動的にあふれた文字を非表示にすることはできず、なんちゃって実装でしたが、実際と同じように再現できることに感動。

●通話機能と相手の居場所へ瞬間移動！

本格的に使うことになり有料プランに切り替えた際、真っ先に使ったのが「通話機能」。
URL発行なし、時間制限なし、ボタンひとつで気軽にミーティングが可能です。
ミーティングはほとんどが作業中のデータを一緒に見ながら行うことが多いのですが、相手がどこのページのどの場所を見ているかわからない…と思っていた矢先。
間違えて通話参加のヘッドフォンアイコンではなく、お隣の通話相手のアイコンをクリックしてしまって偶然発見！
選択した相手を「フォロー」状態となり、閲覧しているページに移動、カーソルの位置を自動的に追いかけます。
画面共有機能が無くても、この機能でバッチリ！どこのことを話しているの？と迷子になりません。

●複数のウィンドウで同じファイルを同時に開くことができる！

本当に地味ですが、ありがたい！
Viewとしてレイアウトを配置している時に、「コンポーネントも見たい」「別のページと比較して確認したい」など、同じファイル内にある別のデータを確認しながら作業したいケースが多々あります。
その際に、１ファイル１つのウィンドウのみで操作する場合、配置されているページやアートボードへ、いちいち移動しなくてはなりません。
Figmaは、各ページで作業していた場所を覚えていてくれるので、それだけでも便利ですが…いちいちワープせずに同時に開いておくことができるのは、かなり作業がしやすく嬉しかったです。
と言うわけで、調子に乗ってウィンドウを開きまくると、メンバーアイコンに同じ人物が大増殖します。。。

（おまけ）新しいツールに移行するのは大変！
導入が決まった時に新しいツールを使い始めるときのコツ

今まで使用しているツールから新しいツールへ移行する時に私が行なっている方法は、「慣れたツールで制作したデータと同じものを、新しいツールで作ってみる」です。
いきなり新しいデザインを新しいツールで行おうとすると、ツールの使い方を覚えることが大変で、いつもと同じ感覚でデザインも…というのは難しくなると思います。
ここは一旦切り分けて、まずは仕上がっているデータと同じものを再現してみるのがオススメです。
いつも使っているあの機能はどこ？この表現は新しいツールではどう設定する？と慣れたツールと比較して覚えていくと、自然に使用法が身につきます。

全く同じ機能の新ツールを使う時はもちろん、今回は特にコンポーネントのことを考える必要があるなど、新しい要素が多くなりましたので、いったん慣れたツールで今まで通り自由にデザイン、その後Figmaでコンポーネントを意識してパーツ分け、実現に不都合があればデザインを調整、というように仕上げていくのが、必要以上にデザインを縛らずに制作できると感じました。

新しいツールを使う際に、助けになれば幸いです。

最後に

慣れたツールから新しいツールへの移行は、学習や運用方法の変更が発生し、軌道に乗るまで一時的に生産性が落ちるなど負担も大きい作業になりますので、慎重に行いたいところです。
今回は、実際に導入している協力会社の方から、その運用状況をヒアリングできたりおすすめいただいたこと、当社開発陣からも「使っていこう！」となり導入が決定。しっかりと移行期間を確保して対応することができました。
今回の「Figma」は、今までのデザイン業務に加えて、コンポーネント開発の概念や仕様の把握など、対応内容も増えましたが得るものも大きく、とても良かったと感じています。

今後も開発者に伝わるデザインデータの制作を目指して、うまく使いこなしていきたいと思います。