Tweet
Tweet

Slide 1

Slide 1 text

久々にXDを触ったら めっちゃパワーアップしてた 2018/07/10 https://kfug.connpass.com/event/87844/ Webデザイン・Web制作に関する勉強会 #2 Yasui Risa

Slide 2

Slide 2 text

Yasui Risa 株式会社 chatbox デザイナー/フロントエンドエンジニア @cotolier_risa cotolierRisa

Slide 3

Slide 3 text

デザインツール、何使っていますか？ WEB 紙デザイン 写真の加工 イラスト CLIP STUDIO

Slide 4

Slide 4 text

XDとは？ アプリやWebデザインに特化した Adobe製のデザインツール。 プロトタイプツールとそれの共有機能が 備わっていることが特徴。

Slide 5

Slide 5 text

ディレクターやエンジニアさんに オススメしたいポイント

Slide 6

Slide 6 text

XDを勧める一押しポイント 無料 ① ② Mac／Win 両方対応

Slide 7

Slide 7 text

XDを勧めるポイント スターターキットが大変親切 https://www.adobe.com/jp/products/xd.html

Slide 8

Slide 8 text

XDを勧めるポイント 各公式サイトから UIキットが配布されている XDの新規画面からも アクセス可能

Slide 9

Slide 9 text

デザイナー目線で見て 素敵！と思った新機能

Slide 10

Slide 10 text

１．デザイン機能編

Slide 11

Slide 11 text

PhotoshopやSketchデータを開くことができる OPEN！

Slide 12

Slide 12 text

カラーやテキストスタイルのシンボル化

Slide 13

Slide 13 text

photshopやillstratorのデータを CCライブラリを使って呼び出し・編集

Slide 14

Slide 14 text

2．プロトタイプ編

Slide 15

Slide 15 text

リンク設定のコピー 紐づけてる設定をコピペできる

Slide 16

Slide 16 text

固定オブジェクトの設定 スクロールに影響しない ヘッダーやフッターを再現できる

Slide 17

Slide 17 text

オーバレイオブジェクトの設定 ポップアップやモーダルの再現が可能

Slide 18

Slide 18 text

３．共有編

Slide 19

Slide 19 text

共有URLにパスワード設定が可能に

Slide 20

Slide 20 text

デザインスペック共有 コーディングに必要な値を調べたり抽出できる コーディングに必要な値を調べたり抽出できる

Slide 21

Slide 21 text

まとめ 新しいツールや機能を知っていることは 自分にとっても他者にとっても有益 何を使って、よりも何をどう伝えるか重視して ツールを選択できるようにしたい

Slide 22

Slide 22 text

ご清聴ありがとうございました！