Related Videos

• Figmaにおけるエクスポートのガイド

  はじめに

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

  すべてのチームまたはプランでサポートされます。

  閲覧のみ以上のファイルのアクセス権があるユーザーは、エクスポート設定を追加してアセットをエクスポートできます。

  デザインを共有する準備ができたら、Figmaからデザインをエクスポートします。Figmaでアセットをエクスポートする方法は、エクスポート設定でカスタマイズできます。この設定では、エクスポートの対象と方法を定義できます。

  選択範囲にエクスポート設定を追加する場合は、形式と関連設定を設定します。

  ヒント! デザインツール間でレイヤー、オブジェクト、グループ、フレームをコピーすることもできます。ツール間でこれらのアセットをコピーして貼り付けることをおすすめします。ツール間でのアセットのコピー方法はこちら→

  エクスポート形式

  PNGにエクスポート

  (Portable Network Graphics) 

  PNGは、インターネットで画像を転送するために一般的に使用されるラスター画像(ビットマップ画像)形式です。ビットマップ画像では、各ピクセルまたは"ビット"が単一の色を表します。これらのビットが"マップ"にレンダリングされて、完全な画像を作ります。

  PNGは無損失のビットマップ形式であり、アセットが圧縮されても画像品質が低下しません。このため、画像をエクスポートしても元の品質が維持されます。

  Figmaは、RGBAカラーモデルを使用する32ビットのPNGをサポートします。RGBAのAはアルファチャネルを示し、ピクセルの不透明度を制御します。アルファ値なしにPNGをエクスポートすることはできません。

  エクスポートせずに共有しますか?

  オブジェクトを右クリックして、[コピー/貼り付け] > [PNGとしてコピー]を選択します。クリップボードにPNGが追加されます(デフォルトで2倍サイズになりますが、オブジェクトにエクスポート設定があれば、その最大のエクスポート設定が使用されます)。また、次のショートカットを使用することもできます:

  • Mac: Command Shift C
  • Windows: Control + Shift + c

  サポートされているエクスポート設定: コンテンツのみ

  JPGにエクスポート

  (Joint Photographic Group)

  JPGも同様にピクセルベースの画像形式です。PNGとは異なり、各JPGの寸法は固定です。JPGをエクスポートすると、画像が損失圧縮されます。ファイルサイズは小さくなりますが、画質が低下します。

  このためWeb上とは対照的に、JPGが印刷デザインや写真で使用されていることがお分かりになるでしょう。

  サポートされているエクスポート設定: コンテンツのみ

  SVGにエクスポート

  (Scalable Vector Graphics)

  SVGはXMLベースのベクターグラフィックスです。これらは数値と座標に基づく図形であり、あらゆる画面でレンダリングできます。

  SVGは、ピクセルに依存しない拡大縮小可能な形式です。SVGはスクリプトやコードで表すことができるため、デジタルデザインで一般的に使用されています。

  SVGのエクスポートは、等倍でのみサポートされます。またSVGは、コードで値を調整するか、幅と高さの変数を使用することで拡大縮小できます。例: <img src="image.svg" width="50px">.

  SVG形式ではサポートされておらず、Figmaではサポートされている、いくつかの機能があります。

  • 円錐形またはひし形グラデーション。これらは放射状グラデーションとしてエクスポートされます。
  • 背景のぼかし範囲はSVGにエクスポートされません。それらのレイヤーは、直接ぼかす必要があります。
  • テキストはデフォルトで字形としてエクスポートされます。つまり、テキストレイヤーをSVGとしてエクスポートした後に編集することはできません。テキストの編集を保存するには、をクリックして、メニューにある[アウトラインテキスト]設定をオフにします。
  • 線は塗りとしてSVGにエクスポートされます。

  サポートされているエクスポート設定:

  • コンテンツのみ
  • "id"属性を含む
  • アウトラインテキスト
  • 線の簡素化

  PDFにエクスポート

  (Portable Document Format)

  PDFでは、複雑な対話型のレイアウトを共有できます。PDFには、固定レイアウトのテキスト、フォント、ベクター画像、画像が含まれます。

  PDFでは、任意のシステムで個別のデザイン要素をレンダリングして操作できます。そのためPDF形式は、ソフトウェア、ハードウェア、OSの種類にかかわらず多目的に使用できます。

  Appleのモバイル開発言語であるXcodeはPDFをサポートしています。このため、PDFはiOSアプリケーションの構築に適しています。Figmaでは、PDFを使用してスライドデッキをエクスポートしたり、iOS開発用のアセットを共有したりします。また、印刷デザインのモックアップに使用することもできます。

  • PDFのエクスポートは、等倍のみがサポートされています。別の拡大縮小率でアセットをエクスポートするには、他の形式を選択します。
  • Figmaは現在、編集可能なテキストのエクスポートをサポートしていません。FigmaからエクスポートされるPDFのテキストはすべて編集できません。ただし、PDFをブラウザまたは他の対応しているソフトウェアで表示する場合は、テキストを選択してコピーできます。

  Figmaのブログ記事「Path to creating a precise PDF Exporter」で、PDFエクスポートの開発の裏話をご覧ください。

  追加のエクスポート設定

  選択範囲にエクスポート設定を追加する場合に、これらの追加設定にアクセスします。

  プロパティパネルの[エクスポート]セクションでをクリックし、エクスポート設定を表示して調整します。

  重なり合うレイヤーを無視する

  このオプションはPNG、JPG、SVG形式で使用できます。

  • オン: エクスポート内の選択されているレイヤーのみが含まれます。選択したオブジェクトに交差または重複しているその他のオブジェクトは、エクスポートに影響しません。
  • オフ: 選択しているレイヤーやグループと交差するすべてのレイヤーが含まれます。

  バウンディングボックスを含める

  このオプションは、テキストレイヤーをPNG、JPG、SVG形式でエクスポートする場合にのみ使用できます。

  • オン: テキスト自体の寸法に基づいてエクスポートのサイズが決定されます。文字とバウンディングボックスの間にスペースがある場合は、トリミングおよび破棄されます。
  • オフ: テキストレイヤーのバウンディングボックスにより、エクスポートのサイズが決定されます。バウンディングボックスからはみ出すテキスト部分は、トリミングおよび破棄されます。

  "id"属性を含む

  このオプションは、SVGのエクスポートにのみ使用できます。

  オンにすると、"id"タグがSVGのメタデータに追加されます。Figmaでは、レイヤーパネルにあるオブジェクト名の"id"が基準として使用されます。

  アウトラインテキスト

  このオプションはSVGのエクスポートにのみ使用できます。この設定はデフォルトでオンです。

  オンにすると、テキストレイヤーがすべて字形に変換されます。引き続きテキストを編集するには、この設定をオフにする必要があります。これで、他のシステムであらゆる文字列を調整できます。

  線の簡素化

  Figmaでは、レイヤーに内側、中央、外側の線を適用できます。SVG形式では中央の線のみがサポートされます。

  線を簡素化すると、他のシステムで内側と外側の線を正しくレンダリングできます。この設定はSVGのエクスポートでのみ使用でき、デフォルトでオンになっています。線の簡素化は、次の条件で使用できます:

  • エクスポート形式がSVG
  • レイヤーがベクターネットワークであり、基本図形でない
  • レイヤーがベクターネットワークに適用された内側または外側の線を使用

  メモ: 線の簡素化を選択しないと、線が太くなり、マスクが適用されます。視覚効果は同じですが、SVGコードに行を追加する必要があります。

  Figmaからのアセットのエクスポート

  閲覧者がFigmaファイルからアセットをコピーまたはエクスポートすることを制限できます。この機能はプロフェッショナルおよびエデュケーションチーム、またはFigmaビジネスでサポートされます。

  右サイドバーに[エクスポート]セクションが表示されない場合はこの設定が有効になっており、このファイルからアセットをエクスポートできません。

  右サイドバーのエクスポートオプションにアクセスする手順は次のとおりです:

  • 閲覧のみのアクセス権があるコラボレーターは、右サイドバーの[エクスポート]タブからエクスポート設定にアクセスできます。
  • 編集可のアクセス権があるコラボレーターは、[デザイン]タブの[エクスポート]セクションを表示できます。

  選択する

  エクスポートするオブジェクトとレイヤーを選択します。たとえば単一のレイヤーやオブジェクト、複数選択のオブジェクト、キャンバス上のすべての要素などです。

  スライスツールを使用して、キャンバスの一部をエクスポートすることもできます。

  エクスポート設定の追加

  エクスポート設定は、拡大縮小、形式、および他の形式固有の設定を含むアセットのエクスポート方法を制御します。エクスポート設定は、右サイドバーの[エクスポート]セクションで表示、追加、削除します。

  ヒント! エクスポート設定を適用済みの場合は、キーボードショートカットを使用して選択範囲をエクスポートできます。

  • Mac: Shift Command E
  • Windows: Shift + Ctrl + E

  次に[エクスポート設定]を使用して、エクスポート方法を決定できます。

  選択範囲に追加できるエクスポート設定の数に制限はありません。異なる形式や拡大縮小を組み合わせることもできます。

  1. 右サイドバーの[エクスポート]セクションのをクリックします。
  2. [サフィックス]フィールドを使用して、エクスポート形式を選択します。PNG、SVG、JPG、PDFから選択します。
  3. リスト内のデフォルトから拡大縮小を選択するか、表示されたフィールドを使用して、カスタムのサイズ調整または拡大縮小を入力します。次の数字と文字を入力します:
     • 倍率として使用する値の後ろにxを追加します。
     • 固定幅を設定する値の後ろにwを追加します。
     • 固定の高さを設定する値の後ろにhを追加します。
  4. をクリックして[エクスポートオプション]メニューを開き、必要な追加のエクスポート設定を調整します。
  5. [プレビュー]の横のをクリックして、アセットのプレビュー表示を確認します。

  ヒント! 倍率を大きくしてデザインアセットをエクスポートすると、より高解像度のエクスポートが作成され、エクスポートのぼやけが低減されます。この結果、ファイルサイズが大きくなり、解像度が高くなります。

  メモ: Figmaではレイヤー名の/がすべて階層として解釈され、フォルダ内の選択範囲がエクスポートされます。レイヤー名を変更し、階層を削除して、アセットが階層フォルダにエクスポートされないようにすることができます。レイヤー名の変更方法はこちら→

  エクスポート設定の編集または削除

  エクスポート設定は、いつでも削除または編集できます。

  1. 設定のフィールドの1つをクリックします。
  2. [エクスポート]セクションの上にあるアイコンをクリックします。
  3. 現在の選択範囲からこの設定が削除されます。

  アセットのエクスポート

  Figmaでは、選択範囲に適用するエクスポート設定が、ファイルの[エクスポート]リストにすべて記録されます。このため1回のアクションで、エクスポートリストに記録されたアセットをすべてエクスポートできます。

  レイヤーやオブジェクトの特定の選択範囲を選択してエクスポートしたり、すべてのアセットを一括でエクスポートしたりすることができます。

  特定の選択対象のエクスポート

  エクスポート設定で任意の選択対象をエクスポートします。この操作は、選択範囲にエクスポート設定を最初に適用するとき、またはすでにエクスポートが設定されている選択範囲を選択することで実行できます。

  1. エクスポートするレイヤーを選択します。
  2. エクスポート設定を追加または調整します。
  3. 右サイドバーの[エクスポート]ボタンをクリックします。
  4. 現在の選択対象がエクスポートされます。

  一括エクスポート

  エクスポートリストを使用してアセットを一括でエクスポートします。これにはエクスポート設定を追加したすべての選択対象が含まれます。

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

  ヒント! デザインを.figファイルとして保存して、すべてのFigmaファイルをエクスポートします。これには、元のファイルからのコメント、バージョン履歴、アクセス許可は含まれません。.figファイルはFigmaでのみ開くことができます。

  1. クリック
     をクリックしてメニューを開きます。
  2. [ファイル] > [ローカルコピーの保存]を選択します。
  3. ダウンロードフォルダにファイルのコピーがダウンロードされます。
• Figmaへのファイルのインポート

  はじめに

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

  すべてのチームまたはプランでサポートされます。

  すべてのユーザーが自分のドラフトにファイルをインポートできます。

  チームに対して編集可のアクセス権があるすべてのユーザーが、チームにファイルをインポートできます。

  インポートの詳細については、インポート作業の開始ガイドをご覧ください。

  Figmaにファイルをインポートするには、いくつかの方法があります。

  ファイルインポーター

  ファイルインポーターでは、コンピューターからローカルファイルを選択して、ファイルブラウザにインポートできます。

  インポートには次の方法を使用できます:

  ✅ Sketchファイル(.sketch)
  ✅ Figmaファイル(.fig)
  ✅ 画像ファイル(PNG、JPG、HEIC、GIF)

  ヒント! サポートされているSketchの機能については、Sketchファイルのインポートの記事を参照してください。

  1. ファイルブラウザで、ファイルのインポートタイルをクリックします。ファイルブラウザのファイルページの最上部セクションにあります。

  2. ダイアログウィンドウからファイルを選択し、[開く]をクリックしてインポートプロセスを開始します。

  3. インポートには、ファイルサイズにより数秒かかる場合があります。[完了]をクリックしてファイルブラウザに戻ります。

  ファイルのドラッグ&ドロップ

  コンピューターのフォルダまたはデスクトップからファイルをFigmaに直接ドラッグできます。これはFigmaデスクトップアプリとFigma Webアプリ(ブラウザベース)の両方で使用できます。

  ファイルは、ファイルブラウザまたはエディターにドラッグ&ドロップできます。方法によりサポートされるファイル形式が異なります。

  ファイルブラウザ

  ✅ Figmaファイル(.fig)
  ✅ Sketchファイル(.sketch)
  ✅画像ファイル(PNG、JPG、GIF)

  エディター

  ✅ ベクターファイル(SVG)
  ✅画像ファイル(PNG、JPG、GIF)

  Figmaへのファイルの追加

  1. ファイルを追加するFigmaのページを開きます。この操作は、ファイルブラウザまたは特定のFigmaファイルで実行できます。
  2. インポートするファイルを、デスクトップやフォルダで探して選択します。
  3. ファイルをFigmaにドラッグします。Figmaに青いボックスが表示されたら、ファイルをインポートできます。
  4. マウスから指を離すと、インポートプロセスが開始されます。ファイルサイズにより数秒かかる場合があります。
  5. 完了したら、[完了]をクリックしてファイルブラウザに戻ります。