はじめまして！

2024年に新卒入社したデザイナーの三原色団子です。

今回はwebサイトやアプリのデザイン制作に欠かせないツール

「Figma」の便利な機能をご紹介します！

◎Figmaってどんなツール？

Figmaとは、ブラウザ上で動作するクラウドベースのデザインツールです。

WebサイトやアプリのUIデザインからプロトタイピング、チームでの共有まで、

デザインに必要な作業を場所やOSを選ばずに行うことができます！

◎Figmaの機能紹介

まずは、作業効率を高めてくれるFigmaの基本的な機能をご紹介します！

⚫︎コンポーネント

繰り返し使うUIパーツ（ボタンやアイコンなど）を登録できる機能です！

マスターデザインを修正するだけで、全ての複製に変更が自動で反映されるため、

デザイン作業を大きく短縮することができます。

⚫︎バリアント

コンポーネントの「着せ替えセット」を作るような機能です。

右側のプロパティパネルからドロップダウンで状態を選ぶだけで、

デザインの切り替えが素早く直感的に行えます！

⚫︎カラーのスタイル登録

デザインで使う色に「ブランドカラー」や「テキストカラー」といった名前をつけて管理する機能です。

スポイトで色を吸い取ったりカラーコードをコピペしたりする必要がなくなり、

色の使い間違いも防げるためデザインの品質と一貫性が向上します！

◎その他便利機能

続いては、Figmaの基本機能に加えて、さらに作業を効率化するプラグインや、

他のツールとの連携技をご紹介します。

⚫︎プラグイン活用：フォントプレビュー

フォント選びが劇的に速くなるプラグイン「Font Viewer」をご紹介します。

Figmaでフォントを選ぶ際、プレビューが表示されず、

一つひとつ適用して確認する作業に「もどかしい！」と感じたことはありませんか？

「Font Viewer」を使えば、PCにインストールされているフォントのプレビューを

一覧で確認しながら、クリック一つでデザインに直接反映できます。

フォント探しの時間を短縮できる便利なプラグインなので、ぜひ一度お試しください。

Font Viewer:
 https://www.figma.com/ja-jp/community/plugin/1027863721483813752/font-viewer

⚫︎IllustratorからのSVGペースト

デザイン制作では、Illustratorを併用する方も多いのではないでしょうか。

しかし、IllustratorからFigmaへデータをコピペすると、

パスデータではなく画像として貼り付けられてしまうことがあります。

これは、Illustratorの設定を以下のように変更すれば解決することができます。

【Illustratorの設定手順】

1. メニューバーから「ファイル」を開く
2. 「クリップボードの処理」を選択
3. 「SVGコードを含める」にチェックを入れる

たったこれだけで、Illustratorのパスデータを維持したまま

Figmaにペーストが可能となります。

この一手間で、アイコンやイラスト素材の連携がよりスムーズになりますので、

IllustratorとFigmaを行き来する機会が多い方は、試してみてください。

◎まとめ

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

今回は、作業効率を向上にフォーカスした便利な機能をご紹介しました。

特にコンポーネントやバリアントは、最初の仕組みを理解するところを

難しく感じますが使いこなせると便利なので、一つずつマスターしていきましょう！