久々にXDを触ったらめっちゃパワーアップしてた

2018年7月10日(火)に開催された「Webデザイン・Web制作に関する勉強会 #2」
(https://kfug.connpass.com/event/87844/)
にて登壇しました。

「久々にXDを触ったらめっちゃパワーアップしてた」というタイトルでお話しました。

XDが出たばかりのころにXDを使っていたものの、まだまだ機能が物足りない点が多くて徐々にSketchを使うようになっていきました。
ですが、最近アップデートがどんどんされているので改めて追加された機能を調べたらとても便利に感じることが多かったので紹介したいと思いました。

1.普段使うデザインツールとその使い分け
2.XDとは
3.デザインツールなれてない人にも勧めたいXD
4.デザイナー目線で便利に思った新機能
5.まとめ

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. １．デザイン機能編
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

14. 2．プロトタイプ編
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

18. ３．共有編
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide