このキットは、既存のFigmaデザインを利用してZoho Creatorでウィジェットを作成するために設計されています。Creatorウィジェット用の手順ごとのガイドや対応コンポーネントが含まれています。初めてこのキットを利用する場合は、機能や対応コンポーネントについて、事前によくご確認ください。

デザイン作業が完了したら、デザインからフレームURLとアクセストークンを取得し、Creatorのウィジェットビルダーに貼り付けることで、作成したファイルをウィジェットとして利用できます。Figmaファイルから直接ウィジェットを作成できるため、デザインと開発のギャップを埋め、効率的なウィジェットを迅速かつ簡単に作成することが可能です。

注意点（セクション4）や、対応コンポーネントの一覧（セクション6）についても詳しく知ることができます。

このキットは、Figmaでのデザイン経験が十分にあり、カスタマイズしたデザインをウィジェットとして利用したいユーザー向けです。

前提条件は以下の通りです：

現在、Figmaを開いています。

1. キットをダウンロードした後、Figmaにインポートします。

2. Figmaアイコンをクリックして、メインメニューを開きます。

3. 左上のAssetsタブ内のPlaygroundセクションを選択します。（棒グラフアイコン）

4. Zoho Creator - Widgetsキットを選択します。これで対応コンポーネントの全リストが表示されます。

また、すべてのLibrariesドロップダウンをクリックするとコンポーネントを表示できます。

5. 必要なコンポーネントを展開し、フレームにドラッグ＆ドロップします。

1. コンポーネントをフレームに追加する前に、こちらをクリックし、デザインページにフレームを追加する方法を参照してください。
   
2. コンポーネントを選択し、Insert instance ボタンをクリックすると、そのコンポーネントをフレームに追加できます。
   

6. 右側のDesignパネルで利用できるプロパティを使ってコンポーネントをカスタマイズします。

ここでFigmaに戻り、フレームのリンクとアクセストークンを取得します。CreatorでウィジェットをFigmaデザインから作成するには、これらを貼り付ける必要があります。

FigmaでフレームURLを取得するには、以下の操作を行います。

次に、CreatorがFigmaデザイン（閲覧のみのアクセス権付き）を取得できるよう、Figmaからpersonal access tokenを取得する必要があります。

Creatorは、personal access tokenを使用してFigmaフレームに閲覧（read-only）権限で接続し、Figmaファイル内に変更は加えません。

コピーしたトークンを使い、Creatorに戻って下記の手順で貼り付けてください。

メモ：下記手順は手順 3: 確認する and 受注データを［パッケージ］データに変換するだけで、 into a widgetの続きです。

9. フレームURLとFigmaのaccess tokenを貼り付けます。

10. 作成をクリックします。作成したウィジェットはカスタムタブに一覧表示されます。

11. ウィジェットをドラッグ＆ドロップしてビルダー領域に配置します。

12. 完了をクリックしてビルダーを終了します。

13. アプリケーションを有効な方法で開き、ウィジェットページを選択します。ここからデータの追加を開始できます。

6. UIキットでサポートされているコンポーネント

1. フォームコンテナ
2. 評価項目
3. 選択項目
4. テキストボックス
5. タブ
6. ボタン

6.1 フォームコンテナ

1. 'zc_formcontainer'はフォームコンポーネントを識別するために使用します。
2. 'formlinkname'はフォームコンポーネントの補助パラメーターであり、入力必須です。ご自身のCreatorフォームのリンク名前（データを送信するフォーム）に、構文の右側で置き換えてください。

1. この構文は、フレームやグループなどのグループ化レイヤーで使用できます。
2. これにより、フォーム内の他の項目のコントロールが指定されたフォームに「formlinkname」経由で一意にリンクされます。
   

6。2 評価

1. 'zc_ratingcontainer'は、評価コンポーネントを識別するために使用されます。
2. 'zc_ratingoption'は、評価コンポーネントの設定の識別子として使用されます。
3. 'linkname'は、項目のlinkname（Creatorフォーム内）であり、フォーム送信時にデータを関連付ける必要があります。
4. 値は、各スターの個別の値に対応します。例えば、値=1の場合は、選択された値が1つ星を意味します。値=happyの場合は、そのスターの値がhappyとしてマークされます。
5. '状態'は2つの値—選択済みまたはidle—のみを持つ識別子です。これにより、そのレイヤーでユーザーがオプションを選択した際のUIの制御が可能です。例えば、状態=選択済みが指定され、評価コンポーネントが青色の背景を持つレイヤーで使用されている場合、ユーザーがこのコンポーネント内のオプションを選択すると青色の背景が適用されます。

6。3 スライダー

1. 'zc_selectedvalue'は、スライダーコンポーネントから選択された値を表示するために使用されます。
   
2. ウィジェットを正しく動作させるには、スライダーコンポーネントと選択値の構文の両方で同じ'fieldlinkname'を使用する必要があります。

1. 'zc_slider'の構文は、次に続くコンポーネントのグループにラベルを付けるためだけに使用されます。
2. 'zc_knob'は、スライダーのノブの識別子として使用されます。
3. 'zc_progress'は、スライダーの進捗バーを識別するために使用されます。
4. 'zc_track'は、スライダーハンドルの全長をトラッキングするために使用されます。
   

6。4 選択項目

1. チェックボックス
2. ラジオボタン
3. ドロップダウン
4. Multi 選択する

これらの項目は「zc_formcontainer」レイヤー内に配置し、指定したフォームへ値を送信できるようにしてください。

1. 「zc_selectcontainer」は、選択肢項目コンポーネントを識別するために使用します。
2. 「種類」は、利用する選択肢項目の種類（radio、ドロップダウン、Multi 選択する、チェックボックス）を示します。
3. 「linkname」は、データをフォーム送信時に関連付ける項目のリンク名（Creatorフォーム内）です。
4. 「zc_option」は、選択肢項目コンポーネントの設定用識別子として使用します。
5. 「値」は、各選択肢ごとの個別の値に対応します。
6. 必要に応じて、チェックボックスインジケーターを任意の場所に配置し、「zc_checkbox」という名前にしてください。

1. 『zc_selectcontainer』は、選択項目コンポーネントを識別するために使用します。
2. 『種類』は利用中の選択項目のタイプを指します。例: ラジオボタン、ドロップダウン、multi 選択する、またはチェックボックス。
3. 『linkname』は項目のリンク名（Creator フォーム内）であり、フォーム送信時にデータを関連付ける必要があります。
4. 『zc_option』は、選択項目コンポーネントの設定を識別するために使用します。
5. 『値』は、それぞれの選択肢の固有の値に対応します。
6. 必要に応じて、任意の場所にラジオインジケーターを配置し、『zc_radio』と名前を付けることができます。

1. 『zc_selectedvalue』は、multi 選択するコンポーネントから選択済みの値を表示するために使用します。
   
2. 機能させて選択肢を表示するには、multi 選択するコンポーネントと『fieldlinkname』パラメーターの両方で同じリンク名を使用する必要があります。

1. 『zc_selectcontainer』は、選択項目コンポーネントを識別するために使用します。
2. 『種類』は利用中の選択項目のタイプを指します。例: ラジオボタン、ドロップダウン、multi 選択する、またはチェックボックス。
3. 『linkname』は項目のリンク名（Creator フォーム内）であり、フォーム送信時にデータを関連付ける必要があります。
4. 『zc_option』は、選択項目コンポーネントの設定を識別するために使用します。
5. 『値』は、それぞれの選択肢の固有の値に対応します。

1. 『zc_selectedvalue』は、ドロップダウンコンポーネントで選択済み値を表示するために使用されます。
   
2. ウィジェットが意図した通りに動作し、選択肢を表示するためには、マルチセレクトコンポーネントと『selectedvalue』パラメータの両方で同じ『fieldlinkname』を使用する必要があります。

1. 『zc_selectcontainer』は、選択肢項目コンポーネントを識別するために使用されます。
2. 『種類』は、使用する選択肢項目の種類（ラジオ、ドロップダウン、マルチ選択、またはチェックボックス）を指します。
3. 『linkname』は、項目のリンク名（Creatorフォーム内）であり、フォーム送信時にデータと関連付ける必要があります。
4. 『zc_option』は、選択肢項目コンポーネントの設定用識別子として使用されます。
5. 『値』は、各選択肢の個別の値に対応します。

6.5 テキストボックス

この項目は「zc_formcontainer」レイヤー内に配置し、値を指定したフォームに送信できるようにしてください。

1. 『linkname』は、項目のlinkname（Creatorフォーム内）であり、フォーム送信時にデータと関連付ける必要があります。

6.6 タブ

この項目は「zc_formcontainer」レイヤー内に配置し、値を指定したフォームに送信できるようにしてください。

1. 'tabgroup'は、個人タブを保持・管理する親タブコンポーネントを指します。値にはA、B、Cなどを指定できます。
2. 'tabcontainer'は、グループ化されたタブコンテナ内の個人タブを指します。
3. 'tabid'は、各タブに対応するidを指します。ここでは1、2、3などを値として指定できます。
4. 'tabcontainer'および'tabid'は、タブコンポーネントに必須のパラメーターです。

6.7 ボタン

この項目は必ず「zc_formcontainer」レイヤー配下に配置し、指定したフォームへ値を送信できるようにしてください。

1. zc_button?操作=switchtab&名前= &id= &状態=<選択済み/idle>

1. 'zc_button'はボタンコンポーネントを識別するために使用します。
2. '操作'は、ボタンに実行させたい処理の種類を指します。
3. 'formlinkname'はフォームコンポーネントの補助パラメーターで入力必須です。ここに、データを送信するCreatorフォームのリンク名を構文右側に指定してください。
4. 'url'は、ボタン押下後に開きたいリンクを指します。
5. '名前'はタブコンポーネントの名称を指します。
6. 'id'は各タブごとの固有IDを指します。
7. '状態'は「選択済み」または「idle」の2つの値のみを持つ識別子です。これにより、そのオプションがユーザーに選択されている場合の特定レイヤーのUI表示を制御できます。