
コーダー向けデザインツール解説
コーダーがデザインツールを触るとき
コーダーがデザインツールを触るときって、デザイナーさんからもらったデータから、以下の作業がしたいときと"ほぼ"同義ですよね。
画像を書き出すとき
margin / paddingを測るとき
文字サイズ等を調べるとき
くらいでしょうか。
データの形式によってやりたいことがしづらいとかがあると思うので、
・大手4つ:Adobe Photoshop(.psd)/Illustrator(.ai)/XD(.xd)・Figma(.fig)
で、上記の3つのやり方を書いていきたいと思います。
Photoshop
画像を書き出すとき
・書き出したい画像に「書き出したくない文字」などがある場合
レイヤーパネル(表示されていなかったら「表示」から「レイヤー」を選択)の表示切り替えアイコン(👁)をクリックして非表示にする

・書き出したい画像が大きすぎるから分割したい場合。
長方形選択ツールで任意のサイズを囲んで「編集>カット(Ctrl+X / ⌘+X)」「編集>特殊>同じところにペースト(Shift+Ctrl+V / Shift+⌘+V)」

・書き出し
「ファイル>書き出し>書き出し形式 / Web用の保存(従来)」
margin/paddingを測るとき
長方形選択ツールで任意の空間を囲んで

「プロパティパネル>変形」のW / Hをコピーする(入力や変更はしない)

文字サイズ等を調べるとき
レイヤーパネルから任意の「テキストレイヤー(Tのアイコン)」を選択

「プロパティパネル>文字」から文字情報を得る

Illustrator
画像を書き出すとき
書き出したい画像のレイヤーパネルの右端をクリック(複数ある場合はShift+クリックで複数選択できる)

「レイヤーパネル>書き出し用に追加」

「アセットの書き出しパネル>書き出し」

margin/paddingを測るとき
長方形ツールで任意の空間を囲んで

「プロパティパネル>長方形」のW / Hをコピーする

文字サイズ等を調べるとき
レイヤーパネルから任意の「オブジェクト/グループ」を選択

「プロパティパネル>文字」から文字情報を得る

XD
画像を書き出すとき
書き出したいオブジェクトを選択>書き出し対象にする

右のパネルから「書き出し対象にする」場合

・書き出し
「ファイル>書き出し>書き出し形式 / Web用の保存(従来)」
margin/paddingを測るとき
長方形ツールで任意の空間を囲んで

「パネル(右)>変形」のW / Hをコピーする(入力や変更はしない)

文字サイズ等を調べるとき
オブジェクトパネルから任意の「テキスト(Tのアイコン)」を選択

「パネル(右)>テキスト」から文字情報を得る

figma
画像を書き出すとき
レイヤーパネルから任意の「レイヤー」を選択

「デザインパネル(右)>エクスポート」から「レイヤー名(Rectangle 1)をエクスポート」

margin/paddingを測るとき
長方形ツールで任意の空間を囲んで

「デザインパネル(右)」のW / Hをコピーする(入力や変更はしない)

文字サイズ等を調べるとき
レイヤーパネルから任意の「テキストレイヤー(Tのアイコン)」を選択

「パネル(右)>テキスト」から文字情報を得る

まとめ
デザインツールの大手のものは、コーダーにとって「やたらツールが多いもの」と感じられることが多いので、見た目でわかる範囲でのご紹介となりました。
これ以上の加工などが必要になった際は、自社のデザイナーかその加工をしたいwebデザインをした方に聞くのが1番です。どうしても聞けない!という場合は、お手持ちの「検索スキル」で解決されることを祈っております。
楽しいホリデーを☆彡