Figmaからウィジェットファイルをインポートする

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

1. このページの内容

既存のFigmaデザインを活用し、ウィジェットを作成する方法については、Zoho Creator - Widgets Kitをご参照ください。本キットには、Creatorのウィジェットで利用できるコンポーネントや、詳細な利用手順が含まれています。

Figmaでウィジェットを作成する前に、初めてUIキットを利用する場合は、キットの機能や各コンポーネントについて理解を深めてください。

2. 利用条件

Figmaからのウィジェット作成

Creatorの有料プランのみで利用できます。
スーパ管理者、管理者、開発者のみが作成・アップロード・管理できます。他のユーザーは、ウィジェットが追加されたページにアクセスできます。
United 都道府県（.com）、Europe（.eu）、India（.in）、Australia（.au）、Canada（.ca）の各データセンターで利用可能です。

3. 概要

Figmaは、目的に合わせたデザインの可視化やカスタマイズしたプロトタイプの作成を支援するデザインツールおよびエディタです。Figmaには、UIコンポーネント、テンプレート、テキストスタイル、カラースタイル、フォントなど、様々なデザイン要素が網羅されたUIデザインキットが用意されており、デバイスを問わずリアルなデザインを迅速に作成できます。各キットには、対応するコンポーネントの使い方を示すスタイルガイドも含まれています。

4. CreatorでFigmaファイルをインポートする

既存のFigmaデザインをFigma UI Kitからインポートし、Creatorでウィジェットを作成できます。本キットには、Creatorウィジェット向けの詳細な利用手順や対応コンポーネントが含まれています。デザインしたファイルは、フレームURLとアクセス・トークンをコピーしてCreatorのウィジェットビルダーに貼り付けることで、ウィジェットとして利用できます。Figmaファイルから直接ウィジェットを作成できるため、デザインと開発のギャップを縮め、効率的なウィジェットを迅速に作成することが可能です。

5. 前提条件

Figmaアカウントへのアクセスが必要です。未登録の場合は、新規作成してください。
ウィジェットの作成に使用したいFigmaデザインファイルへのアクセスが必要です。
Figmaアカウントでアクセス・トークンを生成し、コピーしてください。

キットの詳細については、こちらをクリックしてください。

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

UIキットでサポートされているコンポーネントと、それぞれの構文は下記の通りです。これらの構文は各コンポーネントのレイヤー名で使用する必要があります。

フォームコンテナ

評価項目

Choice 項目

テキストボックス

タブ

ボタン

各コンポーネントの構文については、UIキットをご参照ください。
このキットには、すぐに選択してカスタマイズを始められるサンプルフォームテンプレートも含まれています。
使用中のコンポーネントの名前の変更は可能です。ただし、構文の名前やレイヤーの変更は避けてください。定義された構文や構造が上書きされないようご注意ください。
例として、「zc_input?linkname=<名前>」という構文は、テキスト要素を入力ボックスとして表示するためのものです。他の名前に変更すると、コンポーネントが期待通りに動作しません。同様に、レイヤーを変更すると、作成したウィジェットの機能に影響します。

フォームコンテナ

フォームコンテナは、ユーザーにフォーム項目を入力してデータを送信してもらう際に使用できます。また、フォームコンテナ内には項目やボタンコンポーネントを配置することが可能です。

すべての項目やボタンは、必ずフォームコンポーネント内に直接配置してください。フォームの外では使用できません。

評価

評価項目は、ユーザーが特定の商品・サービス・体験に対して、意見や評価をスコアで提供するためのものです。通常、あらかじめ設定された選択肢（多くは星で表されます）が用意されており、各選択肢が異なる満足度レベルに対応します。

ヒント：この項目は商品レビューやイベントフィードバック、その他の情報収集にご利用いただけます。

スライダー

フォーム内のスライダー項目を使うことで、ユーザーはあらかじめ決められた範囲からスライダーハンドルを動かし、値を選択できます。

Choice 項目

これらの項目は、ユーザーがメニューに表示されるあらかじめ設定された選択肢から値を選択できるようにします。選択肢項目の種類には以下が含まれます：

テキストボックス

テキストボックス要素を挿入して、詳細表示内に必要な内容を入力できます。例えば、テキスト要素を使ってセクションの前に見出しを表示したり、メモや注意書きを追加したりすることが可能です。

タブ

このコンポーネントを使用すると、データを個別の切り替え可能なタブに整理し、ユーザーに分かりやすい表示を提供できます。例えば上記の画像では、商品管理というタブがWorkitemタブ内に配置されており、設計、開発、テストの3つのタブが1つのコンテナ内にまとめられています。

ボタン

ボタンはユーザーインターフェース上のシンプルなコンポーネントで、ページ上でユーザーが操作できるようにします。ここでは、事前に設定した操作を実行するボタンを追加できます。

7. 動作方法を見る

ダウンロードおよびZoho Creator - Widgetsキットのインポート後、必要に応じてFigmaファイルをデザインできます。作業が完了したら、デザインをCreatorのウィジェットビルダーにインポートし、カスタマイズしたデザインをウィジェットとして表示します。詳細はこちら

8. 利用ケース

ケース1: 追加コンポーネントの活用例

例えば、ホームサービスアプリケーションを作成したとします。このアプリケーションにはフィードバック詳細というフォームがあり、サービス提供完了時に顧客からフィードバックを収集するために使用されます。評価項目が必要で、ユーザーが星や数値でスコアを付与できるようにします。各選択肢は異なる満足度や品質レベルを示します。UIキットで提案された構文を利用し、評価項目を含めたカスタマイズデザインを簡単に作成し、必要なウィジェットをCreatorアプリケーションにアップロードできます。ユーザーはそのウィジェット（フォーム）にアクセスし、通常1～5の星で顧客サービスへの満足度を評価します。これにより法人は改善点の特定や課題の解決に役立てることができます。

ケース2: ウィザード形式フォーム構造

例えば、Creatorで連絡先管理アプリケーションを作成したとします。このアプリケーションには連絡先詳細フォームがあり、顧客が必要なデータを入力する必要があります。従来のフォームスタイルでは、要件の詳細や文脈を的確に伝えることが難しい場合があります。しかし、切り替え可能なタブを追加したり、ドロップダウンメニューを変更したり、UIキット（Figma）を活用してウィザード形式のフォームを構築し、カスタマイズしたデザインをCreatorにウィジェットとしてインポートできます。これにより、フォームの目的や文脈を迅速かつ効果的に伝え、ユーザー体験を向上させることが可能です。

9. Figmaファイルを使ったウィジェット作成ナビゲーションガイド

ウィジェットを埋め込みたいアプリケーションの設定ページに移動し、Figmaからインポートオプションを選択します。次に、Figmaデザインをアップロードしてください。詳細はこちら

10. 知っておくべきポイント

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