Figmaのスタイルを管理して時短！ そして直しに強くなる

こんにちは。Maromaroのfutaです。

近年UIデザインに特化したツールがいくつも開発され、制作現場で多く使われるようになったFigmaは、Webサイトはもちろん、アプリケーションのUIデザイン、ワイヤーフレーム、資料作成等様々場面で活躍してくれるツールです。

以前からデザインの現場で使用されているAdobe IllustratorやPhotoshop等従来のイラスト・画像編集ソフトの特化した技術・機能までは備えていませんが、これらのソフトよりもページ展開等が円滑に進むコンポーネント・テキストやカラーのスタイル機能を搭載し、直しにも強く頼もしい存在と言えます。（※InDesign・Illustrator・Photoshopにもスタイル機能はあります）

今回はこの直しに強い点の一つとして、Figmaのスタイル機能がありますので、ご紹介させていただきます。

Figmaのスタイルとは

色やフォント等あらかじめ設定したデザインを管理し、簡単に呼び出して別のオブジェクトに反映できる機能です。

Webサイト等の制作時、色々なオブジェクトに繰り返し同じデザインを適用したい時に、都度地道にフォントを探したり色を変えたりしていては、時間がかかってしまいます。オブジェクトに設定できる色設定や文字設定は、デザイン中に繰り返し使うデザイン（プロパティ）を「スタイル」という機能を使って保存をしておけば、いつでも何度でも簡単に呼び出すことができ、各ページで共通するパーツ等の作成・変更が素早く効率的に行えるようになります。

スタイルを登録できるもの

※Figma公式ヘルプサイトより

テキスト: フォントファミリー、サイズ、行の高さ、間隔

• テキスト スタイルは、レイヤー全体またはテキストの一部に適用できます。これは、ヘッダー、本文テキスト、段落内のテキスト（リンクされたテキストなど）のスタイルを定義するのに最適です。
• テキストの配置用にテキストスタイルを作成できないため、各ブロックの配置を個別に設定する必要があります。

カラー: 塗りつぶし、ストローク、イメージ、グラデーション

• グラデーションのスタイルを作成する場合、使用する色とグラデーションの方向または角度の両方がスタイルに保存されます。

効果: ドロップシャドウ、インナーシャドウ、レイヤーブラー、背景ブラー

• スタイルには複数のエフェクトを含めることができ、適用されたすべてのプロパティがスタイルに保存されます。
• シャドウスタイルは、右側のサイドバーの［エフェクト］セクションにアイコンとして表示され、方向によって異なります。これらのアイコンは、ドロップ シャドウまたはインナーシャドウとそのx、y値の間で異なる場合もあります。

フレームのグリッドのレイアウト: 行、列、グリッド

• これは、複数のデザインにわたって特定の形式または構造を複製する場合に役立ちます。
• グリッドスタイルは、右側のサイドバーのレイアウトグリッドセクションにアイコンとして表示され、タイプ（グリッド、列、または行）に応じて異なります。

スタイルの使い方

テキストの場合で説明します。デザインを行う上で繰り返し使うことがわかっているものはさっさと登録しましょう。後からいくらでも変更できます。

スタイルの登録

登録したいテキストオブジェクトを選択し、右側のサイドバー、プロパティパネルのスタイルメニュー（右上の点が4つのアイコン）をクリック（①）し、パネル内の「＋」をクリック（②）します。

新しいテキストのスタイルを作成パネルの名前欄（③）に登録名を入力します。名称に「/」を入れて区切ると、階層化されグループ管理できます。

説明も入れられます。「その他のオプションを表示」を押すと、ウェイト・サイズ・行間・文字間隔等の詳しい設定を行えます。

スタイルの呼び出し

反映させたいテキストオブジェクトを選択し、登録と同じく右側のサイドバー、プロパティパネルのスタイルメニュー（右上の点が４つのアイコン）をクリックします。

テキストスタイルパネルに、登録したスタイル名がリスト表示されているので選択すると、フォントやサイズ等の登録したスタイルが即座に反映されます。

その他、色（塗り）等のスタイル登録・反映も同じように行いましょう。

スタイルの変更

該当オブジェクトの一つを選択し（または無選択で「ローカルスタイル」から）、表示されたスタイルパネルの、該当するスタイル名の横の「スタイルを編集」をクリックします。

編集パネルが出るので、変更を行いパネルを閉じます。すると即座に該当するすべてのオブジェクトに変更が反映されます。　

スタイルの更新解除

今後更新する際に同じスタイルを反映させたくない場合は、除外させます。

該当オブジェクトを選択すると、右にスタイル名が表示されますので、マウスポイントを乗せます。右に現れる「スタイルを解除」をクリックします。現状が維持され、スタイル変更をしても更新はされなくなります。

制作終盤のまさかの修正にも強くなれる

クライアントのWebデザインをしていると、案出ししてOKをもらってどんどんページ制作を進めて終わりが見えてきたのに、先方からの何かしらの理由で遅れてのダメ出しなどで、プロジェクトの途中で色やレイアウトの大幅変更が発生、しかもそれは全ページに影響する……などという状況に遭遇する事が、意外と少なくありません。

スタイルを設定が無ければ、恐ろしい修正量になり、かなりのダメージになりますが。何ページも制作が進んでいてもスタイル機能を使っていれば、作業は設定の修正1回のみ。すべての対象オブジェクトに同時に更新が走るので、飛躍的に時短となると言えるでしょう。

そのスタイルも数が増えると名前から探すのが大変になりがちですが、Figmaは簡単な方法で、スタイルをグループ管理できるのも素晴らしいですね。スタイル機能を使いこなして、作業効率とメンテナンス性のアップに繋げていきましょう。

以上、futaでした。