※ AdobeXDが正式リリースされて3ヶ月経った時の記事になります。
週末は大雪みたいですね！とっても寒いみたいなので引きこもって週末をすごしたいと思います。
さて今回は、最近話題の「Adobe XD」で制作されたデザインデータをもとにコーディングした際の感想を書いておきたいと思います。
もし今後AdobeXDのデザインデータをコーディングする方がいらっしゃいましたら、少しでも参考になれば幸いです。
Adobe XDを簡単に説明
素早くプロトタイプ作成して、共有、評価をとても簡単にすることができる制作ツール。
シンプルなUIで、実際のアプリ、Webサイトのように動かして使い勝手の確認やデザイン段階でのユーザーテストにも活躍できます。
こちらからダウンロードできます。
Adobe Experience Design CC | Adobe UXプロトタイプ制作ツールのダウンロードまだベータ版なので機能が物足りない部分もあると思いますが、定期的にアップデートがはいるのでどんどん良くなっていっています。
2017年10月18日に正式にリリースされました。デザイン、レイアウト、プロトタイプをすばやく作成、共有 | Adobe XD CC
機能を説明したいところですが、そこは本サイトを見てみてください。
コーディングの際に気をつけたいこと
ここからが本題です。
コーディングする際に気をつけたいことは山のようにありますが、AdobeXDで気をつけたいことについて。
今回初めてAdobeXDのデザインデータをコーディングしたので、色々と確認不足もありました。。。忘れないためにも書いておきます。
スライスはjpgは無理！pngは8、24は選べない！
これ！かなり大問題です！
結局photoshopなどでファイルサイズを小さくしたりしてました、、、、もっと良いやり方はないのでしょうか？？
スライス自体は簡単ですし、レティーナ対応の2倍書き出しもできるので便利でしたが、、、
デザイナーさんも慣れていない！もうXDでワイヤー、デザインが当たり前になってきた
デザイナーの方はありとあらゆる制作ツールを扱っていますが、Adobe XDはまだリリースされて時間が経ってないせいかデザイナーさんが使いこなせていない感が否めませんでした。
もうXDでワイヤーがくることが当たり前になってきました、デザインも、、というのは少ないですがイラレファイルよりもコーディングする際は見かけることが多くなりました。
スライスする時は、スライスしたい要素をクリックして「command + E」でスライスできます。
この時ボタンのような複数のオブジェクトが塊となっているオブジェクトは、グループ化されていないと1つの画像として書き出しができません。( Photoshopのアセットと同じ感覚 )
結構グループ化されていないオブジェクトがあり、こちらでレイヤーをまとめてスライスして！と少し手間がかかりました。。。
まだまだ情報の少ないXDなので、実際にコーディングしないと気づかない点も結構ありそうです。
ガイドが引けない！
これは私的に結構問題です！
ガイドが引けないと、pxをはかる基準になる線がひけません。
「ここと、ここは幅が同じだ！」と一目でわかるわけもなく、しっかり1つずつ測ったのでなかなか時間がかかりました。。。
これは個人的なやり方の問題なのであまり参考にはならないかもしれませんね、、、、、
まとめ
思ったよりもコーディングのデザインとしてはまだ使いづらいかな？というのが率直な感想です。
これからAdobeXDのデザインデータをコーディングした際に気をつけていきたいと思います。
ショートコードのpdfも配布されていたので、自分の使う範囲はできるだけ覚えておきたいですね。
Adobe XDのUIが非常に「 sketch」に似ているので個人的にはすんなり入れた気がします。
個人的には「sketch」のデザインデータだと、モジュルやベースなど様々なわけ方ができとってもコーディングしやすかったので今度はそちらの記事も書きたいと思います。