1. このページの内容

Figma からウィジェットの作成を続ける前に、次の点を確認してください:

1. こちらをクリックして、Figma からデザインフレームをインポートする方法の詳細を確認してください。
2. このキットには、すぐに選択してカスタマイズを開始できるサンプルフォームテンプレートも含まれています。
3. 初めて UI キットを使用する場合は、キットの機能とコンポーネントについて事前に確認してください。

2. 提供状況

Figma からウィジェットを作成できるのは、次の場合です:

1. Creator の有料プランのみ。
2. スーパー管理者、管理者、開発者のみが作成、アップロード、管理できます。他のユーザーは、ウィジェットが追加されたページにアクセスできます。
3. 米国 (.com)、ヨーロッパ (.eu)、インド (.in)、オーストラリア (.au)、カナダ (.ca) のデータセンターで利用できます。

3. Figma を使用したウィジェット作成の設定

3。1 Figma ウィジェット作成フロー

3。2 Figma デザインを Creator ウィジェットに変換する方法

3。2 Figma からウィジェットを作成する手順

前提条件

1. Figma アカウントへのアクセスが必要です。お持ちでない場合は、新規に作成できます。
2. 使用したいアクセス権のあるFigma デザインファイルが必要です。このファイルからウィジェットを作成します。
3. Figma アカウントでアクセストークンを生成し、コピーしておく必要があります。
   

手順 1: Zoho Creator - Widgets Kit にアクセスする

1. Figma にアクセスし、Figma の認証情報でサインインします。
2. Figma アカウントでキットを表示します（キット内の手順 2: Design Your Widget Fileを参照）。
3. UI キット内のPoints to メモセクションの説明を読み、この UI キットの概要と一般的な利用ガイドラインを把握します。
   

手順 2: Figma でウィジェットをデザインする

1. 手順 1: 取得する Started With Our Kit および 手順 2: Design Your Widget File の説明に従い、キットの使用を開始して独自の Figma デザインを作成します。
   
2. 必要に応じて、各コンポーネントのプロパティをカスタマイズします。

1. デザインフレーム内で使用している各コンポーネントについて、UI キットで指定されている構文に必ず従ってください。各コンポーネントのレイヤー名に、その構文を指定する必要があります。
2. デザインの作成にはフレームを使用してください。これらのフレームは、アプリケーションデザイン内の 1 ページとして機能します。詳細はこちら
3. Figma ファイル内のデザインレイヤーは、UI キットで推奨されている構文または構造に従って設計する必要があります。

手順 3: デザインを確認する

1. デザインに追加したコンポーネントを確認します。
2. 次に、UI キット内の 手順 3: 確認する and 受注データを［パッケージ］データに変換するだけで、 into a Widget に従い、Figma デザインをウィジェットに変換します。
   

手順 4: Creator でウィジェットを作成する

ページビルダーから直接ウィジェットを作成することもできます。詳細な手順については、UI キット内の 手順 3: 確認する and 受注データを［パッケージ］データに変換するだけで、 into a Widget in the UI Kit を参照してください。

1. Figma ファイル内の特定のページまたはフレームへのリンクをコピーしていることを確認してください。
2. Figma でパーソナルアクセストークンを生成する方法については、こちらをクリックして確認してください。
   

1. このウィジェットは、アプリケーション内のすべてのページで、ページビルダーのドラッグ＆ドロップ要素として表示されます。
2. Creator は、パーソナルアクセストークンを使用して、Figma フレームに「表示のみ（読み取り専用）」アクセスで接続し、Figma ファイル内の内容を変更することはありません。
   

4. 注意事項

1. ウィジェットを操作するには、UI キットでサポートされているコンポーネントのみを使用してウィジェットをデザインする必要があります。
2. デザインで使用しているコンポーネントは、Creator でウィジェットが正しく動作するよう、UI キットで指定されている構文どおりに設定する必要があります。
3. Figma ファイル内のページに追加したコンポーネントは、必ずフレーム内に含め、UI キットで提供されているサポート対象コンポーネントの一覧に含まれているものを使用してください。
4. 上記の手順に従わない場合、Creator でのウィジェット作成が失敗することがあります。その場合は、フレームを使用してウィジェットを生成する前に、インスタンスをデタッチしていることを確認してください。
5. Creator は、提供された Figma ファイルおよびアクセストークンを保持しません。これらのファイルは、ウィジェットを生成するためにメモリ上でのみ処理され、.zip フォルダとしてダウンロード可能になります。
6. Zoho Creator に、必要なウィジェットを生成するために Figma の公開 API をお客様に代わって使用することを許可することで、適用される Figma の開発者向け利用規約にも同意したものとみなされます。
7. Figma でデザインファイルやコンポーネントを直接変更した場合は、ウィジェットが期待どおりに動作するよう、更新後のファイルを再度アップロードする必要があります。
8. Google フォントが Figma デザインで使用されています。カスタムフォントを使用している場合は、そのフォントの TTF または OTF ファイルを、ウィジェットの .zip フォルダ内の Assets -> Fonts フォルダに保存してください。
   

5. 制限事項

1. Figma デザインファイルで使用する画像のサイズは、5MB を超えないようにしてください。
2. 背景:
   
1. フレームおよびコンポーネントの背景に対して、複数のカラーフィルはサポートされていません。
3. ボーダー:
   
1. Stroke セクションで複数のボーダーを設定することはできません。
   
2. ボーダー（ストローク）は、図形パスの中央に適用されます。
   
3. 色の適用にグラデーションフィルを使用することはできません。
   
4. Creator ウィジェットに一般的に適用されるその他の制限については、こちらのセクションを参照してください。

6. 関連トピック

1. Creator のウィジェットについて
2. Figma からのインポートについて
3. ファイルをアップロードしてウィジェットを作成する