XDの便利機能⑤-プロトタイプを共有しよう

XDを使うと、作ったプロトタイプを上司やお客様、チームのメンバーと共有することができます。

IllustratorやPhotoshopでも、ファイルを共有することはできるじゃないか！！と思った方。確かにそうです！！
ですが、XDで共有するメリットはとても大きいです。

XDで共有する主なメリット
・URLを伝えるだけで共有することができる
・パスワードを設定することも可能
・コメントを残すことができて、コメントも共有できる

今回は共有する手順を確認しておきましょう！

まず、共有したいサイトをデザインしておきます。
また、プロトタイプモードで、画面のリンクを設定しておきましょう。

リンクの設定が終わったら、画面左上のメニューからプロトタイプモードにしてみてください。

リンクが設定されている場合は、下の写真のように画面がつながれているはずです！

では次に、共有モードにきりかえます。

右側にあるプロパティインスペクタの「リンクを作成」ボタンを押しましょう。

「リンクを作成中」の文字が表示されますが、少し待っているとリンクが表示されます。

このリンクを伝えた人と、プロトタイプの共有が可能になります。

せっかく共有の設定を行ったので、確認してみましょう。
表示されたリンクをクリックしましょう。

少し待っていると、ブラウザが表示されて、プロトタイプが表示されます。
画面右側にコメントを記入する欄がありますので、コメント入力できます。

コメントを入力する欄の右側にあるピンのマークをクリックすると、
プロトタイプの中のオブジェクトを選択できるようになります。
選択した後コメントを残せば、どの部分のコメントかわかりやすくなります！

プロトタイプとコメントを一つにまとめることで、作業効率がアップするのはとても魅力があります！
積極的に採用したい機能です。

さて、共有する際にパスワードを設定することが可能です。
リンクは通常予測できないようなリンクになっていますので、特にパスワードを設定する必要性を感じたことはありませんが、どうしてもセキュリティが不安だ、という方は設定するとよいかもしれません。

リンクを設定する際に、パスワードを設定のチェックを入れると設定することが可能です。

共有する際に、表示設定というものがあります。
通常は「デザインビュー」で共有すればOKですが、他のモードでも設定は可能です。

私はデザインビューか開発を使用します。
開発の場合は、CSSなどのコードが見れるので便利だと思います。
（CSSをそのままコピーして使用することはできませんが・・・）

表示設定を開発にすると、さらに書き出し先を設定することができます。
書き出し先は、利用する先、と考えるといいかもしれません。
Webサイトのプロトタイプの場合は、「Web」を選択すればOKです。
リンクを作成、もしくはリンクを更新をクリックしましょう。

リンクができたら、クリックしてプロトタイプを表示しましょう。
画面の右側に、コードのアイコンが表示されます。（デザインビューの時は表示されていませんでした！）
クリックしましょう。

プロトタイプで使っている画像や色、文字のスタイルが表示されます。

そしてプロトタイプの画面の任意の場所を選択してみましょう。
例では「Recipe」の文字を押してみます。

クリックすると、幅や高さが表示されたり、
右側の画面にCSSが表示されます。
すべては使用できませんが、参考しながらコーディングを行うと効率が上がりそうです！

まだまだたくさん共有の機能はありますが、
よく使うものを知っておくだけでも、サイト制作の効率が上がると思いますので、
ぜひ使用してみてくださいね！