Figma連携とは、Figmaで作成したデザインをHirameki 7のWebサイトエディターへ取り込み、
テキストや画像などを編集できる状態でページ制作に活用するための機能です。
この記事では、Figma側の準備から変換用ファイルの取得、Hirameki 7への取り込み方法、
取り込み後に確認したいポイントまで説明します。
❶ Figma連携とは
Figma連携を利用すると、Figmaで作成したデザインを、Hirameki 7で編集可能な要素として取り込み、 ページ制作のベースとして活用できます。
Figma上のデザインを1枚の画像として貼り付けるのではなく、テキストや画像などの要素に分解して取り込むため、 取り込み後もHirameki 7のエディターで内容を編集できます。
Figmaでデザインを作成
↓
変換用ファイルを書き出す
↓
Hirameki 7へアップロード
↓
エディターへ反映
↓
表示を確認・調整
ポイント
FigmaとHirameki 7ではデザインの表現方法が異なります。Figma連携は、Figmaのデザインをそのまま完成ページとして
再現するための機能ではなく、Hirameki 7でページ制作を進めるためのベースを作る機能です。
取り込み後は、PC・モバイルそれぞれの表示を確認し、必要に応じて仕上げてください。
❷ 事前準備とFigmaデザインのポイント
Figmaファイルの編集権限を確認する
「Figma to Hirameki 7」を利用するには、対象となるFigmaファイルの編集権限が必要です。 閲覧権限ではプラグインを実行できません。
OrganizationやEnterpriseなどの組織プランでFigmaを利用している場合は、 管理者が承認したプラグインのみ利用できる設定になっていることがあります。 「Figma to Hirameki 7」が表示されない、または実行できない場合は、Figmaの管理者へ確認してください。
「Figma to Hirameki 7」を利用できるようにする
Figmaで対象のデザインファイルを開き、画面左上のFigmaメニューから 「プラグイン」→「プラグインを管理」を選択します。
プラグインの検索画面で「Hirameki 7」と検索し、「Figma to Hirameki 7」を選択します。
プラグインの詳細画面が表示されたら、「実行」をクリックします。
Figmaでデザインを作成する
Figma側のデザインの作り方によって、Hirameki 7へ取り込んだあとのレイアウトや編集のしやすさが変わります。 取り込み後の調整を少なくするため、次の点を意識してください。
- デスクトップ（PC）用のデザインは必須です。モバイル用デザインは任意です。
- モバイル用デザインを用意しない場合は、Hirameki 7側の「自動レスポンシブ」を利用できます。
- PC用とモバイル用の両方をFigmaで作成する場合は、それぞれ個別に変換用ファイルを書き出します。
- レイアウト調整をしやすくするため、Figmaのオートレイアウトの利用をおすすめします。
- 見出しレベルはFigma上の文字サイズをもとに判定されるため、見出しごとに文字サイズの差をつけてください。
- 複数要素を1枚の画像として取り込みたい場合は、対象レイヤー名にH7_IMGを入れます。
❸ Figmaから変換用ファイルを書き出す
1. 取り込みたいレイヤーを選択する
Figma上で、Hirameki 7へ取り込みたいレイヤーを選択します。
2. 「Figma to Hirameki 7」を起動する
Figmaのプラグインから「Figma to Hirameki 7」を起動します。 「選択中のレイヤー」に、取り込みたいレイヤー名が表示されていることを確認してください。
3. 「変換用ファイルを取得」をクリックする
対象レイヤーを確認し、「変換用ファイルを取得」をクリックします。
変換用ファイルがダウンロードされます。ファイル名は figma_node_（レイヤー名）_v1.json の形式です。
モバイル用デザインも取り込む場合は、モバイル用のレイヤーを選択して同じ手順でもう1つ書き出します。
※JSON形式の変換用ファイルにはサイズ上限はありません。Figmaで使用している画像も変換用ファイルに含まれるため、 写真などを多く使用している場合はファイルサイズが大きくなることがあります。
❹ Hirameki 7へ取り込む
Hirameki 7では、Figmaのデザインを次の2通りで取り込めます。
- ページ全体へ反映する
- 選択したセクションの後ろへ追加する
ページ全体へ反映する場合
Webサイトのページエディターを開き、画面左側の「…」から「Figma連携」を選択します。
注意
左メニューからFigma連携を実行すると、ページの既存コンテンツが置き換わります。
また、反映後にUndoで元へ戻すことはできません。
初めて利用する場合や既存ページへ反映する場合は、あらかじめ内容を確認してください。
セクションの後ろへ追加する場合
追加したい位置の前にあるセクションへカーソルを合わせ、 オレンジ色の枠線の中央に表示される「＋」をクリックします。 表示されたメニューから「Figma連携」を選択すると、そのセクションの後ろへFigmaのデザインを追加できます。
ここから先は共通の操作です
1. デスクトップ用の変換ファイルをアップロードする
STEP 1の「デスクトップ（PC）」にある「ファイルをアップロード」をクリックし、 Figmaから取得した変換用ファイルを選択します。 デスクトップ（PC）用のファイルは必須です。
2. モバイル表示を設定する
モバイル用のデザインをFigmaで作成していない場合は、「自動レスポンシブ」を利用できます。 「自動レスポンシブ」をオンにすると、PC用のデザインをもとにモバイル表示が自動生成されます。
3. 「エディターへ反映する」をクリックする
ファイルとモバイル表示の設定を確認したら、STEP 2の「エディターへ反映する」をクリックします。
フォントの置換が表示された場合
Figmaで使用しているフォントがHirameki 7で利用できない場合は、「フォントの置換」画面が表示されます。 利用できないフォントを、Hirameki 7で使用できるフォントへ置き換えてください。
❺ 取り込み後のデザインを確認する
取り込みが完了すると、Figmaで作成したデザインがHirameki 7上へ反映されます。
Figma上のデザイン
Hirameki 7に取り込まれたデザイン
取り込み後に確認するポイント
- 見出しのレベル：Figma上の文字サイズをもとに判定されるため、意図した階層になっているか確認します。
- リンク：Figmaで設定しているリンクはHirameki 7には引き継がれません。必要なリンク先を取り込み後に設定してください。
- 文字サイズ：PC・モバイルの両方で読みやすい大きさになっているか確認します。
- 表：Figma上で作成した表は、Hirameki 7ではHTMLパーツとして取り込まれます。
- グラデーション：線形グラデーションは取り込まれます。円形（放射）グラデーションは取り込まれず、背景が透明になる場合があります。
- 回転した要素：対応していますが、レイアウトの組み方によってはFigma上と表示が異なる場合があります。
- フォント：置換によって文字幅や改行位置、レイアウトが変わる場合があります。
- 行間：Figmaで「Auto」に設定している場合は、Hirameki 7側でも「auto」として取り込まれます。
ポイント
取り込み後は完成したものとして扱わず、PC・モバイルの両方で表示を確認してください。
特に、文字サイズ・見出し構造・リンク・フォント置換後の改行・レスポンシブ表示を確認してから
公開することをおすすめします。