ダウンロードした .fig は、Figmaのファイルブラウザから読み込みます。読み込む前に、ファイル形式、利用条件、更新日を確認しておくと、古い版や別用途のデータを取り違えずに作業を始められます。
この記事はFigma公式の手順と、2026年10月3日の配布素材3点の読み込み確認をもとに整理しています。読み込み後の画面は記事後半に掲載しています。文字の編集、フォントの充足、書き出しファイルの寸法は別の確認が必要です。
あなたはどっち？利用環境に合わせた最適プラン判定フロー
読み込みの流れを、先に確認しておきます。内容は、この記事の説明にもとづく目安です。メニュー名はUI言語や更新で表示が異なる場合があります。Figmaの最新の手順は、公式の「ファイルのインポート」で確認してください。
- まず、手元のデータの種類を確認する。.figはFigma Designのファイル。WordPressのテーマ本体やSWELLの着せ替え設定とは用途が異なる。
- 配布元から取得したファイルを、名前と拡張子が分かる場所へ保存する。ZIPの場合は、中のファイル形式と配布者の手順を確認する。
- Figmaのファイルブラウザで、Create new → Import → Import from computerを選び、対象の.figを選んで、読み込みの完了を確認する（ドラッグ＆ドロップでも読み込める）。
- 読み込み先と権限を確認する。各プランで自分のDraftsへのインポートが可能。フォルダへ取り込む場合は編集権限を確認する。
- 編集前に、配布物の版、利用条件、フォント、ページと幅、部品の構造の5項目を確認する。配布原本を残し、作業用のコピーで編集する。
- フォントの警告が出たら、指定フォントのファミリーとスタイルを確認する。読み込めない場合は、取り込み先と権限を切り分ける。
.figを読み込んだだけでは、WordPressサイトにデザインが実装されるわけではありません。
.figとWordPress用のデータを区別する
.fig はFigma Designのファイルです。WordPressのテーマ本体や、SWELLの着せ替え設定とは用途が異なります。SWELL向けFigmaテンプレートを読み込んでも、それだけでWordPressサイトへデザインが実装されるわけではありません。
| 手元のデータ | 確認すること |
|---|---|
.fig | Figma Designへ読み込むファイルか |
| ZIPファイル | 中のファイル形式と配布者の手順 |
| Figmaへの共有リンク | 閲覧、複製、編集の条件 |
| WordPress用のテーマ・設定データ | WordPress側の導入手順 |
Figma公式の対応形式一覧には .fig が含まれています。ファイル形式の一覧にあることと、個々のデータが正しく開けることは別なので、配布者が示す形式と版も確認します。Figma公式：ファイルのインポート
ファイルブラウザから読み込む
公式手順では、ファイルブラウザの Create new メニューから Import、Import from computer の順で進みます。
- 配布元から取得したファイルを、名前と拡張子が分かる場所へ保存する。
- Figmaのファイルブラウザを開く。
Create new→Import→Import from computerを選ぶ。- 対象の
.figを選び、Openを押す。 - 読み込みの完了を確認し、
Doneを押す。
ファイルブラウザへドラッグ＆ドロップして読み込む方法もあります。メニュー名はUI言語や更新で表示が異なる場合があります。Figma公式のインポート手順
読み込み先と権限
公式案内では、各プランで自分のDraftsへのインポートが可能です。フォルダへ取り込む場合は編集権限を確認し、Organization・Enterpriseでは席の条件も確認します。
共有されているプロジェクトへ入れられないときは、ファイルが壊れていると決めつけず、取り込み先と権限を切り分けます。自分の作業場所へ取り込めるかを確認し、共有先へ置く必要がある場合はチームの条件を確認してください。
編集前に確認する5項目
| 項目 | 確認内容 |
|---|---|
| 配布物の版 | ファイル名、配布元の更新日、変更履歴 |
| 利用条件 | 商用利用、加工、再配布、納品の条件 |
| フォント | ファミリー、Regular／Boldなどのスタイル、欠落警告 |
| ページと幅 | 必要な画面が含まれるか、PCとスマホのフレーム幅 |
| 部品の構造 | コンポーネント、インスタンス、スタイル、変数の設定 |
まず配布原本を残し、作業用のコピーで編集します。見た目が同じ部品でも、文字だけを上書きできる場合と、メインコンポーネント側の変更が必要な場合があります。アセットとコンポーネントの使い方
フォントの警告が表示された場合
欠落フォントの警告が出たときは、指定フォントのファミリーとスタイルを確認します。文字の置換によって改行や幅が変わる可能性があるため、元の見た目を残したい場合は、必要なフォントと利用権を先に確認します。
ローカルのフォントを使う条件は、ブラウザとデスクトップアプリで異なります。詳しい切り分けは欠落しているフォントの対処記事を参照してください。Figma公式：欠落フォント
Figmaメソッドの配布素材
| 素材 | 用途 |
|---|---|
| SWELL向けFigmaテンプレート | SWELLを使うサイトのデザイン検討 |
| ボタン素材パック | ボタンの見た目と部品の検討 |
| 見出し素材パック | 見出しの文字と装飾の検討 |
各配布ページに記載された更新情報と、実際に取得するファイルを照合してください。料金と利用条件は入手元で確認します。
読み込めない場合の切り分け
| 状況 | 確認する対象 |
|---|---|
| Googleドライブに「プレビューできません」と出る | ファイルをダウンロードして、Figmaのファイルブラウザーから読み込む |
| .figを画像のようにキャンバスへ置こうとしている | 新しいデザインファイルとして扱うため、ファイルブラウザーからインポートする |
| 共有先へ入れられない | 自分のDraftsと、共有フォルダーの権限・シート条件を分けて確認する |
| ダウンロードした名前が違う | 配布元のファイル名と拡張子を確認し、必要なら再取得する |
| 読み込み後に文字を編集できない | 編集権限と、欠落しているフォントを確認する |
拡張子を変更するだけで別形式のファイルを .fig に変換することはできません。Figma向けのファイルかを配布元で確認し、元データを残して作業してください。
配布ファイル3点を実際に読み込んだ結果
2026年10月3日、ブラウザー版Figma Designの日本語UIで、配布ファイルをドラフトへインポートして確認しました。これは今回の読み込み・表示の確認で、すべての文字の編集、フォントの充足、利用環境での再現を保証するものではありません。
今回の画面では、ドラフトの「さらに表示」から「インポート」→「コンピューターからインポート」と進み、3つの.figを選択しました。「3個のファイルがドラフトにインポートされました」の完了表示を確認し、それぞれの編集画面を開いています。UIの配置が異なる場合は、公式資料のファイルブラウザーのImportを確認してください。
TEMPLATE -SWELL_v02.figではPC・SPのトップ、記事、カテゴリー、著者ページとSWELLブロック集のレイヤーを確認しました。button_all.figではbutton_000001〜button_000035、heading.figではheading_00001〜heading_00040のレイヤーを確認しました。
不足フォントの有無は、読み込み完了だけでは判断できません。文字レイヤーの編集、フォントの照合、書き出しファイルの寸法は別に確認してください。
よくある質問：Figmaの.figファイルの読み込みで迷ったときのチェックリスト
.figファイルは、どう読み込みますか？
Figmaのファイルブラウザで、Create new → Import → Import from computerを選び、対象の.figを選びます。ドラッグ＆ドロップでも読み込めます。
SWELL向けのFigmaテンプレートを読み込めば、サイトに反映されますか？
反映されません。SWELL向けFigmaテンプレートを読み込んでも、それだけでWordPressサイトへデザインが実装されるわけではありません。
共有プロジェクトに読み込めないのは、ファイルが壊れているからですか？
決めつけないでください。取り込み先と権限を切り分けます。自分の作業場所へ取り込めるかを確認し、共有先へ置く必要がある場合は、チームの条件を確認します。
フォントの警告が出たら、どうしますか？
指定フォントのファミリーとスタイルを確認します。文字の置換によって、改行や幅が変わる可能性があるため、元の見た目を残したい場合は、必要なフォントと利用権を先に確認します。
読み込む前に、何を確認しますか？
ファイル形式、利用条件、更新日を確認します。編集前に確認する5項目として、配布物の版、利用条件、フォント、ページと幅、部品の構造があります。
配布された素材は、そのまま編集してよいですか？
まず配布原本を残し、作業用のコピーで編集します。利用条件（商用利用、加工、再配布、納品）も確認してください。