Figmaアカウントで、下部のツールバーにある「アクション」をクリックし、「プラグインとウィジェット」タブを選択します。検索欄に「Figma toTilda 」 Tilda を入力してクリックするか、リンクからプラグインを追加してください。

「実行」ボタンをクリックして、プラグインを有効にしてください。

準備完了です！これで、レイヤーや要素をTildaにインポートできるようになりました。

プラグインを追加したら、レイアウト内で必要なレイヤーを選択してください。選択したレイヤーは、プラグインウィンドウの「選択したレイヤー」フィールドに表示されます。

プラグインウィンドウで、「コピー準備」ボタンをクリックして、レイヤーをインポートできるように準備します。

フレームのインポート準備が整ったら、「クリップボードにコピー」ボタンをクリックしてください。

Tilda にアクセスし、Zero Block を開いて、キーボードショートカット（Windows の場合は Ctrl+V、Mac の場合は Command+V）をクリックしてください。

フレームは、独立したグループとしてインポートすることも、設定をアートボードに適用して現在のすべての要素を置き換える形でインポートすることもできます。

アートボードにすでに要素が含まれている場合、フレームをグループとして挿入することもできますが、このオプションを選択すると、アートボード上のすべての要素が削除されます。

「設定をアートボードに適用」オプションが選択されている場合、フレームのルートレイヤーの設定がZero Blockに適用されます。これにより、背景色や背景画像、自動レイアウト、Tilda がサポートするその他の設定が変更Tilda 。

複数のフレームを挿入した場合、 インポートオプションのポップアップは 表示されません。

Figmaのメインページに行き、プロフィール写真の下にある「プロフィールを見る」→「設定」をクリックします。

次に、「セキュリティ」タブで「パーソナル・アクセストークン」ブロックに移動し、「新しいトークンの生成」をクリックします。

新しいウィンドウで、Tilda 名前を指定し、有効期限を選択します。例えば、1日、7日、30日、90日などです。

「Scopes」エリアで、「Current user」、「Dev resources」、「File content」、「File versions」、「Library assets」、「Library content」、「Projects」のチェックボックスを選択します。次に、「Generate token」をクリックします。

キーを作成したら、そのキーをコピーして、Tilda「インポート設定」で指定してください。一度作成したキーを再度表示することはできませんので、新しいキーを作成してください。

Zero Block Blockの3つのドットのメニューをクリックしZero Block 「Figmaからインポート」を選択します。

Figma にアクセスします。レイアウトを開き、必要なフレームを選択して、ブラウザのアドレスバーからフレームのリンクをコピーします。

開いたウィンドウに、フレームへのリンクと、Figmaの設定で取得したAPIトークンを追加してください。

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

正しいリンクを追加し、Figma API側にエラーがなければ、レイアウトはZero Blockインポートされます。

なお、デフォルトでは画像はFigmaのサーバーから読み込まれるため、Tildaアップロードしたい場合は、画像を含む要素の設定画面に移動し、「Tildaにアップロード」をクリックする必要があります。

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

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

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

グループ自体もインポートできます。その中に他のグループが含まれている場合、すべての要素は最上位のグループに配置されます。

ボタンをインポートするには、図形とテキストをグループにまとめ、その名前に「button」を追加する必要があります。テキストの配置プロパティもインポートされるため、テキスト要素の幅を図形と同じにすることをお勧めします。

図形Zero Block再現できないエフェクトが適用されている場合、そのエフェクト画像が背景としてインポートされます。