こんにちは、クリエイターのTです。

今回はUI/UXデザインツールのFigmaについて書いてみたいと思います。

弊社がWEBデザイン制作に使用しているメインツールはAdobe XDなのですが、クライアントからご共有いただくデータにFigmaのものを見かけることも少なくありません。

2022年9月にAdobe社がFigma買収合意を発表し、その暫く後にXD“単体”でのプランが利用できなくなったという流れもあって界隈でも話題でしたね。

私もFigmaは個人的にずっと気になるツールでしたので、この記事ではFigmaのデザイン機能に触れて「これ便利〜！」と率直に感じた部分をピックアップし、紹介していくことにします。

私と同じように、現在XDユーザーでFigma初心者の方が「私も触ってみよう！」と思うきっかけになれば嬉しいです！

それでは目次です！

Figmaとは？

まずはFigmaってなに？というところを簡単にまとめていきたいと思います！

Figmaの特徴

Figmaは世界シェアが最も高い多機能UI/UXデザインツールのひとつです。

UIデザインやプロトタイピングなどのさまざまな作業をクラウドベースのプラットフォームで行うことができ、安定的なコラボレーション機能によって複数のユーザーが同時に、且つリアルタイムで最新データを閲覧・編集することができます。

いつでもどこでもファイルにアクセスできて、バージョンが混同する心配がない、ということで、大きなチームでも安心して共同作業ができるのは良いですね。

さらに、Figmaはデザインの共有やフィードバックの優れた機能を備えており、デザイナーチーム内部に留まらず、プロダクトマネージャーや開発者、クライアントなど、ステークホルダー全体でスムーズなコミュニケーションが可能なため、効率的な作業フローの実現が期待できます。

Figmaのデザイン機能、ここが素敵！

さっそく私がFigmaに触れて「ここ素敵！」と思ったポイントを３つご紹介します。

「スタイル」機能とその操作性

まずは「スタイル」機能についてです。

「スタイル」とは、カラーやフォントなどの属性を登録してそれらを使いまわせる機能のことです。

XDにも同様の位置付けで「カラー」と「文字スタイル」という機能がありますね。

Figmaではスタイルのそれらを全て「デザインパネル（選択している要素の各プロパティを編集するパネル）」を使って登録・編集・呼び出しを行うことができるのでとても扱いやすく、使用頻度高めになること請け合いです！

ちょっとしたことなのですが、ユーザーの手間が少しでも減るように計算されたUIなのだなって感じてちょっと嬉しく、ニヤニヤしてしまいます（笑）

またFigmaではカラーとフォントのみならず、ドロップシャドウなどのエフェクトや、グリッドなどのレイアウト設定も「スタイル」登録が可能です。

エフェクトはカラーなどと同様、制作物全体のトンマナを揃えるために同じ設定を使い回すことも多いですし、

グリッドに関しては「ページ」そのものに限らず、例えばボタンや表組みなどの要素（Figmaでは「フレーム」と呼ばれるレイヤーのまとまり）に設定できるのでこちらも便利そうです。

さらに、Figmaではひとつのスタイルに対し、異なる値のプロパティを複数設定することができます。

これは、例えば複数の異なるカラーをそれぞれ「塗り」として重ねたり、複数のエフェクトを設定したものをひとつの「スタイル」に登録しておくことができる…ということです！

スタイルには「名称」以外に「説明」というメモ書きのような項目がありますので、これらを駆使すれば呼び出すことも楽になるのではと思います！

余談ですが、Figmaでは「塗り」として画像を設定することができます。

XD同様、画像を流し込みたい要素に画像をドラッグするとデザインパネルに「塗り」として表れるのですが、何とこれもスタイルにしておくことができます！絶対便利！

フレーム内の背景テクスチャを画像でもってきて、そのフレームを使い回したいなどはよくあるのでぜひ使っていきたいです。

「テキスト」の編集機能

Figmaのテキスト編集機能にも魅力的なポイントがあります。

上下トリミング

そうです、テキストボックスに入力した文字の上下にできるあの余白を、テキストに沿ってトリミングしてくれる機能です！

フレームの中の文字をきっちり上下中央に配置したい、もしくは、上下余白の正確な値が知りたい時って結構あると思いますが、キャップラインとベースラインそれぞれの余白間って大体違いますし、px単位で調整をしたくてもやりづらいですよね。

XDではこれが気になる時、私はプラグインを使ったり、場合によっては文字をアウトライン化したりして調整し対処しています。

Figmaではこれを、デザインパネルの「タイプの設定」という項目で調整できてしまいます！

設定を開いたら、文字通り「上下トリミング」の項目を「ベースラインまでのキャップハイト」に変更。これだけです！

そして一度設定したら、次のテキストボックス作成時にも前回の設定が引き継がれ、何度も設定し直す必要がありません。助かる…！

文字の縦書き

上記でお見せした「タイプの設定」は色々と細かい調整ができるのですが、何と「文字の縦書き」も設定できます。

XDでもプラグインを使って一行ずつ縦書きにすることは可能ですが、基本設定を使ってできるんですね…！

やり方は以下の2ステップです。

STEP①：入力したテキストの幅をフォントサイズと同じ数値にする

STEP②：「タイプの設定」→「詳細設定」を表示させ、最下の「Vertical alternates and rotation」という項目を有効化する

あとは「行間」の調整項目を使って＝文字間の調整ができるので、そちらで整えます。

XD同様に一行ずつのボックスに分ける必要がありますが、プラグインを使わずに句読点「、。」や伸ばし棒「ー〜」も縦書きに対応させることができました！

ちなみに「日本語対応フォント」でないとこの「Vertical alternates and rotation」が設定できない（設定画面に表示されません）ので、そこだけは注意です。

ここでも余談ですが、Figmaの文字に関するプラグインのお気に入りは「ARC（文字テキストを円サークルやパスに沿って配置できる）」と「ShewDat（文字にシアーがかけられる）」です！

今までこのあたりはイラレの得意分野と思っていたので、便利なプラグインによってFigmaで完結できる部分も多いのかなと思い、ワクワクしています！

プラグインについてはもっと色々試して、そのうちまた紹介していきたいと思います。

「オートレイアウト」機能

Figmaでは「オートレイアウト」と呼ばれる機能を使用することで、要素の余白が自動調整できたりフレーム内部の要素に対する並びや余白を設定したりすることができます。

レスポンシブデザイン的な思考での調整が可能になり、WEB制作におけるデザインを効率よく行える、Figmaの“要”な部分とも言える機能なのでしっかり覚えて使っていきたいところです！

機能それぞれはCSSプロパティによるレイアウト調整と似た感覚があるので、コーディング知識がある方はより使いやすいと感じられるかもしれません。

例えとして活用例を2つご紹介します！

活用例①：ボタンのデザイン

1. テキストボックスを選択し、Shift+Aでオートレイアウトを追加
2. テキストを内包する形で自動的に「フレーム」が出現し、このフレームにオートレイアウトが設定される
3. 文字とフレームの間の余白を数値で設定
4. フレームにはこのまま「塗り」を追加や角丸などの設定をしてボタンの見た目に調整できる

ここで作成したボタンは2の時点で縦横のサイズが「ハグコンテンツ」という設定になっていて、“中の要素”、つまり文字数に応じて幅が変化するボタンになっています。

XDでの「パディング」に通じる機能ですが、ボックスツールで要素を作る作業が、Figmaのこの機能だと短絡化されるようなイメージですね！

また、内部の幅に影響されない固定幅のボタンにしたい場合、オートレイアウトを調整することで作成できます。

1. オートレイアウトの設定を「中央揃え」にする
2. フレームの幅をドラッグで引き延ばすか、フレームの幅の設定を「内包」→「固定幅」に変更し、Widthに任意の値を入力

活用例②：ヘッダーのデザイン

オートレイアウトは入れ子にすることもできるのですが、「詳細設定」を使って配列の調整をすることで、CSSプロパティのflexboxを想定したデザインを組むことが可能です！

ヘッダーでの活用例がわかりやすいので、また手順を追って説明していきます。

1. ロゴとナビゲーションの要素をまとめてオートレイアウトを設定する
2. 「･･･」をクリックして詳細設定を開き「間隔設定モード」を「間隔を空けて配列」に設定
3. さらにナビゲーションの要素をまとめてグループ化しオートレイアウトを設定
4. 3にオートレイアウトが適用されて「グループ」が「フレーム」のまとまりに変化。ここにも「間隔を空けて配列」設定を適用する

このモードを使えば、CSSのflexプロパティで言うところの「justify-content: space-between;」を使ったレイアウトをデザイン上で確定させることができますね！

ちなみに、「デザインパネル」と同じ場所にある「インスペクトパネル」には、制作した要素を表現するためのコードが表示されるのですが…

（詳しくは今回割愛しますが）先ほど設定した部分を確認すると、flexに関する記述に「justify-content: space-between;」がちゃんと表示されていました！

おわりに

いかがでしたでしょうか？

今回の内容はFigmaの“F”、、、触りの部分のみとなりましたが、とっても便利なことが分かったので、これからデザイントレースなどの練習を通じてXD並みにサクサク使えるようになっていきたいです！

文字・イラスト・写真・動画など、WEBデザイン上の要素によって選択するべきツールが違うように、WEBデザインのUIを検討する際に最適なツールもプロジェクトの要件によって異なる場合が出てくることも今後あるかと思います。

都度ニーズや作業フローに合ったツールを選択し、効率的にデザイン作業を進めることができるよう、日ごろから準備をしていきたいですね！

コラボレーション機能や実装者向けの機能にも使いやすいところが多々あるようなので、そのあたりについても今後また記事にしていけたらと思います。

最後までお読みいただきありがとうございます！