はじめに

この機能を使用できるユーザー

すべてのプランのすべてのユーザーがスタイルを作成できます。エデュケーション、プロフェッショナル、ビジネス、エンタープライズの各プランのすべてのメンバーが、スタイルをライブラリに公開できます。

ファイルの編集可アクセス権があれば、誰でもスタイルを作成および編集できます。

公開済みファイルの閲覧のみアクセス権があるユーザーは、そのライブラリから取得したスタイルを編集可能なファイル内で使用できます。

スタイルでは、オブジェクトのプロパティや属性のセットを定義できます。色、テキスト、エフェクト、レイアウトグリッドのスタイルを作成できるので、デザイン全体でスタイルを再利用できます。

スタイルの表示

ローカルスタイルは、現在のファイルに存在するスタイルです。ローカルスタイルには、何も選択されていない状態で右サイドバーから、またはスタイル選択機能からアクセスできます。

選択したプロパティのスタイル選択機能でスタイルを表示すると、他の公開済みファイルのスタイルを確認できます。ファイル内でのライブラリ有効化についての詳細 →

右サイドバー

ファイル内で少なくとも1つのスタイルを作成すると、右サイドバーの[ローカルスタイル]セクションで確認できるようになります。

まず以下の手順で、キャンバス内で何も選択されていないことを確認する必要があります。

• キャンバス上の空白の領域をクリックします
• Escを押して、現在の選択を解除します

右サイドバーの[デザイン]パネルで、すべてのローカルスタイルを表示します。スタイルは、以下のタイプ別にグループ化されています。

• テキスト
• 色
• エフェクト
• レイアウトグリッド

スタイル選択機能

スタイル選択機能で、ローカルスタイルや他のライブラリのスタイルを表示します。

右サイドバーで関連するプロパティの横にあるスタイルアイコンをクリックします。スタイル選択機能が開き、このプロパティで利用可能なすべてのスタイルを表示します。

スタイルパネルでのスタイルは、以下のデフォルトの順序で表示されます。

• チーム名のアルファベット順
• ファイル名のアルファベット順
• 個々のスタイルは右サイドバーに表示される順序と同一です

リストとグリッドビューの切り替えが可能です

スタイルの管理

スタイルを変更するには、元のファイルでスタイル定義を編集する必要があります。別のファイルからスタイルに変更を加えることはできません。

スタイルのグループ化

スタイルをグループで整理すると、スタイルの検索と選択が簡単にできます。これは/の命名規則を使用して、フォルダを作成することによって可能になります。

フォルダ別にグループ化

右サイドバーの[デザイン]タブから、フォルダを作成することでスタイルをグループ化できます。 特定のプロパティのをクリックすると、右サイドバーの[ローカルスタイル]セクションとスタイル選択機能にフォルダが反映されます。

フォルダを作成するには、以下の手順を行います。

1. 1つまたは複数のスタイルを選択します。
   • Shiftを押しながらクリックして、スタイルの範囲を選択します。
   • ⌘ Command / Controlを押しながらクリックして、隣接していない複数のスタイルを選択します。
2. 選択したスタイルを右クリックし、[新しいフォルダの追加]をクリックします。
3. 新しいフォルダに名前を付け、Return / Enterを押して保存します。

作成されたフォルダ内のスタイルは、そのスタイルリスト内での新しい階層に従って名前が変更されます。以下の例では、スタイルブランド/フューシャをブランドフォルダ内のブログフォルダに移動し、スタイル名がブランド/ブログ/フューシャに変更されました。

フォルダとそのフォルダ内のスタイルを削除するには、フォルダ名を右クリックして[削除]を選択します。また、すべてのスタイルを別の場所に移動してスタイルを保持し、フォルダを削除することもできます。

名前別にグループ化

スラッシュの命名規則によるスタイルのグループ化は、スタイル名にプレフィックスを追加することによって、これらのスタイルを同一の見出しでグループ化するものです。

以下の例では、スタイルに名前を付けて整理するのために、スラッシュの命名規則を使用します。

• ブログ/色
• ブランドスタイルガイド/色
• 二次/色

スタイルの並べ替えと移動

右サイドバーの[ローカルスタイル]セクションを表示すると、現在のファイル内のすべてのスタイルを確認できます。スタイルは、テキスト、色、エフェクト、レイアウトグリットのスタイルタイプ別にグループ化されています。

デフォルトでは、スタイルは追加された順に表示されます。表示される順序やフォルダを変更すると、スタイルの検索や移動が簡単にできます。

1. 1つまたは複数のスタイルを選択します。
   • Shiftを押しながらクリックして、スタイルの範囲を選択します。
   • ⌘ Command / Controlを押しながらクリックして、隣接していない複数のスタイルを選択します。
2. スタイルをドラッグして順序を変更するか、新しいフォルダに移動します。
3. マウスを離します。
4. その他のスタイルでも同様の操作を繰り返します。

あるフォルダから別のフォルダにスタイルを移動すると、階層内の位置に応じてスタイルの名前が変更されます。たとえば、カラースタイルブランドスタイルガイド/青をブログフォルダに移動すると、スタイル名もブログ/青に変更されます。

スタイルの編集

ローカルスタイルは、右サイドバーとスタイル選択機能から編集できます。

• 右サイドバー: スタイルにカーソルを合わせて、 調整アイコンが表示されたらクリックします。
• スタイル選択機能: スタイルを右クリックして、オプションから[スタイルの編集]を選択します。

スタイルとそのプロパティが[スタイルの編集]パネルの上部に表示されます。

• スタイルの名前を表示または更新します。
• スタイル選択機能でスタイルにカーソルを合わせた時に表示されるスタイルの説明を追加または更新します。
• スタイルの任意のプロパティを表示または変更します。
• アイコンをクリックして、スタイルが適用されている任意のオブジェクトのプロパティを非表示または表示します
• アイコンをクリックして、スタイルからプロパティを削除します

ここでスタイルに何らかの変更を行うと、このスタイルを使用しているファイル内のすべてのオブジェクトが更新されます。

ファイル間でのスタイルの移動

スタイルをファイル間で移動するには、以下の手順を行います。

1. 現在、スタイルが保存されているライブラリファイルを開きます。これがソースファイルです。
2. スタイルまたはスタイルフォルダを選択します。
   • Shiftを押しながらクリックして、スタイルの範囲を選択します。
   • ⌘ Command / Controlを押しながらクリックして、隣接していない複数のスタイルを選択します。
3. 選択したスタイルを右クリック>[スタイルの切り取り]を選択し、クリップボードに追加します。以下のショートカットも使用できます。
   • Mac: ⌘ Command X
   • Windows: Control X
4. スタイルを移動したいファイルを開きます。これが移動先ファイルです。
5. キャンバス上で右クリック>[ここに貼り付け]を選択し、ファイル内にスタイルを貼り付けます。以下のショートカットも使用できます。
   • Mac: ⌘ CommandV
   • Windows: CtrlV

ライブラリの変更の公開

ファイル間で公開済みスタイルを移動すると、影響を受けるすべてのライブラリに変更を公開するように求められます。

移動プロセスを完了するには、これらの変更を公開しなければなりません。変更を公開すると、すべての登録済みファイルに更新がプッシュされます。

1. 通知ウィンドウで[公開]をクリックするか、ショートカットを使用してライブラリモーダルを開きます。
   • Mac: ⌥ Option 3
   • Windows: Alt 3
2. 変更の説明を追加します。この説明はファイルのバージョン履歴に表示されます。
3. [公開]をクリックします。

通常のベル通知により、スタイルを使用するすべてのファイルへの更新が通知され、ライブラリからの更新の取得を促すプロンプトが表示されます。ライブラリからの更新の確認と受け入れ →

スタイルの移動の反転または取り消し

次のいずれの方法でも、スタイルの移動アクションを取り消すことはできません。

• ❌取り消しのキーボードショーカットを使用する
• ❌いずれかのファイルを古いバージョンに戻す

スタイルの移動を反転させるには、前のセクションで大まかに説明した方法を繰り返して、スタイルを元のファイルに移動することをお勧めします。その後で、必ず公開と変更の受け入れを行ってください。

スタイルの削除

1つまたは複数のスタイルを削除したい場合は、パネルから直接操作できます。

1. 1つまたは複数のスタイルを選択します。
   • Shiftを押しながらクリックして、スタイルの範囲を選択します。
   • ⌘ Command / Controlを押しながらクリックして、隣接していない複数のスタイルを選択します。
2. オプションから[スタイルの削除]または[すべて削除]を選択します。
3. スタイルが削除され、今後そのスタイルは使用できなくなります。そのスタイルを使用しているすべてのオブジェクトは、そのプロパティを保持しますが、スタイルからは切り離されます。

スタイルの共有

作成したスタイルをチームライブラリに公開すると、他のファイルやプロジェクトでアクセスできます。スタイルは単体、または任意のコンポーネントと合わせて公開できます。

無料のスタータープランではスタイルの公開はできますが、コンポーネントの公開はできません。コンポーネントを公開するには、プロフェッショナルプランまたはFigmaビジネスプランをご利用いただく必要があります。

スタイルをライブラリに公開

1. 左サイドバーの[アセット]パネルを開き、ライブラリアイコンをクリックします。または、次のキーボードショートカットを使用します。
   • Mac: ⌥ Option 3
   • Windows: Alt 3
2. [現在のファイル]セクションで、ファイル名の横にある[公開]をクリックします。
3. ファイルに加えられた変更の説明を追加します。この説明は、ファイルのバージョン履歴に表示されます。
4. [スタイルとコンポーネント]セクションの横にあるアイコンをクリックして、すべてのスタイルとコンポーネントのリストを表示します。
5. [公開]をクリックして、スタイルをライブラリとして共有します。

ライブラリの変更を公開すると、そのライブラリを使用しているすべてのユーザーは更新を取得するように求められます。これにより、これらのスタイルを使用するすべてのレイヤーが最新バージョンを使用できるようになります。

ライブラリからスタイルを使用

あるファイルのライブラリが有効化されると、ファイルの編集可アクセス権があるユーザーは、そのスタイルやコンポーネントにアクセスできるようになります。

• スタイル選択機能でそのライブラリのスタイルを表示します。
• そのライブラリの任意のスタイルを色選択機能で別のパレットとして表示します。
• 共有されているすべてのスタイルを使用できます。スタイルの適用についての詳細はこちら→
• 編集可アクセス権限があるユーザーは、ファイルからスタイルを編集できます。