Figma からデザインをインポートする
Figma のデザインをリファレンス画像とすぐ使えるアサーションに変え、デザインが変わったら同期します。
インポートで得られるもの
Figma で作られたデザインには、各画面に何が表示されるべきかがすでに書かれています。「Figma からインポート」はそのデザインをテストに変えます: すべての画面がタイムライン上のリファレンス画像になり、表示内容のアサーションがあらかじめ用意されます。
接続するアカウントも、作成するキーもありません。Figma 内の小さなプラグインがデザインを 1 個のファイルとして保存し、GUI Test Studio がそのファイルを取り込みます。
4 段階で分かる仕組み
選ぶ
Figma で画面にチェックを付けるか、プロトタイプのフローを選びます
エクスポート
プラグインがデザインファイルを 1 個保存します
インポート
GUI Test Studio が自動的にそのファイルを見つけます
確認
必要なアサーションを残して、インポートします
Figma にプラグインを追加する (一度だけ)
- 1
「Figma からインポート」を開く
GUI Test Studio でファイル、Figma からインポート...(Ctrl+Shift+D) を選ぶか、ツールバーのボタンをクリックします。
ウィンドウはデザインを待ちながら、Figma で何をすればよいかを示します。 - 2
「プラグインを入手」をクリックする
プラグインを入手...でプラグインの入ったフォルダーが開きます。プラグインは GUI Test Studio と一緒にインストールされています。
- 3
Figma のデスクトップアプリに追加する
Figma でプラグイン、開発、マニフェストからプラグインをインポート...を開き、そのフォルダーの manifest.json ファイルを選びます。プラグインはプラグイン一覧に入り、開くどのデザインでも使えるようになります。
デザインをエクスポートする
- 1
プラグインを起動する
Figma でデザインを開き、Ctrl+K キーを押して、「プラグイン」タブから GUI Test Studioを起動します。
- 2
エクスポートする内容を選ぶ
必要な画面にチェックを付けます。デザインにプロトタイプのフローがあれば、代わりにそのフローを選んでください: 画面が順番どおりに、次の画面へ進むクリックとともに取り込まれます。
- 3
「エクスポート」をクリックし、ファイルを「ダウンロード」に置いたままにする
プラグインがデザインファイルを 1 個保存します。「ダウンロード」フォルダーに置いたままにしてください: GUI Test Studio がそのフォルダーを監視していて、1 ～ 2 秒のうちにデザインを開きます。
検証される内容を確認する
テストに何かが追加される前に、ウィンドウは各画面を表示し、見つけた要素ごとに枠を付けて、それぞれがどのアサーションになるかを示します。
| デザインにあるもの | 割り当てられるアサーション |
|---|---|
| ラベル、タイトル、ボタンの文言 | テキストアサーション: その言葉が画面上になければなりません。 |
| 日付や金額のような、変化する値 | 動的テキストアサーション: 日付が何日であれ、日付がそこになければなりません。 |
| アイコン、ロゴ、画像 | ビジュアルアサーション: 要素がデザインどおりの見た目でなければなりません。 |
| 長い段落や大きな写真 | 一覧には載りますがチェックは付きません: たいていはサンプルの内容だからです。 |
ヘッダーやフォームなど、画面の一部分のアサーションは、1 個のグループアサーションとしてまとめて扱われます。配置をチェックにチェックを付けると、グループは要素がデザインどおりの場所にあることも検証します。
| 選択肢 | 働き |
|---|---|
| 構成 | 画面を順番に並べるか、クリック付きのプロトタイプのフローにします。 |
| 作成 | 画像とアサーション、またはアサーションを自分で追加したい場合は画像のみにします。 |
| 配置先 | 再生ヘッドの位置、またはテストの末尾です。 |
| 画像として検証 / テキストとして検証 | 選択した要素のアサーションの種類を切り替えます。 |
| デザインのリンク | 省略可能: デザインのアドレスを貼り付けておくと、後でテストから Figma で開けます。 |
タイムラインに配置されるもの
インポートをクリックします。すべてがデザイン名の付いた 1 個のシナリオとして配置されるので、まとめて移動、コピー、削除ができます。
| タイムライン上 | 内容 |
|---|---|
| ビジュアルリファレンス | 画面ごとに 1 枚の画像、それぞれ 5 秒です。コンテンツファイルの「デザイン」にも一覧表示されます。 |
| アサーション | 各画面のアサーションで、その画像の開始直後に置かれます。 |
| マウスイベント | プロトタイプのフローの場合、次の画面へ進むクリックで、デザインがリンク元にしているボタンに向けられます。 |
「元に戻す」1 回でインポート全体を取り消せます。
デザイナーがフロー「サインイン」をエクスポートします: ログイン、ダッシュボード、設定の 3 画面です。それをインポートすると、3 枚の画像、「サインイン」のクリック、設定の歯車のクリック、各画面のアサーションが得られます。アプリができた日には、テストが実物をクリックしていき、デザインと一致するかどうかを要素ごとに報告します。
デザインが変わったとき
デザインは変わるものです。変わったら Figma からもう一度エクスポートし、GUI Test Studio でファイル、Figma から同期...を選ぶか、デザインの画像を右クリックしてください。
| デザインで変わったこと | 同期で行われること |
|---|---|
| テキストの文言が変わった | アサーションは新しい言葉を期待します。 |
| 要素の見た目が変わった | アサーションは新しい画像を取り込みます。 |
| 要素が移動した、またはサイズが変わった | アサーションはそれを追いかけ、それに向けられたクリックも追いかけます。 |
| 要素がなくなった | そのアサーションは削除されます。 |
| 要素が新しく追加された | チェックは付きません: 求めない限り、新しいものは検証されません。 |
自分で編集したアサーションにもチェックは付かないので、同期が確認なしに作業を上書きすることはありません。画面の画像は常に最新版になり、「元に戻す」1 回ですべてが元に戻ります。
知っておくと便利なこと
| 質問 | 回答 |
|---|---|
| GUI Test Studio は Figma アカウントに接続しますか? | いいえ。プラグインがコンピューター上にファイルを保存し、アプリがそのファイルを読み取ります。どこにも何も送信されません。 |
| 実際の画面では要素はどこにありますか? | どこでもかまいません。デザインはアプリのウィンドウがどこに来るかを示さないので、これらのアサーションは画面全体を検索します。 |
| アプリのフォントはデザインと完全には同じではありません。アサーションは不合格になりますか? | そのため、デザインのアサーションは「緩和」の厳密さで比較します。最初の実際の実行の後、信頼度レポートから実際の見た目を一度採用できます。 |
| 新しいボタンのような、要素 1 個だけをインポートできますか? | はい。記録がすでに表示されている場所にインポートすると、デザインはその上に置かれ、要素が来る予定の場所へ移動できます。 |
任意のデザインツールの普通の画像からテストを用意するには、実装前の機能をテストするをご覧ください。最初の実行の後に実際の見た目を採用するには、アプリを意図的に変更したときをご覧ください。
Figma でデザイン
テスト完成
機能が作られる前に
同期
デザインが変わるたびに
まだ解決しませんか?何をしようとしていたかをお知らせください。1 営業日以内に回答します。Ask our team