地味だけど大事な、XDドキュメントの管理とコーディング補助について語ろう / XDUG Osaka10 Session2

Adobe XD ユーザーグループ大阪 オンライン勉強会 第10回 Session2「地味だけど大事な、XDドキュメントの管理とコーディング補助について語ろう」で登壇した時の資料です。

●クラウドを利用したデザイン管理とプロトタイプ共有
（クラウドドキュメント、CCライブラリ、Creative Cloud Desktop、マルチフロー、共有リンク、共同編集、バージョン管理）

●コーディングの補助となる機能
（デザインスペック／デザイントークン（CSS変数））

---------------------------------
r360studio 森和恵
https://twitter.com/r360studio
---------------------------------

Transcript

1. 地味だけど大事な、 XDドキュメントの管理とコーディング補助 について語ろう 森和恵 Session2
2. 森和恵 （r360studio） 「むずかしいことでも、わかりやすく伝える」をモットーに 楽しく学べるセミナーを開催。現在はウェブ系セミナーの講 師としてフリーランスで活動中。 YouTubeチャンネル 「 森和恵とウェブ制作を学ぼう! 」 https://youtube.com/r360studio Twitter @r360studio
4. Today's Goal 4 • クラウドを利用した、デザイン管理（ドキュメント、ライブラリ） • クラウドを利用した、プロトタイプの共有 • プロトタイプを元にした、コーディング補助
5. Contents 5 • クラウドベースのドキュメント管理 • Creative Cloud デスクトップ／ Creative Cloudサイト • クラウドドキュメントの「履歴・オフライン編集・共有」 • ドキュメントアセットをCCライブラリで「公開」 • プロトタイプ共有のための「共有リンク」 • デザインスペック・CSS変数（デザイントークン）
6. XDドキュメントの管理
7. クラウドベースのドキュメント管理 • クラウドに自動保存し、作業内容を失うのを防ぐ • どのデバイスからでも、ドキュメントにアクセス • ファイル管理のワークフローが変化 ドキュメントの履歴を残し、過去バージョンを開ける ドキュメントを、他者と共有できる 7
8. Creative Cloud ストレージ※1に保存された ドキュメントを「クラウドドキュメント」という 対応アプリケーション※2の「保存」メニューより アップロードする 総合管理は、 Creative Cloud デスクトップ／サイトで ※1 通常メンバーシップなら、100GB ※2 Photoshop／Illustrator／XDなど
9. ドキュメントの保存 •名前をつける前から、自動保存 •ファイル名をクリックし、名前変更 •ファイル＞別名保存 •ファイル＞ローカルドキュメントとして保存 9 ※Windowsは［≡］ボタンが［ファイル］メニュー代わり
10. Creative Cloud デスクトップ／ Creative Cloudサイト assets.adobe.com 10
11. クラウドドキュメントの履歴 • 自動保存データを バージョンで残す（30日間） • バージョン保護できる （名前を指定／タグ付け） • 以前のバージョンへ復帰は できない。 • 過去バージョンを開いて 利用できる（別名／コピー） 11
12. オフライン編集が有効 • デフォルトで オフライン編集が有効 • ネットワークが切れても ドキュメントの編集は可能 • 次回ネットワークが繋がったときに、 自動的にクラウドファイルが更新される 12
13. クラウドドキュメントの共有 • 他のAdobeIDユーザーと ひとつのドキュメントを編集 • XDの「ドキュメントに招待」 から相手に送る • 相手は、CCデスクトップ／ サイトから通知を受け取る 13
15. ドキュメントアセットを CCライブラリで公開
16. ドキュメントアセットを「CCライブラリで公開」 • プロダクトのデザインパーツを共有する目的で公開（共有） • カラー、文字スタイル、コンポーネントなど、 デザインパーツをまとめたドキュメントアセットを準備 ※デザインシステム： Adobe Spectrum（ https://spectrum.adobe.com/ ） • ドキュメントアセット＞ライブラリとして公開 16
17. 他のドキュメントから、CCライブラリを使う • CCライブラリに登録した デザインシステムを用いて制作 • CCライブラリを「公開」した XDドキュメントはデザインシ ステムを共有するためのもの • CCライブラリに共有者を招待す ることで、チーム運用できる 17
18. CCライブラリをローカルに保存 • Photoshop、IllustratorのCCライ ブラリパネルから「書き出し」 • 拡張子「.cclibs」ファイルとし て保存 • 一部、アプリ固有の形式がある ので、書き出し時に注意 18
19. Creative Cloud ライブラリに追加できるファイルの種類と形式 https://helpx.adobe.com/jp/creative-cloud/help/supported-formats- creative-cloud-libraries.html 19
20. プロトタイプ共有のための 「共有リンク」
21. クラウドドキュメントの共有リンク • チームのメンバーや関係者、クライアントから、デザインの フィードバックをもらうため（デザインレビュー） • エンジニアが完成データをプロダクトに組み込むため （開発／デザインスペック） • アセットを提供するため （ライブラリに招待）（共有リンクを取得） 21
22. 共有モード－1 22
23. 共有モード－2 23
24. 質問: 共有リンクの管理方法は？ • 共有リンクを作ったXDドキュメントは、クラウドで管理 案件ごとにフォルダ分けしておくとよい • 共有リンク一覧は、CCサイトの「作品＞公開中のアイテム」 で確認できる 24
25. CCサイト 作品＞公開中のアイテム • リンクのコピー • 完全に削除 25
26. デザインスペック
27. デザインスペック 27
28. CSS変数（デザイントークン） 28
29. VS CodeのAdobe XD用拡張機能が登場！デザインシステムにもとづ きコード出力と補完が可能に - ICS MEDIA https://ics.media/entry/210107/ 29
30. Thank you.