今回は「デザインデータからのコーディングが早くできません。XDが便利と聞いたけど、どんな機能を使えば早くコーディングできるんですかね？XDデータからコーディングするのに必須な機能や使い方を教えてください」
こんな悩みに答えていきたいと思います。
【本記事の内容】
- XDを使った余白の測り方
- XDを使った画像の書き出し
- XDを使った選択した要素のCSSを取得する方法
では早速本題に入りましょう。
スポンサードサーチ
Adobe XDデータからのコーディング方法
Adobe XDデータからのコーディング方法、つまりXDデータから必要なデータを取得するためやることは主に以下の３つになります。
- 余白を測る
- 画像の書き出し
- 選択した要素のCSSを取得
この３つの方法をマスターできればひとまずデザインデータからのコーディングで困ることはほとんどないです。
では詳しく見ていきましょう。
余白の測り方
まずは余白を測りたいオブジェクトを選択
（画像では「 テキスト」というオブジェクトを選択しています）
次に「altキー（optionキー）」を押しながら他のオブジェクトにカーソルを合わせると下記のように、要素間の余白を表示してくれます。
あとはここで取得した値を元に「paddingやmargin」を適宜入れてコーディングしていけばOKです。
画像の書き出し
まずは一番左下にあるレイヤーボタンをクリックして、書き出したい画像を選択し下記のように右クリックします。
次に右クリックしたら、「選択した項目を書き出し」という部分を選択します。
最後に「書き出し先」を「Web」に、「設定サイズ2x」に設定して右下の書き出しボタンを押せば書き出し完了です。
選択した要素のCSSを取得する方法
選択した要素のCSSを取得する方法はいくつかあるのですが、今回は一番簡単なプラグイン「Copy CSS」を利用した方法を紹介します。
まずはプラグイン「Copy CSS」の導入方法について解説します。
初めに画面上の「プラグイン」を選択し、「プラグインを見つける」をクリックします。
次に、検索窓の部分で「Copy CSS」と打ち込むと、下記のような青いアイコンの「Copy CSS」が出てくるかと思います。
そこで右側にある「インストール」を押して「インストール済み」となればインストール完了です。
では次に本題の「Copy CSS」の使い方について解説します。
まずはCSSを取得したい要素を選択します。
（今回の例では画像のCSSを取得していきます）
次に、CSSを取得したい要素を選択した状態で、ページ上部の「プラグイン」を選択し「Copy CSS」をクリックします。
そうすると選択した要素のCSSがコピーされます。
最後に、テキストエディタにペースト（貼り付け）すれば下記のようにCSSが貼り付けられ完了です。
＊実際のコーディングでは必要のないCSSがコピーされることもあるので、その場合は必要に応じて削除してしてください。
この「Copy CSS」が使えるとかなりコーディングの時間が短縮できるのでぜひマスターしてください。
まとめ：XDは最高に使いやすい
以上の解説からもわかるように、XDはフォトショップやイラストレーターと比べてかなり使いやすいです。
また、デザインデータから必要なデータを瞬時に引き出せるとコーディングのスピードはかなり早くなるのでXDをまだ使っていないorまだ使い慣れていないという方はぜひ今回の記事を参考にしてみてください。
では今回は以上です。
コメントを残す