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

プロフィールを見る → 設定を行う.

セキュリティ, パーソナルアクセストークン, 新しいトークンの生成.

Tilda 同じように、Tilda 同じように、ティルダと同じように、ティルダのために作られたブランドです。Например, No expiration - Бессрочный.

В области применения (Scopes) теперь необходимо выбрать права доступа для ключа.

現在のユーザー, Devリソース, ファイルコンテンツ, ファイルバージョン, ライブラリアセット, ライブラリコンテンツ, プロジェクトは読み取り専用です。トークンの生成 - トークンを生成します。

Tilda、"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 で再現できないエフェクトがある場合、エフェクト画像を背景にしてインポートされます。