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では再現できない効果がある場合は、背景に効果画像を付けてインポートされます。