HOME > HTML & CSS > adobeのXDのデザインカンプをネットで共有する方法
最終更新日:2021.11.28

adobeのXDのデザインカンプをネットで共有する方法

今回はadobeのXDデータをネットで共有する方法を解説します。

制作会社でコーディングするときにXDを使う所が多くなっていますがファイルをそのまま貰ったり渡す所は問題ないけどネットで共有しないといけなくなって自分でネットに公開しないといけなくなった場合の参考になれば幸いです。

今回はスターターキットでやっている場合を想定した解説をします。

 

 

URLを知っている全ての人に公開する方法

特定の人に見せることはほぼないと思うのでこのやり方で大丈夫だと思います。

WEB上にXDデータを公開するときの注意点ですがスターターキットの場合は共有できるデータが1つなので注意しましょう。

共有したいデータのアートボードを開いて↓のように「共有」のタブを開きます。

そうするとアートボードの一番右上に↓が表示されますので「リンクを作成」を押すとネットで公開するためのリンクが作成されます。

↓がリンクが作成された状態です。

万が一↓になったらファイルが保存されていない可能性があるので画面一番上のタブ一覧の「ファイル > 別名で保存」で保存してないかを確認して下さい。

XDファイルの中身を編集した場合は↓の「リンクを更新」をクリックしてください。

これで完成です。

これでURLを知っている人全てに公開することができます。

コーディングする際の値の調べ方

例えば今の状態で公開すると↓となり幅を調べたり余白を調べることが一切できません。

これだとコーディングすることができないので幅や余白などを調べることができるようにします。

↓の表示設定の項目を「デザインレビュー」から「開発」に変えてください。

↓は表示設定の項目です。

そして「リンクを更新」をクリックしてからURLのページに飛ぶと↓の一番右上の赤枠が追加されるので赤枠の中をクリックしてください。

そうすると↓となりクリックすると対象の情報がわかります。

↓は「生きるとむきあう」をクリックしたときです。

クライアントに見せるときは表示設定は「デザインレビュー」でいいですがサイトを作るときは「開発」にすべきです。

●いいねをつけてもらえると励みになります。