---
url: "/ja/crypto/designs.md"
description: "Figmaの静的なフレームをパスワード保護されたCryptoのURLにアップロードし、バージョンを管理します。"
---

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

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

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

この動画では、Cryptoプラグインを使ってFigmaのデザインにパスワード保護を追加する方法を説明します。
[Embedded media](https://www.youtube-nocookie.com/embed/RXqpOgT0a04)

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

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

## アップロードするフレームの選択と選択解除 {#selecting-and-deselecting-frames-to-upload}

[Video](/assets/videos/crypto/design/select-deselect-layers.mp4)

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

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

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

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

## Figmaの親フレームをハイライトして選択する {#highlighting-figma-parent-frames-to-select-them}

[Video](/assets/videos/crypto/design/filter-selected-layers.mp4)

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

## Figmaの親フレームを再読み込みする {#refreshing-figma-parent-frames}

[Video](/assets/videos/crypto/design/refreshing-deleted-layers.mp4)

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

## クイックソートでフレームを並べ替える {#using-quick-sort-to-order-your-frames}

[Video](/assets/videos/crypto/design/sort-layers-dropdown.mp4)

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

### Figmaのレイヤー順で並べ替える {#sort-frames-by-figma-layer-order}

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

### 列ごとに見た目の位置で並べ替える {#sort-frames-visually-by-columns}

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

### 行ごとに見た目の位置で並べ替える {#sort-frames-visually-by-rows}

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

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

### Figmaのレイヤー名で並べ替える {#sort-frames-visually-by-figma-layer-name}

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

## ドラッグ＆ドロップで手動で並べ替える {#manually-ordering-frames-with-drag-and-drop}

[Video](/assets/videos/crypto/design/drag-drop-ordering.mp4)

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

## デザインをアップロードする {#uploading-your-designs}

[Video](/assets/videos/crypto/design/upload-first-version.mp4)

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

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

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

## 生成されたURLを開く {#opening-your-generated-url}

[Video](/assets/videos/crypto/design/confirmation-screen.mp4)

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

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

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

## 新しいバージョンのURLをアップロードする {#uploading-a-new-version-url}

[Video](/assets/videos/crypto/design/upload-new-version.mp4)

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

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

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

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

## 以前にアップロードしたCryptoのバージョンURLを更新する {#updating-a-previously-uploaded-crypto-version-url}

[Video](/assets/videos/crypto/design/update-previous-version.mp4)

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

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

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

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

> **Warning:** **URLを更新すると、以前にアップロードしたデザインは置き換えられます**。**Update Version xxxxxxxx URL**ボタンをクリックすると、選んだバージョンのアップロード済みデザインがすべて置き換えられます。以前のURLとパスワードを知っている人が、送られたURLに再度アクセスすると、更新後のデザインが表示されます。

## CryptoのURLのパスワードを変更する {#changing-your-crypto-url-password}

[Video](/assets/videos/crypto/design/change-password.mp4)

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

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

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

## CryptoのバージョンURLを削除する {#deleting-a-crypto-version-url}

[Video](/assets/videos/crypto/design/delete-previous-version.mp4)

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

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

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

## Figmaの静的なデザインを閲覧する {#viewing-static-figma-designs}

### デザインにログインする {#logging-in-to-your-designs}

[Video](/assets/videos/crypto/design/confirmation-screen.mp4)

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

### デザインのフレーム間を移動する {#navigating-the-frames-in-your-design}

[Video](/assets/videos/crypto/design/design-arrow-drag.mp4)

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

### デザインの特定のフレームに移動する {#jumping-between-frames-in-your-design}

[Video](/assets/videos/crypto/design/design-nav-bar.mp4)

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

### アップロードしたデザインのバージョンを切り替える {#switching-between-your-uploaded-design-versions}

[Video](/assets/videos/crypto/design/design-swap-versions.mp4)

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

### ダークモードを切り替える {#toggling-dark-mode}

[Video](/assets/videos/crypto/design/design-dark-mode.mp4)

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

### 周囲の要素の表示を切り替える {#toggling-the-outer-contents-visibility}

[Video](/assets/videos/crypto/design/design-visibility.mp4)

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