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

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

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

新しいウィンドウでTilda トークンの名前を指定し、有効期限を選択します。例えば、「No expiration - Indefinite」です。また、トークンの有効期限を1日、7日、30日、90日から選択することもできます。

[Scopes]領域で、キーのアクセス権を選択する必要があります。

現在のユーザー]、[Dev resources]、[File content]、[File versions]、[Library assets]、[Library content]、[Projects]オプションで、[Read-only access]を選択します。トークンを作成するには、トークンの生成をクリックします。

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

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

Figma上で、レイヤーパネルで必要なレイアウトと、必要なフレームを選択し、ブラウザのアドレスバーからフレームのリンクをコピーします。

インポートが正しく行われるためには、1つのFigmaフレームに1つのZero Block

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

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

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

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

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

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

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

グループもインポートできます。中に他のグループがある場合は、すべての要素が第一階層のグループに入ります。

ボタンをインポートするには、シェイプとテキストを1つのグループに統合し、"button "という名前を付ける必要があります。

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

シェイプにZero Block で再現できないエフェクトがある場合、エフェクト画像を背景にしてインポートされます。