XDデータからのコーディング方法を徹底解説ツイートシェアはてブLINEPocket今回は「デザインデータからのコーディングが早くできません。XDが便利と聞いたけど、どんな機能を使えば早くコーディングできるんですかね?XDデータからコーディングするのに必須な機能や使い方を教えてください」こんな悩みに答えていきたいと思います。【本記事の内容】XDを使った余白の測り方XDを使った画像の書き出しXDを使った選択した要素のCSSを取得する方法では早速本題に入りましょう。XDデータからのコーディング方法、つまりXDデータから必要なデータを取得するためやることは主に以下の3つになります。余白を測る画像の書き出し選択した要素のCSSを取得この3つの方法をマスターできればひとまずデザインデータからのコーディングで困ることはほとんどないです。詳しく見ていきましょう。テキスト」というオブジェクトを選択しています)次に「altキー(optionキー)」を押しながら他のオブジェクトにカーソルを合わせると下記のように、要素間の余白を表示してくれます。あとはここで取得した値を元に「paddingやmargin」を適宜入れてコーディングしていけばOKです。画像の書き出しまずは一番左下にあるレイヤーボタンをクリックして、書き出したい画像を選択し下記のように右クリックします。次に右クリックしたら、「選択した項目を書き出し」という部分を選択します。最後に「書き出し先」を「Web」に、「設定サイズ2x」に設定して右下の書き出しボタンを押せば書き出し完了です。CSS」を利用した方法を紹介します。CSS」の導入方法について解説します。初めに画面上の「プラグイン」を選択し、「プラグインを見つける」をクリックします。CSS」が出てくるかと思います。そこで右側にある「インストール」を押して「インストール済み」となればインストール完了です。CSS」の使い方について解説します。CSSを取得したい要素を選択します。CSS」をクリックします。すると選択した要素のCSSがコピーされます。最後に、テキストエディタにペースト(貼り付け)すれば下記のようにCSSが貼り付けられ完了です。*実際のコーディングでは必要のないCSSがコピーされることもあるので、その場合は必要に応じて削除してしてください。CSS」が使えるとかなりコーディングの時間が短縮できるのでぜひマスターしてください。まとめ:XDは最高に使いやすい以上の解説からもわかるように、XDはフォトショップやイラストレーターと比べてかなり使いやすいです。デザインデータから必要なデータを瞬時に引き出せるとコーディングのスピードはかなり早くなるのでXDをまだ使っていないorまだ使い慣れていないという方はぜひ今回の記事を参考にしてみてください。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。Twitter頑張るのやめようと思ったって話コーディングが早くなる6つの方法RECOMMENDこちらの記事も人気です。コーディング2019.5.15Sassで最低限覚えておきたい6つの機能コーディング2018.11.24キャッシュを残さないで快適にコーディングを進める方法コーディング2019.4.17自分のコーディング手順とコーディング規則を紹介する。コーディング2019.5.14コーダーとして必要なスキルセットコーディング2018.11.16jQuery初心者にオススメの勉強法を徹底解説コーディング2018.9.11模写コーディングのやり方とポイントを徹底解説!コーディング2019.1.4コーディングが早くなる6つの方法コーディング2019.3.21【厳選】HTML,CSSの勉強で本当にオススメできる5冊を紹介!ABOUTこの記事をかいた人yuki慶應の通信課程に通う大学生。現在はフリーランスとしてコーディングなどの仕事を受けながら、受託開発してる会社でインターンしてます。通信課程(経済学部)に通う大学生。フリーでコーディングの仕事をしている。趣味は読書で、ビジネス書や新書、小説などを中心に読んでいる。現在はデータサイエンスに関心を持っている。通信課程(経済学部)に通う大学生。フリーでコーディングの仕事をしている。趣味は読書で、ビジネス書や新書、小説などを中心に読んでいる。現在はデータサイエンスに関心を持っている。