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

Figmaのダッシュボードに行き、プロフィール画像をクリック→設定。

アカウント」タブで、「パーソナル・アクセストークン」セクションまでスクロールダウンし、トークンの名前を入力する。例えば、"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 で再現できないエフェクトがある場合、エフェクト画像を背景にしてインポートされます。