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

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

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

1. このページの内容

Zoho Creator の Zoho Creator - Widgets Kit を使って、既存の Figma デザインからウィジェットを作成する方法については、こちらを参照してください。このキットには、Creator のウィジェット向けの詳細な利用手順と、サポートされているコンポーネントが含まれています。
Figma からウィジェットを作成する前に、初めて UI キットを利用する場合は、キットでできることと、そのコンポーネントについてあらかじめ理解しておいてください。

2. 提供状況

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

3. 概要

Figma は、目的のデザインに対してカスタマイズされたプロトタイプを可視化・作成できるデザインツール兼エディターです。Figma には、UI コンポーネント、テンプレート、テキストスタイル、カラースタイル、フォントなど、デバイスをまたいで高い再現性のあるデザインをすばやく作成するために必要な要素を網羅した、さまざまな UI デザインキットも用意されています。各キットには、サポートされているコンポーネントの使用方法を示すスタイルガイドも含まれています。

4. Creator への Figma ファイルのインポート

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

5. 前提条件

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

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

UI キットでサポートされるコンポーネントと、それぞれの構文は次のとおりです。これらの構文は、該当コンポーネントのレイヤー名に使用する必要があります。
  1. フォームコンテナ
  2. 評価フィールド
  3. 選択フィールド
  4. テキストボックス
  5. タブ
  6. ボタン
  1. 各コンポーネントの構文については、UI キットを参照してください。
  2. このキットには、すぐに選択してカスタマイズを開始できるサンプルフォームテンプレートも含まれています。
  3. 使用しているコンポーネントの名前を変更することはできますが、構文名の変更やレイヤー構造の変更は行わないでください。定義済みの構文や構造が上書きされないように注意してください。
    たとえば、「zc_input?linkname=<名前>」という構文は、テキスト要素を入力ボックスとして表示するためのものです。この構文名を別の名称に変更すると、コンポーネントは想定どおりに動作しません。同様に、レイヤーを変更すると、作成したウィジェットの機能に影響します。

フォームコンテナ

フォームコンテナは、ユーザーにフォームフィールドへ入力してデータを送信してもらいたい場合に使用します。また、フォームコンテナ内にフィールドやボタンコンポーネントを配置できます。
すべてのフィールドとボタンは、必ずフォームコンポーネントの直下に配置してください。フォームの外では使用できません。

評価

評価フィールドを使用すると、ユーザーは特定の商品、サービス、または体験について、自身の意見や評価をスコアとして入力できます。このフィールドは通常、星などで表されるあらかじめ定義された選択肢で構成されており、それぞれが異なる満足度レベルに対応します。
ヒント: このフィールドは、商品レビュー、イベントのフィードバックなどの収集に利用できます。

Slider

フォーム内のスライダーフィールドを使用すると、ユーザーはスライダーのハンドルをトラック上で動かすことで、あらかじめ定義された範囲から値を直感的に選択できます。

選択フィールド

これらのフィールドを使用すると、ユーザーはメニューに表示されたあらかじめ定義された選択肢の中から値を選択できます。選択フィールドの種類には、次のものがあります。
  1. ラジオボタン
  2. ドロップダウン
  3. チェックボックス
  4. 複数選択

テキストボックス

テキストボックス要素を挿入して、詳細ビュー内に必要なコンテンツを入力できます。たとえば、セクションの前に見出しを表示したり、メモや免責事項を追加したりするためにテキスト要素を使用できます。

タブ

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

Button

ボタンは、ユーザーがページと対話するためのシンプルな UI コンポーネントです。ここでは、あらかじめ設定した処理を実行するボタンを追加できます。

7. 動作イメージ

Zoho Creator - Widgets キットをダウンロードしてインポートしたら、必要に応じて Figma ファイルをデザインできます。デザインが完了したら、Creator のウィジェットビルダーにインポートし、カスタマイズしたデザインをウィジェットとして表示します。手順を見る


8. 利用例

ケース 1: 追加コンポーネントの利用
たとえば、ホームサービスアプリケーションを作成したとします。このアプリケーションには、提供したサービス完了後に顧客からフィードバックを収集するための フィードバック詳細フォームがあります。ここで、ユーザーが星や数値でスコアを入力できる評価フィールドが必要だとします。各選択肢は、異なる満足度や品質レベルに対応します。UI キットで推奨されている構文を使用して評価フィールドを含めることで、フィードバックフォームのカスタムデザインを簡単に作成し、必要なウィジェットとして Creator アプリケーションにアップロードできます。ユーザーはそのウィジェット（フォーム）にアクセスし、通常 1〜5 段階の星評価で顧客サービスに対する満足度を入力できます。これにより、自社で改善すべき点を特定し、課題に対応することができます。
ケース 2: ウィザード形式のフォーム構造
たとえば、Creator で 連絡先管理アプリケーションを作成したとします。このアプリケーションには、利用者が必要なデータを入力する 連絡先詳細フォームがあります。従来のフォーム形式では、要件の詳細や背景を十分に伝えられない場合があります。そのような場合でも、UI キットを使って Figma 上で切り替え可能なタブを追加し、ドロップダウンメニューを変更して、フォームをウィザード形式で構成し、カスタマイズしたデザインを Creator にウィジェットとしてインポートできます。これにより、フォームの目的や背景をわかりやすく提示しつつ、ユーザーエクスペリエンスを向上させることができます。

9. Figma ファイルからウィジェットを作成するためのナビゲーションガイド

ウィジェットを埋め込みたいアプリケーションの設定ページに移動し、Figma からインポートオプションを選択します。次に、Figma デザインをアップロードします。手順を見る


10. 注意事項

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

11. 制限事項

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

12. 関連トピック

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