見た目も使い心地も一貫した機能的なプロトタイプやWebアプリを作成するため、既存のFigmaライブラリのスタイルコンテキストをFigma Makeに取り込むことができます。これを行うと、Figma MakeはそのライブラリからスタイリングCSSを抽出します。
ライブラリからFigma Makeにスタイルコンテキストを取り込むには、2つのステップがあります。
- Figma Designからライブラリをエクスポートします。
- Figma Makeファイル内のライブラリを選択します。エクスポートスタイルを編集し、抽出されたスタイルをFigma Makeがどのように使用するかを明確にするガイドラインを追加して、Figma Makeファイルをさらにカスタマイズできます。
ステップ1: Figma DesignライブラリをエクスポートしてFigma Makeのスタイルコンテキストとして使用する
Figma Designで、Figma Makeファイルのスタイルコンテキストとして使用するライブラリを選択します。編集可アクセス権を持つ人だけがライブラリをFigma Makeにエクスポートできます。この手順は、ご自身や他のユーザーがFigma Makeでライブラリを使用する前に一度だけ実行する必要があります。
- Figma Makeにエクスポートしたいアセットを含むFigma Designファイルで、左サイドバーにある[アセット]タブを選択します。
- [ライブラリ]をクリックします。
- [このファイル]セクションで現在のファイルを見つけて、[公開] をクリックし、ライブラリ公開モーダルを開きます。
- ライブラリをチーム、ワークスペース、または組織に公開したことがない場合は、モーダルの下部にある[公開]をクリックします。Figma Makeにエクスポートできるのは、公開されたライブラリのみです。このプロセスには数分かかる可能性があります。
-
[Make用にエクスポート]をクリックします。
エクスポートプロセスが完了するまでに数分かかる可能性があります。このプロセス中、FigmaはFigma Makeで参照するためのCSSファイルを組み立ててエクスポートしています。
- エクスポートプロセスが完了したら、[Figma Makeに移動]をクリックします。
ライブラリを抽出してFigma Makeファイルで選択した後、コードビューに進みます。stylesフォルダを開き、globals.cssをクリックして、生成されたスタイルを参照します。通常、スタイルは4つのカテゴリに分類されているのが一般的です。
- カラーパレット
- タイポグラフィ(フォントと階層構造)
- バリアブル
- ボーダーと角の半径
抽出されたCSSは、完全なライブラリの簡略化されたバージョンであり、すべてのデザインの詳細を記録するわけではありませんのでご注意ください。一貫性と明確さを確保するため、guidelines.mdファイルにコンテキストとルールを追加することをお勧めします。
Figma Makeでは現在、デザイントークンの完全な抽出をサポートしていません。代わりに、バリアブルのサブセットを抽出し、それらを使用して、未処理の値を含むグローバルCSSファイルを生成します。つまり、バリアブルの構文は定義されたとおり正確に保持されるわけではありません。1:1のマッピングではなく、バリアブルの簡略化されたビューが1つの.cssファイルに表示されます。これにより、生成されたコードがあなたの基礎スタイルと整合することが保証されます。
バリアブルに追加のルールやパラメーター(特に状態に関連するもの)がある場合は、システム全体の一貫性を保つため、guidelines.mdファイルに文書化することをお勧めします。
ライブラリを1つずつ使用することができます。所属する組織が複数のライブラリにわたってデザインシステムを管理している場合は、コアコンポーネントと最も基本的なスタイルを含むライブラリを選択することをお勧めします。Figma Makeにエクスポートしてもコンポーネント自体は抽出されませんが、このライブラリは、そのプロパティ内でコンテキストとして使用される色やタイポグラフィを参照する可能性があります。
いいえ、ライブラリをFigma Makeにエクスポートする必要があるのは1度だけです。このライブラリに対し、閲覧のみのアクセス権を持つ組織内のユーザーは、Figma Makeファイルでもこのライブラリを使用することができます。
はい、誰かがデザインライブラリを編集し、更新されたバージョンをFigma Makeで使用したい場合は、ライブラリを再度エクスポートする必要があります。再度エクスポートされたライブラリは、その後追加されるFigma Makeファイル用にのみFigma Makeで更新され、更新前に生成されたFigma Makeファイルが遡及的に更新されることはありません。
ステップ2: Figma Makeファイルでライブラリを参照する
ライブラリのスタイルコンテキストをFigma Makeに追加すると、あなたも所属するチームや組織の他のメンバーも、それを使用して、スタイル付きの機能的なプロトタイプやWebアプリを作成できます。ライブラリに対し、閲覧のみのアクセス権を持つチームまたは組織内のユーザーは、Figma Makeファイル内でこのライブラリを表示および使用できます。
- Figma Makeファイルで、[ライブラリを選択]をクリックします。
- 使用するライブラリを選択します。
すぐにプロンプトを開始するか、ライブラリのスタイルを編集したり、ガイドラインを追加したりすることで、Figma Makeがライブラリのスタイルを使用する方法をさらにカスタマイズできます。ライブラリを選択してプロンプトを開始すると、このファイル内のすべての生成されたコンテンツがそれらのスタイルを参照します。
ヒント: Figma Designライブラリを参照することで、アイデアを模索し、機能的なプロトタイプやWebアプリを生成する際に、Figma Makeのスタイルコンテキストを活用できます。さらに具体的な説明については、以下をお試しください。
ライブラリのスタイルを編集する
Figma DesignライブラリをFigma Makeにエクスポートすると、ライブラリのプロパティのCSSファイルが自動的に生成されます。必要に応じて、CSSをカスタマイズしてFigma Makeを調整できます。CSSの変更は、このFigma Makeファイルにのみ影響を与えます。
- をクリックします。
- [スタイルを編集]を選択して、このライブラリのCSSプロパティを更新します。
生成ガイドラインを追加する
ガイドラインを使用すると、スタイルコンテキストの使用方法に関するルールや指示をFigma Makeに与えることができます。ガイドラインは、このファイルで作成したものにのみ適用され、このライブラリやライブラリ自体を参照している他のファイルには影響を与えません。
- をクリックします。
- [ガイドラインを編集]を選択し、このFigma Makeファイルのガイドラインを追加します。
guidelines.mdファイルは自由形式のテキストファイルですので、Figma Makeに従わせたい特定のガイドラインを自由に追加することができます。
ヒント: guidelines.mdファイルは、ライブラリを選択しているかどうかに関わらず使用でき、必要に応じて任意のFigma Makeファイルを作成できます。
閲覧権限が解除された場合、どうなりますか?
ライブラリに対し、閲覧のみのアクセス権を持っていたユーザーのアクセス権が取り消された場合、Figma Make内でそのライブラリを表示したり使用したりすることはできなくなります。ただし、そのライブラリを使用して作成した以前のFigma Makeファイルは引き続き利用でき、ライブラリ名は「不明」と表示されます。
いいえ、CSSのスタイルやガイドラインの更新は、そのFigma Makeファイルにのみ影響を与えます。
よくある質問
いいえ、Figma Makeでのプロンプトに使用されたFigma Designライブラリを現時点で削除することはできません。
ライブラリを参照しながら生成を開始した場合、ライブラリを削除することはできません。別のライブラリを使用するか、特定のライブラリの使用を中止するには、新しいFigma Makeファイルを作成して生成を開始してください。