Figmaからのエクスポート – Figma Learn - ヘルプセンター

はじめに

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

すべてのプランで利用できます

ファイルの閲覧のみアクセス権があれば、ファイルのオーナーがファイルのコピーと共有を制限していない限り、ユーザーはアセットをエクスポートできます

ファイルの編集可アクセス権があれば、ユーザーはスライスツールを使用できます

コンテンツをエクスポートして、他のユーザーとのデザインの共有、ツール間でのコンテンツの移動、Figma以外での作業内容のコピーの保存を行います。

ヒント: 一部のオブジェクトはデザインツール間でコピーと貼り付けができます。オブジェクトを右クリックして[コピー/貼り付け]にカーソルを合わせ、[PNGとしてコピー]または[SVGとしてコピー]を選択します。

エクスポートするコンテンツの選択

Figmaデザインからエクスポートできるのは、以下の通りです。

レイヤー、フレーム、コンポーネント、グループ、セクション。Figmaでのオブジェクトの選択 →
スライスツールを使用したキャンバスの一部。
ページのキャンバス全体。
.figファイルとしてのファイル全体。ファイルのローカルコピーの保存の詳細 →

スライスツールを使用したエクスポートするデザインの部分選択

ファイルの編集可アクセス権があれば、ユーザーはスライスツールを使用してキャンバスの一部を選択してエクスポートできます。デザインワークフローの部分的な共有や、高品質のスクリーンショットの作成に有効です。

[スライス]ツールは、ツールバーの[リージョン]ツールのドロップダウンにあります。スライスを作成するには、[スライス]ツールをクリックして、エクスポートしたい領域の上でドラッグします。必要に応じて、スライスの移動やサイズ変更ができます。スライスの境界内にあるコンテンツのみがエクスポートされますので注意してください。スライスを配置すると、他のオブジェクトと同様にエクスポート設定を適用できます。

ヒント: スライスを使用して、エクスポートしたオブジェクトの周囲のパディングを制御することもできます。それ以外の方法では、パディングはシェイプ全体の境界から計算されます。後者の方法ではシェイプのサイズが変わるとパディングが調整されますが、スライスでは変わりません。

Exporting a slice.gif

エクスポート設定の位置

エクスポートするコンテンツの選択後、[エクスポート]セクションの設定でエクスポート設定を作成します。[エクスポート]セクションの位置は、ファイルのアクセス権レベルや使用中のモードによって異なります。

注: [エクスポート]セクションが表示されない場合は、ページを更新してください。それでも表示されない場合は、ファイルオーナーによって、閲覧者がファイルからアセットをコピーまたはエクスポートできないよう制限されている可能性があります。ファイルでのコピーと共有の制限の詳細 →

デザインモード

ファイルの編集可アクセス権がある場合は、右サイドバー下部に[エクスポート]セクションが表示されます。

ファイルの閲覧のみアクセス権がある場合は、右サイドバーの[エクスポート]タブに[エクスポート]セクションが表示されます。
Frame 1 (10) (1) (1).png

開発モード

開発モードを使用中の場合は、右サイドバーに[エクスポート]セクションがありますが、オブジェクトを選択している場合にのみ表示されます。

Templates (3) (1).png

エクスポート設定の追加

[エクスポート]セクションで、選択範囲に適用するファイル形式とエクスポート設定を選びます。

エクスポートするレイヤーを選択します。現在のページのキャンバス全体をエクスポートする場合は、キャンバス上のすべての選択を解除します。
[エクスポート]セクションの[プラス]をクリックして、エクスポート設定を追加します。必要な数のエクスポート設定を選択範囲に追加できます。
エクスポート設定項目を設定します。エクスポート形式および設定の詳細 →

ヒント: 塗りがあるフレームをエクスポートする場合は、右サイドバーの[塗り]セクションにある[エクスポートに含める]のチェックボックスのチェックを外すと、エクスポートされたファイルの塗りを非表示にすることができます。

(オプション)[プレビュー]をクリックすると、アセットの見え方を確認できます。複数のオブジェクトを選択している場合は、[プレビュー]設定は表示されません。
[エクスポート]をクリックします。

ブラウザでFigmaを使用中の場合、エクスポートしたファイルは、ブラウザの環境設定で設定したダウンロード先に送信されます。Figmaデスクトップアプリを使用中の場合は、エクスポートするファイルの名称変更と送信先の指定が求められます。

注: スラッシュ区切りの命名規則を使用している場合、エクスポートしたオブジェクトは命名構造に一致するネストされたフォルダに分類されます。たとえば「ボタン/丸/デフォルト」という名称のレイヤーをエクスポートする場合、「ボタン」「丸」というフォルダにネストしてエクスポートされ、ファイル名は「デフォルト」になります。

エクスポート設定による全選択範囲の一括エクスポート

現在のページでエクスポート設定が適用されている、すべての選択範囲を一括エクスポートできます。

[メインメニュー]をクリックし、オプションから[ファイル]、[エクスポート]の順に選択します。次のキーボードショートカットを使用することもできます。
- Mac: Shift Command E
- Windows: Shift Ctrl E
[エクスポート]モーダルには、エクスポート設定を適用した選択範囲がすべて表示されます。各選択範囲で次の操作を実行できます。
- アセットのスケール、形式、寸法を表示する
- サムネイルまたはレイヤー名にマウスカーソルを合わせて、エクスポートするファイル名を表示する
- サムネイルをクリックして、キャンバス内にその選択対象を表示する
エクスポートしない選択対象の横にあるチェックボックスをオフにします。
[エクスポート]をクリックして、選択したアセットをエクスポートします。