みなさん、こんにちは。
MEGIDO(メギド)です。
最近のwebサイト制作で「Adobe XD」を使用する機会がありました。
Adobe XDのデザインカンプからコーディングするのは初めての経験。
初めて使いましたが、全く触ったことのない初心者でもすぐに使えるような印象です。
今回はAdobe XDで初めてコーディングすることになった方が、コーディングする為に最低限覚えておきたい操作方法を紹介したいと思います。
Adobe XDとは
Adobe XDをあまり知らない方の為に簡単な説明を。
Adobe XDは、webサイトや、モバイルアプリなどのデザインに適した、オールインワンのUX/UIソリューションです。デザイン、プロトタイプ、共有、すべてをXDでおこなえます。
公式サイトの説明は上記の通り。
デザインツールの中でもwebサイトやモバイルアプリのデザインに特化した形のツールです。
また他のデザインツールとは異なりウェブ上にデザインデータを共有できるのも大きな強み。
urlを生成し、それを共有すれば誰でもデザインを見ることが可能になります。
実際にデザインを見せながら打ち合わせが出来るようになるのでデザイナーさんにとっては便利なんじゃないでしょうか。
Adobe XDでのコーディングに最低限覚えるポイント①文字情報の取得
まずは文字情報の取得です。
Adobe XDは簡単に文字の情報が取得できます。
知りたい文字をクリックするだけ。
デザインカンプの文字をクリックするとAdobe XDの右側のサイドバーの「テキスト」部分に情報が表示されます。
またテキストをコピーしたい場合はデザインカンプの文字をダブルクリックすることでコピーできる状態になります。
Adobe XDでのコーディングに最低限覚えるポイント②画像の書き出し
続いてはAdobe XDで画像を書き出す方法です。
１、書き出したい画像を選択
２、ショートカットキー「ctrl + E」を押す
そうすると下記のポップアップが表示されます。
3、各項目を選択
※形式は「png、svg、jpg」の3パターンから選べます。
※書き出し設定はwebサイト制作のコーディングならば「Web」一択です。
※デザイン倍率は「1x(1倍)」か「1x(2倍)」を選択することができるので画像に合わせて選択しましょう。
これで画像を書き出しことが可能です。
また全ての画像を同じ形式で1度に書き出したい場合は、
1、左上のハンバーガーメニューをクリック
2、カーソルを「書き出し」に合わせる
3、すべての「アートボード」を選択
そうすると個別の画像の書き出しと同様にポップアップが表示されるので、自分が書き出したい形式を選択すれば書き出しが完了します。
Adobe XDでのコーディングに最低限覚えるポイント③余白の確認
最後は余白の確認方法です。
余白を知りたい対象のオブジェクトを選択した状態で「Alt」を押しながら他のオブジェクトにカーソルを合わせると、その間の余白が分かります。
こんな風になります。
上記の画像だと隣のオブジェクトとの余白は100pxということに。
他のデザインツールにはないとても便利な機能だと思いました！
かなり楽に余白を確認することが可能です。
最後に
これさえ覚えておけばコーディングしていけるかなという部分を3点紹介しました。
他にも覚えておくべき操作方法があるかもしれないですが、Adobe XDはかなり直感的な操作できるツールっぽいです。
なので手を動かしていけばすぐに操作方法を理解できるかと思います。
web制作初心者だと覚えることが多いですが、いろいろなツールや技術を身に着け、もっとレベルアップしたいと思います。
では今回はこの辺で。
最後までお読みいただきありがとうございました！
まとめ
SHARE
