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: ウィジェットファイルのデザインを参照）。
3. UI キット内の注意点セクションの説明を読み、全体像を把握し、UI キットの一般的なガイドラインを確認してください。
   

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

1. 手順 1: キットから開始および手順 2: ウィジェットファイルのデザインの手順に従い、キットの利用を開始し、独自の Figma デザインを作成します。
   
2. 各コンポーネントのプロパティは必要に応じてカスタマイズしてください。

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

手順 3: デザインの確認

1. デザインに追加したコンポーネントを確認します。
2. 次に、UI キット内の手順 3: デザインの確認とウィジェットへの変換を参照し、Figma デザインをウィジェットへ変換してください。
   

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

ページビルダーから直接ウィジェットの作成も可能です。詳細な手順は、UI キットの手順 3: デザインの確認とウィジェットへの変換を参照してください。

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

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

4. 知っておくべきこと

1. ウィジェットのデザインは、サポートされているコンポーネントのみを使用し、UIキットを通じてウィジェットと連携してください。
2. デザインで使用中のコンポーネントは、Creatorでウィジェットを正しく動作させるために、UIキットで指定された構文に従う必要があります。
3. Figmaファイル内のページに追加したコンポーネントは必ずフレーム内に配置し、UIキットで提供されているサポート対象コンポーネントから選択してください。
4. 上記の手順を満たさない場合、Creatorでのウィジェット作成が失敗することがあります。その場合は、インスタンスのデタッチをフレームを使用する前に行い、ウィジェットを生成してください。
5. Creatorは、提供されたFigmaファイルやアクセストークンを保持しません。これらのファイルはウィジェット生成のためにメモリ上のみで処理され、.郵便番号フォルダとしてダウンロード可能です。
6. Zoho CreatorがFigmaの公開APIを利用して必須ウィジェットを生成することを許可することで、Figmaの開発者利用規約にも同意したものとみなされます。
7. Figmaでデザインファイルやコンポーネントに直接変更を加えた場合、ウィジェットが正しく動作するためには、更新済みファイルを再アップロードする必要があります。
8. GoogleフォントをFigmaデザインで使用中の場合、カスタムフォントを使っている場合は必ずそのフォントのTTFまたはOTFファイルをAssets→Fontsフォルダ内、ウィジェットの.郵便番号フォルダに保存してください。
   

5. 制限事項

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

6. 関連トピック

1. Creatorでのウィジェットの理解
2. Figmaからのインポートの理解
3. ファイルアップロードによるウィジェット作成