Figmaデザインをウェブサイトにインポートする方法

Figma ダッシュボードに移動し、プロフィール写真 → [設定] をクリックします。

[アカウント]タブで、[個人用アクセストークン]セクションまで下にスクロールし、トークンの名前(例:「Tilda」)を入力します。

トークン値をコピーして、インポートに使用します。

Zero Blockの右上隅にある3つのドットメニューをクリックし、ドロップダウンメニューから[インポート]を選択します。

Figma では、[レイヤー] パネルで目的のレイアウトを選択し、ブラウザーのアドレス バーからそのリンクをコピーします。

このリンクをレイアウト URL フィールドに貼り付け、Figma 設定で取得した API トークンを API トークン フィールドに追加します。

レイアウトがインポートされるまで待ちます。

正しいリンクを入力し、Figma API側にエラーがない場合、レイアウトはZero Blockにインポートされます。

手記：デフォルトでは、画像はFigmaサーバーからダウンロードされます。したがって、それらをTildaにアップロードする場合は、画像を含む要素の設定に移動し、[Tildaにアップロード]をクリックする必要があります。

レイアウトは、幅 1200px のフレームで作成する必要があります。

レイアウト全体を 1 つのブロックに追加するのではなく、複数のブロックにレイアウトをインポートすることをお勧めします。

任意のグループを画像としてインポートできます。このためには、Figmaのグループ名に「image」を指定する必要があります。「svg」を指定すると、SVGファイルとしてインポートされます。

グループもインポートできます。内部に他のグループがある場合、すべての要素は第 1 レベルのグループになります。

ボタンをインポートするには、図形とテキストをグループに結合し、「ボタン」という名前を付ける必要があります。

テキスト配置プロパティもインポートされるため、テキスト要素の幅を形状と同じにすることをお勧めします。

Zero Blockでは再現できないエフェクトが形状にある場合は、エフェクト画像を背景に取り込まれます。