DAY30.デザインカンプからコーディング編 AdobeXDでWebカンプ制作①

01.AdobeXDをダウンロード

コーディング業務は、Webカンプと呼ばれる「コーディングの設計図」
のような役割のものがあり、そのデザインの通りに実装していくのが
基本の流れ

AdobeIllustrator・photoshop・AdobeXD・figma

ダウンロードには、Adobeへのアカウントを作ることが必須

02.AdobeXDの基本操作

1.配置

右側のバーは要素に対する細かい指定が出来る

左側のバーは要素の積み重ねなどを見れる

配置は自分の好きなように変更できる

2.ショートカット

つかむ：V
四角形：R
アートボード（キャンパス）：A
テキスト：T
戻る：⌘＋Z
進む：⌘＋Shift＋Z

03.Webカンプ（PC版）制作

1.アートボードを作成

・名前の変更
・サイズの変更（機種ごとに選択可能）
・ビューポートの設定

2.sectionの作成

・四角で範囲を作成する
・innerを作成する（アートボード左側の枠線掴んで作成）
・ロゴを配置
・テキストを配置（文字のサイズやカラー設定）
・AVを設定（文字の間隔）

3.画像のダウンロード

・サイズを変更する（値の入力・Shiftを押しながら手動）

4.トラッキング値

トラッキングの値÷1000
letter-spacing: 0.1em;

5.要素間を見る

optionを押しながら見たい要素を触る

6.要素の移動

矢印キーで1ずつ移動させられる
Shift＋矢印キーでキーで10ずつ移動できる

7.複数選択

Shiftを押しながら選択すると複数選択できる

8.コンポーネント

同じようなものを複数作る場合はコンポーネントに登録する
後から一括変更出来て便利