Figmaのプロトタイプをパスワード保護してアップロード

CryptoでFigmaプロトタイプの埋め込みをパスワード保護し、設定を管理します。

動画チュートリアル：Figmaプロトタイプの埋め込みをパスワードで保護する

この動画では、Cryptoプラグインを使ってFigmaプロトタイプの埋め込みにパスワード保護を追加する方法を説明します。

Cryptoの「Live Embed」機能は、公開されているFigmaプロトタイプの埋め込みを、ほかの人と共有できる安全なURLとパスワードの奥に置く仕組みです。共有された相手は、Figmaアカウントがなくても、Crypto Webアプリでデザインを見られます。

元になるFigmaのURLは公開されたままです。Figmaの共有リンクの仕組み上、Cryptoができるのは公開されたFigmaのURL埋め込みをパスワード保護されたURLで包むことだけです。そのため、元のFigmaのURLを知っている人は誰でも引き続き閲覧できます。必要に応じてアクセスを取り消すには、Cryptoプラグインからパスワード保護されたURLを削除するか、Figmaファイルの権限をonly people invited to this fileに変更してください（両方行うこともできます）。

プロトタイプモードに切り替える ​

この機能を使うには、まずCryptoプラグインのツールバーでFigma Prototype (Live Embed) が選ばれていることを確認してください。

Figmaの親フレームが必要です。Figmaのプロトタイプをアップロードするには、Figmaページに「親フレーム」が1つ以上必要です。親フレームとは、ページの直下にある「フレーム」のことです。

使用するFigmaのURLをコピーする ​

プロトタイプのオプションを設定する ​

Figmaプロトタイプ用のパスワード保護リンクを作成するときは、いくつかの設定オプションを選べます。

拡大・縮小のオプション ​

このドロップダウンでは、ブラウザでのプロトタイプの拡大・縮小方法を次のオプションから選べます。

  • 100% - 実寸で表示
  • Fit - 収まるように縮小
  • Fill - 埋まるように縮小または拡大
  • 幅に合わせて縮小 （デフォルト）

ホットスポット ​

Hotspotsトグルを有効にすると、ユーザーが画面をクリックしたときに、デザイン内のクリックできるホットスポットがプロトタイプに表示されます。オフのままにすると、クリックできるホットスポットのヒントは表示されません。

Sidebarトグルを有効にすると、Figmaプロトタイプのサイドバーのナビゲーションパネルがブラウザに表示されます。オフのままにすると、ユーザーには表示されません。

パスワード保護されたプロトタイプのURLを作成する ​

元になるFigmaのURLは公開されたままです。Figmaの共有リンクの仕組み上、Cryptoができるのは公開されたFigmaのURL埋め込みをパスワード保護されたURLで包むことだけです。そのため、元のFigmaのURLを知っている人は誰でも引き続き閲覧できます。必要に応じてアクセスを取り消すには、Cryptoプラグインからパスワード保護されたURLを削除するか、Figmaファイルの権限をonly people invited to this fileに変更してください（両方行うこともできます）。

パスワード保護されたプロトタイプのリンクを作成するには、Share Prototype URLをクリックしてから、Create Prototype URLボタンをクリックします。

アップロードが完了したら、安全なURLとパスワードをコピーし、Figmaプロトタイプの埋め込みをCrypto Webアプリを使ってブラウザで表示できます。

各アップロードは、それを開始したFigmaページに紐づきます。ページを切り替えると、そのページの設定とバージョン履歴が読み込まれます。あるページで完了したアップロードを探すには、元のページに戻ってください。同じページで別のアップロードを始める前に、進行中のアップロードや設定の更新が終わるのを待ってください。

URLとパスワードの情報は後からプラグインで確認できます。後でURLとパスワードの情報をもう一度コピーする必要がある場合は、CryptoプラグインのツールバーにあるShare Prototype URLボタンをクリックします。プロトタイプのURLとパスワードの情報がSecure URL Detailsセクションに表示され、コピーできます。

元になるFigmaのURLは公開されたままです。Figmaの共有リンクの仕組み上、Cryptoができるのは公開されたFigmaのURL埋め込みをパスワード保護されたURLで包むことだけです。そのため、元のFigmaのURLを知っている人は誰でも引き続き閲覧できます。必要に応じてアクセスを取り消すには、Cryptoプラグインからパスワード保護されたURLを削除するか、Figmaファイルの権限をonly people invited to this fileに変更してください（両方行うこともできます）。

プロトタイプのURLの設定を更新する ​

作成して誰かに送ったプロトタイプのCrypto URLを更新したい場合もあるでしょう。CryptoプラグインのツールバーにあるShare Prototype URLボタンをクリックし、必要に応じてFigmaファイルのURLやプロトタイプのオプションを変更してから、Update Existing Prototype URLボタンをクリックすると更新できます。

CryptoのURLのパスワードを変更する ​

Cryptoプラグインは、デフォルトで安全なランダムパスワードを生成します。独自のパスワードに変更したい場合は、アップロード設定パネルのSet Password for Crypto URLs on this pageセクションでChange Passwordトグルを有効にし、入力欄に新しいパスワード（6文字以上）を入力してSet New Passwordボタンをクリックします。これで、このFigmaページのCrypto URLのパスワードが更新されます。

静的なデザインとプロトタイプのURLは、Figmaページごとに同じパスワードを共有します。同じFigmaページで静的なデザインとプロトタイプの両方をアップロードする場合、各Figmaページのパスワードは両方のURLで共通の1つだけである点にご注意ください。一方のパスワードを変更すると、もう一方も更新されます。

パスワードを更新すると、以前のパスワードを知っている人はアクセスできなくなります。パスワードを更新すると、以前のパスワードを持っていた人はURLを閲覧できなくなります。引き続きアクセスしてもらう必要がある場合は、新しいパスワードを改めて共有してください。

プロトタイプのURLを削除する ​

必要に応じてアクセスを取り消すには、Cryptoプラグインからパスワード保護されたURLを削除するか、Figmaファイルの権限をonly people invited to this fileに変更してください（両方行うこともできます）。

Figmaのプロトタイプを閲覧する ​

パスワード保護されたFigmaプロトタイプにログインして操作する ​

CryptoのFigmaプラグインで生成したURLをWebブラウザで開いたら、同じくプラグインで生成したパスワードを貼り付けます。URLのパスワードを貼り付けてLoginボタンをクリックすると認証され、アップロードしたデザインを閲覧できます。

Crypto WebアプリはFigma純正のプロトタイプ埋め込みを使っているため、プロトタイプの操作方法はFigmaで普段見るときとまったく同じです。詳しくは、Figma公式ヘルプの記事プレゼンテーションビューでデザインとプロトタイプをプレビューするをご覧ください。

Figmaプロトタイプのキーボードショートカットを使う ​

Crypto WebアプリはFigma純正のプロトタイプ埋め込みを使っているため、Figmaプロトタイプのショートカットは、Figmaでプロトタイプを見るときとまったく同じです。Crypto Webアプリの使用中にこれらのキーボードショートカットを確認するには、ツールバーのKeyboardアイコンにマウスカーソルを合わせます。

プロトタイプの閲覧中に使えるキーボードショートカット ​

  • 表示サイズを変更（Z）
  • 全画面表示を切り替え（F）
  • プロトタイプを最初から再生（R）
  • 前の画面（←）
  • 次の画面（→）
  • プロトタイプを進める（Enter）

ツールバーのアイコンの表示を切り替える ​

プロトタイプを見ている間、Crypto Webアプリのアイコンツールバーを表示したくない場合は、Crypto WebアプリのツールバーにあるVisibilityアイコンボタンをクリックします。このアイコンボタンをクリックすると、アイコンの表示・非表示が切り替わります。Visibilityアイコンボタンの位置にもう一度カーソルを合わせると表示されるので、再度クリックするとツールバーが表示された状態に戻ります。

Figmaの埋め込みにフォーカスを戻してください。 アイコンの表示を切り替えたり、Cryptoツールバーのほかの操作を使ったりした後は、プロトタイプのキーボードショートカットを使う前に、Figmaのプロトタイプをもう一度クリックしてください。