「Figma to Hirameki 7」は、Figmaで選択したレイヤーのノードデータをJSONファイルとして書き出す無料プラグインです。
書き出したファイルを「Hirameki 7」側でインポートすると、FigmaのデザインをAIエディタに反映できます。
デザインを見ながらゼロから組み直す工程を挟まずに、制作の続きに取りかかれます。
書き出して、読み込むだけ。Figmaのデザインをそのまま再現。
Figmaで書き出したJSONファイルをインポートするだけで、テキスト・画像・オートレイアウト設定・ベクターがAIサイトにそのまま反映。
PC・モバイルのデザインを個別に取り込み、レスポンシブも思いどおりに。
PC用とモバイル用のデザインをそれぞれインポートすれば、画面幅ごとの見え方をデザインどおりに再現できます。
画面の幅ごとの調整を自動で。
自動レスポンシブ設定で画面の幅を自動で最適化。幅に応じた要素の伸縮を自動で行います。細かな調整が必要な箇所は、あとからエディタで整えられます。
Figma Communityでプラグインをインストールします。プラグインは無料でご利用いただけます。
Figma上で「Figma to Hirameki 7」を起動し、対象のレイヤーを選択して実行します。選択したレイヤーのノードデータがJSONファイルとして書き出され、そのままダウンロードできます。
対応する要素は、テキスト・画像・オートレイアウト設定・ベクターです。オートレイアウトで構成されたデザインほど「Hirameki 7」上での再現度が高くなるため、取り込みを前提とする場合はオートレイアウトでの設計を推奨します。
ダウンロードしたJSONファイルを「Hirameki 7」でインポートすると、FigmaのデザインがAIエディタに反映されます。デザインデータを見ながら要素を組み直す作業を挟まずに、編集フェーズから制作を再開できます。
取り込まれる単位は、Figma上での選択範囲にそのまま対応します。ページ全体を選択すればページとして、セクションやパーツだけを選択すればその単位で取り込まれます。サイト一式をまとめて移す使い方も、既存ページに特定のセクションだけを足す使い方も可能です。
反映されたデザインは、「Hirameki 7」のAIエディタでそのまま編集できます。テキストや配色の調整、パーツの追加、レスポンシブの確認まで、コードを書かずに仕上げられます。
仕上げたページはそのまま公開でき、公開後の更新はHirameki 7で更新・運用できます。フォーム・名刺管理・メール配信・ダッシュボードといったHirameki 7の他機能とも連携し、運用することも可能です。
「Figma to Hirameki 7」はテキスト・画像・オートレイアウト設定・ベクターに対応しています。デザインをオートレイアウトで組んでおくと、AIエディタへの反映がよりきれいに仕上がります。
1枚の画像として書き出したい範囲がある場合は、対象のレイヤー名に「H7_IMG」という文字列を入れておきましょう。文字列を入れることで、意図した範囲の書き出しがきれいにできます。
取り込み単位はページ全体／セクション単位に対応していますが、PC用デザインとモバイル用デザインはそれぞれ個別にJSONファイルとして書き出し、別々にインポートするとよりきれいにページをまとめられます。