![](https://technical-creator.com/wp-content/uploads/2017/11/design_specs_small.jpg)
Adobe XDが11月のアップデートを発表しました。
今回のアップデートの目玉機能は「デザインスペック」
こちらの記事には英語版でしか使えないと書いてあったんですが、さっきアップデートしてみたら使えました。
Adobe XDのデザインスペックとは?
エンジニアの方がPSDやSketchデータを見ながら実装するときに困るのが、余白・サイズやフォント・カラーの読み取りです。ただのSketchファイルからそれらを読み取るためにはレイヤーを動かしたり、消したりと作業が発生してしまうことも。本当は画像アセットの書き出しと、それらスタイルの読み取りだけできれば事足りるんですよね。
そういったことを解決してくれるツールがZeplinというものだったり、InVision内にあるInspect Modeだったりします。
![](https://technical-creator.com/wp-content/uploads/2017/11/2ace60703a5a11f1e1e6c3b1e1b966f7.png)
Zeplin
![](https://technical-creator.com/wp-content/uploads/2017/11/Screen-Shot-2017-07-18-at-8.17.21-AM.png)
InVisionのInspect Mode
こういったデザイナーとエンジニア間のやりとりをスムーズにしてくれる機能が、Adobe XDにも追加されました。それが「デザインスペック」です。
デザインスペック使ってみた
たまたま見つけたXD Guruというサイトからサンプルを適当に拾ってきました。
![](https://technical-creator.com/wp-content/uploads/2017/11/327487dc3955199f584f97a6dc7fef7c.png)
こちらのプロジェクトになります
![](https://technical-creator.com/wp-content/uploads/2017/11/52951f14fc0c78b1db8f3759a728dce0.png)
右上のボタンからデザインスペックを公開を選択
![](https://technical-creator.com/wp-content/uploads/2017/11/0eb1be8410bf7baefa15fe3cc458e2e7.png)
アップし終わったのでリンクを開いてみます
![](https://technical-creator.com/wp-content/uploads/2017/11/3f3a98737a5e297aa9ccb2b81675d1fc.png)
ブラウザが立ち上がってプロジェクトが表示されます。Adobe IDのサインインを求められました。Adobe ID自体の作成は無料です。
![](https://technical-creator.com/wp-content/uploads/2017/11/6c4866f0a044bfd0a06533a1a2683ada.png)
使っている色とかフォントが調べられます
![](https://technical-creator.com/wp-content/uploads/2017/11/e5c7c4c634f39449e31616630e6ab54f.png)
レイヤーを選択すると座標とかカラー・透明度・シャドウの数値も取得できます
![](https://technical-creator.com/wp-content/uploads/2017/11/f4ea9a6de367d658aa7b1ab0951a5024.png)
リンクが付けられているボタンを選んだら、行き先のスクリーンが表示されました。これをクリックすると該当のスクリーンに切り替えられます。
なかなか完成度高め。アセット使わないならアリかも
結構便利そうだし、エンジニアの方も無料で使えるし良さげ。ただしアセットの確認はデザインスペック上でできないので、活用しているプロジェクトだとちょっと辛いかも?
Zeplin+SketchもしくはInVision+Sketchでうまくいっている場合は乗り換える必要ないでしょう。
![]() |
書き手:小島 芳樹 Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。 Twitter: @yoshikikoji |
この記事が気に入ったらいいね・フォローお願いします!