FrontifyとFigma – Figma Learn - ヘルプセンター

Frontifyはブランド管理プラットフォームです。チームによるブランドガイドライン、テンプレート、アセットの一元管理を容易にし、クリエイティブなコラボレーションを促進します。

Frontifyには、FigmaデザインファイルとFrontifyブランドシステムをつなげる連携機能が2つあります。

Frontifyプラグイン: Frontifyに保存されているメディア、カラー、フォントなどのブランド要素にFigmaデザインファイルから直接アクセスして追加する
Figma Content Block: FigmaのアセットをFrontifyのガイドラインページに追加する

ご使用になるには、有料Frontifyプランが必要になります。これにはプロジェクト機能が含まれており、少なくとも1つのFrontifyプロジェクトへの編集者権限が含まれています。

FigmaへのFrontifyアセットの追加

Frontifyプラグインで、ブランドカラー、テキストとフォント、ローカルスタイル、メディアライブラリ、アイコンとロゴのライブラリにFigmaデザインファイルから直接アクセスして使用できます。

プラグインが承認されたら、FigmaデザインファイルでFrontifyプラグインからアセットを使い始めることができます。

Figmaのレイヤー、コンポーネント、ページ、プロトタイプをFrontifyのガイドラインページに追加します。そのためには、FigmaアセットをFrontifyにインポートし、Figma Content Blockがインストール済みであることを確認する必要があります。

Frontifyで、ブランドの1つから[プロジェクト]タブを選択します。
プロジェクトを開き、右上隅にある[新規]をクリックし、ドロップダウンから[Figma]を選択します。
Figmaアカウントが接続されていない場合は、Figmaにログインしアクセスを承認するように指示されます。
- 複数のFigmaアカウントにログインしている場合は、承認ウインドウの下部にある[アカウントを切り替え]をクリックして、使用する別のFigmaアカウントを選択します。
URLをFigmaデザインファイルまたはレイヤーに貼り付けます。接続されたFigmaアカウントには、少なくともファイルへの閲覧のみアクセス権、またはプロトタイプへの編集可アクセス権が必要です。
インポートするFigmaアセットを選択します。⌘ Command / ⇧ Controlを押しながら、複数のアセットを選択できます。
[アセットを作成]をクリックします。

Figma Content Blockをインストールすると、Figmaアセットをガイドラインページに追加できるようになります。

Figma Blockは1つのFigmaチームに一度だけインストールする必要があります。たとえば、FrontifyにインポートしようとしているFigmaアセットが2つのチームに属している場合は、それぞれのチームにFigma Content Blockをインストールします。

ブランドのガイドラインを1つ開き、編集モードに切り替えます。
ガイドラインページの+ Content Blockを追加アイコンをクリックして、ブロック選択機能を開きます。
UIとコードセクションで[Figma]を選択するか、または検索バーにFigmaと入力します。
[Figmaアセットを選択]をクリックします。
Figmaアセットを含むプロジェクトを選択し、アセットをクリックしてアップロードします。
ブロックの設定アイコンをクリックし、ライブモード(埋め込み)または画像モード(SVG)から、プレビューオプションを選択します。次の点にご注意ください。
- ガイドラインページの閲覧者が埋め込まれたFigmaアセットを見るためには、少なくともデザインファイルへの閲覧のみアクセス権を持っていること、またはリンクを知っている人は誰でも閲覧可が有効になっているファイルであることが必要です。Figmaのファイル権限の詳細→
- ブロックのプレビューが画像に設定されている場合は、ガイドラインページへのアクセス権を持つユーザーは誰でもキャプチャーされた画像をみることができます。Figma Blocksへのその他のカスタマイズの詳細→