Figmaの静的なデザインをパスワード保護してアップロード

Figmaの静的なフレームをパスワード保護されたCryptoのURLにアップロードし、バージョンを管理します。

動画チュートリアル：Figmaの静的なデザインをパスワードで保護する

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

Cryptoの「Static Frames」機能は、現在のFigmaページにある最上位の親フレームの画像をCryptoのFigmaプラグインからアップロードし、ほかの人と共有できる安全なURLとパスワードを生成する仕組みです。共有された相手は、Figmaアカウントがなくても、Crypto Webアプリでデザインを見られます。

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

アップロードするフレームの選択と選択解除 ​

まず、CryptoプラグインのツールバーでFigma Designs (Static Frames) が選ばれていることを確認してください。

これで、パスワード保護されたリンクで共有するデザインとして使うフレームを、現在のFigmaページから選べるようになります。

Cryptoは、現在のFigmaページにあるすべての「親フレーム」をプラグインに読み込み、共有するデザインを選ぶためのフレームの一覧として表示します。フレームのチェックボックスかサムネイル画像をクリックすると選択され、もう一度クリックすると選択が解除されます。

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

Figmaの親フレームをハイライトして選択する ​

比較したいFigmaの親フレームを選びやすくするため、Figmaページ上でフレームをクリックまたはハイライトすると、Cryptoプラグインのフレーム一覧が自動的にそのフレームに絞り込まれます。

Figmaの親フレームを再読み込みする ​

Cryptoプラグインの実行中に、現在のFigmaページで親フレームを追加または削除する必要がある場合は、必要な変更を加えてから、Cryptoプラグインのツールバーでフレーム数の横にあるRefresh framesアイコンボタンをクリックします。

クイックソートでフレームを並べ替える ​

アップロードするデザインのフレーム順は、いくつかの方法で並べ替えられます。

Figmaのレイヤー順で並べ替える ​

Sort frames by Layer Order ↓ オプション（逆順は ↑）を選ぶと、Figmaのレイヤーの順番に合わせてフレームが自動的に並べ替えられます。

列ごとに見た目の位置で並べ替える ​

Sort frames Left to RightまたはSort frames Right to Leftオプションを選ぶと、Figmaのデザイン上で列ごとに見た目の位置の順番に合わせて、フレームが自動的に並べ替えられます。

行ごとに見た目の位置で並べ替える ​

Sort frames Top to BottomまたはSort frames Bottom to Topオプションを選ぶと、Figmaのデザイン上で行ごとに見た目の位置の順番に合わせて、フレームが自動的に並べ替えられます。

見た目の位置による並べ替えでは、わずかな配置のずれは許容され、各フレームのキャンバス上の絶対位置が使われます。別々のFigmaセクション内にネストされたフレームも対象です。

Figmaのレイヤー名で並べ替える ​

Sort by Figma Layer Name ↓ オプション（逆順は ↑）を選ぶと、Figmaのレイヤー名に従ってフレームが自然な順序で自動的に並べ替えられます。たとえば、Frame 2はFrame 10より前に来ます。

ドラッグ＆ドロップで手動で並べ替える ​

フレームの順番はドラッグ＆ドロップで手動でも並べ替えられます。フレームの行の端にあるドラッグハンドルのアイコンをクリックしたまま、上下にドラッグしてアップロードするフレーム内での順番を移動し、ドロップして順番を確定します。このカスタム順は保存されるので、ほかの並べ替えオプションに切り替えても、並べ替えのセレクトボックスでSort frames by Custom Orderオプションをクリックすれば元に戻せます。

デザインをアップロードする ​

フレームの選択と順番が決まったら、CryptoプラグインのツールバーにあるShare Design URLボタンをクリックします。共有オーバーレイが開くので、Securely Upload Designsボタンをクリックすると画像のアップロードが始まります。

アップロードが完了すると、安全なURLと生成されたパスワードを含む確認メッセージが表示されます。

Figmaファイルを複製すると、そのURLとパスワードもコピーされます。 複製したファイル用に別の情報を生成するには、プラグインを開いた状態でコナミコマンド（Up、Up、Down、Down、Left、Right、Left、Right、B、A）を入力します。Cryptoは以前のURLを削除せずに、新しいURLとパスワードを作成します。

生成されたURLを開く ​

アップロードが完了したら、安全なURLとパスワードをコピーし、Figmaで選んだフレームをCrypto Webアプリを使ってブラウザで表示できます。

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

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

新しいバージョンのURLをアップロードする ​

初めてデザインをアップロードした後も、新しいURLを続けてアップロードでき、デザインのバージョンを作成できます。デザインのさまざまな段階を記録しておいたり、異なるフレームの組み合わせを表示する別々のURLを作成したりするのに便利です。

Cryptoプラグインで新しいバージョンのURLを作成するには、CryptoプラグインのツールバーにあるShare Design URLボタンをクリックしてから、Upload New Version URLボタンをクリックします。

アップロードが完了すると、新しいバージョンの安全なURLとパスワードを含む確認メッセージが表示されます。

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

以前にアップロードしたCryptoのバージョンURLを更新する ​

アップロードして誰かに送った以前のバージョンのCrypto URLを更新したい場合もあるでしょう。以前にアップロードしたURLは、Cryptoプラグインで更新できます。CryptoプラグインのツールバーにあるShare Design URLボタンをクリックし、Select Previous Versionセレクトボックスで以前にアップロードしたバージョンを選んでから、Update Version xxxxxxxx URLボタンをクリックします。

これにより、以前にアップロードしたURLのデザインが、Cryptoプラグインで新しく選んだフレームに置き換わります。URLやパスワードの情報は変わらないため、以前からその情報を知っている人は引き続き使えます。

アップロードが完了すると、新しいバージョンの安全なURLとパスワードを含む確認メッセージが表示されます。

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

URLを更新すると、以前にアップロードしたデザインは置き換えられます。Update Version xxxxxxxx URLボタンをクリックすると、選んだバージョンのアップロード済みデザインがすべて置き換えられます。以前のURLとパスワードを知っている人が、送られた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を閲覧できなくなります。引き続きアクセスしてもらう必要がある場合は、新しいパスワードを改めて共有してください。

CryptoのバージョンURLを削除する ​

Cryptoプラグインで生成した安全なURLは、どのバージョンでも削除できます。CryptoプラグインのツールバーにあるShare Design URLボタンをクリックし、Select Previous Versionセレクトボックスで以前にアップロードしたバージョンを選んでから、I would like to delete the xxxxxxxx version URLトグルを有効にします。このトグルを有効にすると、Delete Version xxxxxxxx URLボタンをクリックできるようになります。

選んだバージョンが削除されたことを知らせる確認メッセージが表示されます。

バージョンURLの削除は元に戻せません。Delete Version xxxxxxxx URLボタンをクリックすると、選んだバージョンのアップロード済みデザインがすべて削除されます。そのURLを知っている人も、デザインを見られなくなります。ただし、以前のURLを削除した後でも、新しいバージョンをアップロードして新しいURLを共有することはいつでもできます。

Figmaの静的なデザインを閲覧する ​

デザインにログインする ​

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

Crypto Webアプリでは、矢印アイコンボタンをクリックするか、フレームをクリックしたまま左右にドラッグするか、キーボードの左矢印キーまたは右矢印キーを押してフレーム間を移動できます。キーボードのスペースキーを押しても次のフレームに移動します。

デザインの特定のフレームに移動する ​

アップロードしたデザインの特定のフレームに直接移動したい場合は、Crypto Webアプリのページ下部にあるナビゲーションバーを使います。ナビゲーションバーにカーソルを合わせると各フレームのサムネイルが表示され、サムネイルをクリックするとそのフレームにすぐに移動します。

アップロードしたデザインのバージョンを切り替える ​

CryptoのFigmaプラグインでデザインのバージョンを複数アップロードしている場合は、Crypto Webアプリでページ左上のセレクトボックスの見出しをクリックすると、バージョンをすぐに切り替えられます。別のバージョンを選ぶと、そのバージョンのデザインが読み込まれます。セレクターの下のラベルを見れば、各バージョンが最後に更新された日時も確認できます。

ダークモードを切り替える ​

暗い背景の方がデザインが見やすい場合は、Crypto Webアプリのツールバーにある太陽または月のアイコンをクリックすると、ダークモードを切り替えられます。アイコンをクリックするたびに、ダークモードとデフォルト（明るい）モードが切り替わります。

周囲の要素の表示を切り替える ​

デザインを見ている間、見出し、矢印アイコン、ナビゲーションバー、アイコンツールバーを表示したくない場合は、Crypto Webアプリのツールバーにある表示アイコンボタンをクリックします。このアイコンボタンをクリックすると、デザイン以外のすべての要素の表示・非表示が切り替わります。