無料体験可能なプログラミングスクールはコチラ

デザイン

Adobe XDで要素に関する各CSSの値を計算・取得する方法

XDからCSSプロパティの値を取得

Adobe XDで制作したデザインカンプを元にコーディングを行なう際、XD上に表示されている値を、そのままCSSの値として使うことができないということが起こります。

この問題を解決するためには、XD上に表示されている値を正しく計算・取得する知識が必要です。

この記事では、XD要素のCSSの値を計算・取得する方法について、CSSプロパティ毎に解説していきます。

記事の前半では「テキスト」に関するCSS値の取得方法について。後半では「オブジェクト」に関するCSS値の取得方法についてといった流れで解説します。

ぜひXDデータを元にコーディングを行なう際に、役立てていただければ幸いです!

テキストに関するCSSの値を計算・取得する方法

font-familyの取得

font-familyfont-familyの値

font-familyは、CSSプロパティの値としてそのまま使うことができます。

font-size

font-sizefont-sizeの値

font-sizeは、CSSプロパティの値としてそのまま使うことができます。

font-weight

font-weightfont-weightの値

font-weightは値をそのまま使うことができないので、頭の中で変換してあげる必要が出てきます。

以下にそれぞれのfont-weightの対応表を作りましたので、CSS側で記述する際の参考にしてみて下さい。

font-weight Weight値 ISO表記
100 W1 UL (ultra light)
200 W2 EL (extra light)
300 W3 L (light)
400 (normal) W4 SL (semi light)
500 W5 M (medium)
600 W6 SB (Semi bold)
700 (bold) W7 B (bold)
800 W8 EB (extra bold)
900 W9 UB (ultra bold)

画像の例で言うと「Bold」と表示されているので、CSSでは「boldまたは700」としてfont-weightの値を指定することができます。

letter-spacing

letter-spacingletter-spacingの値

letter-spacingはAV項目(カーニング)の値を1,000で割り、計算後の数値に「em」をつけることで、CSS側でも同じ値を使うことができます。

letter-spacingを求める計算式

XDのAV項目の数値 ÷ 1,000(em)

例えば「50」という値の場合は、「50 ÷ 1,000 = 0.05em」と言った具合です。

line-height

line-heightline-heightの値

line-heightは、font-sizeを行間の値で割ることで求めることができます。

line-heightを求める計算式

font-size ÷ 行間値

上記画像で説明すると、font-sizeが「40」と行間が「48」なので、「40 ÷ 48 = 0.83」というように求めることができます。

小数点第2・3位以下は、好みで四捨五入すればOKです。

color

colorcolorの値

colorは、「塗り」と表示されている左側の色が表示されている部分をクリックすることで、調べることができます。

クリック後にカラーパネルが開くので、そこからcolorプロパティで使う値を取得します。

Hex・RGB・HSBの値を切り替え表示できるようになっているので、必要に応じて切り替えて値を抜き出しましょう。

オブジェクトに関するCSSの値を計算・取得する方法

width / height

widthとheightwidthとheightの値

widthとheightは、CSSプロパティの値としてそのまま使うことができます。

opacity

opacityopacityの値

opacityは、XD上だと0〜100%の値で表示されているため、CSSで使うために0~1の値に置き換える必要があります。

例えば上記画像のように「70%」と表示されているのであれば、「opacity: 0.7」と記述します。

65%であれば、「0.65」といった具合です。

background-color

background-colorbackground-colorの値

background-colorはテキストのcolorを取得する際と同様に、「塗り」の左隣にある色をクリックし、カラーパネル上より値を取得することができます。

Hex・RGB・HSBの切り替えができるので、状況に応じて切り替えましょう。

border

borderborderの値

borderは、CSSプロパティの値としてそのまま使うことができます。

サイズは「border-width」の値として指定し、「border-color」に関してはカラーパネル上で確認することができます。

破線のスタイルを使う際は、それぞれ「線分」と「間隔」の値を元にコーディングすればOKです。

box-shadow

box-shadowbox-shadowの値

box-shadowは、CSSプロパティの値としてそのまま使うことができます。

それぞれ「box-shadow: Xの値 Yの値 Bの値 カラーコード」という形で、反映することが可能です。

上記画像をbox-shadowに置き換えると、「box-shadow: 0 3px 6px rgba(0, 0, 0, .16)」になります。

最後に

この記事では、XD上で表示されているデータをCSSプロパティの値として使うための、計算・取得方法について解説しました。

XDは直感的に操作できるため、全くの初心者でも簡単に使いこなすことができます。

とにかくXDを触る回数を増やせば、調べずとも細かな部分まで理解できるようになります。

ぜひ、コーディング時以外もデザインカンプを自分で作ってみるなどして、XDの操作や各データの意味について理解を深めていきましょう!

-デザイン

© 2021 ユウマのブログ