Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Adobe XDの『こんな時どうする?』を集めました
Search
isaikaori
January 25, 2020
Design
0
670
Adobe XDの『こんな時どうする?』を集めました
Adobe XD ユーザーグループ名古屋 vol.4
isaikaori
January 25, 2020
Tweet
Share
More Decks by isaikaori
See All by isaikaori
熱狂が伝播するチームの作り方
isaikaori
0
22
今日から始めるDesignOpsのヒント
isaikaori
1
590
Deep Dive Adobe XD - レイアウト編
isaikaori
0
200
アウトプットむずい
isaikaori
0
310
実践!a-blog cmsユーザーのためのsite2019.xd活用法
isaikaori
0
180
ECサイトで実現したい『体験』のあり方を考える
isaikaori
1
800
実務で活かすXD!制作を支える取り組みと代表機能の活用術
isaikaori
2
1.3k
a-blog cmsの初心者コンテンツを整備してる話
isaikaori
0
730
強・用・美から考えるテーマデザインのヒント_後編
isaikaori
0
630
Other Decks in Design
See All in Design
Dinosaur Mayhem
storyartist
0
120
aya_murakami_portfolio
ayakaimi1101
0
290
PMとデザイナーはニコイチ! メリットと具体的なアクション10選
mosmos_noki
2
1.3k
Dive Deep into Communication
yomtsu
0
180
今更聞けないデザイン思考 - 高専キャリア2024冬 / imasara-design-thinking
chige
5
780
プロダクトデザインの「守破離」の「破」について
hayashirine
0
290
Figma Code Connect を使ってエンジニアの新しい体験をデリバリする
junkifurukawa
0
510
Findy - デザイナー向け会社紹介 / Hiring Findy's Designers
findyinc
6
61k
How to go from research data to insights?
mastervicedesign
0
200
Where to Start with a Design System Across Different Frontend Frameworks | SpectrumTokyoMeetup#15
tararira
0
110
ZKK_001.pdf
nicholaspegu
0
1.4k
成長する組織のナレッジベースのつくりかた_知識基盤のデザインとメタデザイン
gaussbeam
0
810
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
Building Applications with DynamoDB
mza
93
6.2k
Product Roadmaps are Hard
iamctodd
PRO
50
11k
Being A Developer After 40
akosma
89
590k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
98
18k
Statistics for Hackers
jakevdp
797
220k
The Invisible Side of Design
smashingmag
299
50k
Building Flexible Design Systems
yeseniaperezcruz
328
38k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
173
51k
How STYLIGHT went responsive
nonsquared
96
5.3k
Transcript
Adobe XD の 「こんな時どうする?」を 集めました Adobe XD ユーザーグループ名古屋 vol.4
profile 井⻫花織@いおり 有限会社アップルップル デザイナー Adobe XD ユーザーグループ名古屋
XDの活⽤事例 受託制作 1 デザイン マテリアル作成 プロトタイプ (運⽤ドキュメント) フィードバック 素材提供
XDの活⽤事例 テンプレート 2
XDの活⽤事例 ⾃社CMS テーマファイル 3
XDの活⽤事例 プロモーション ムービー作成 5 https://www.a-blogcms.jp/
XDの活⽤事例 プレゼン スライド 4
XDの活⽤事例 ちょっとした ゲームコンテンツ 6 https://xd.adobe.com/view/ 8ce91590-0890-46ff-6e56- e3d73180e625-fad8/?fullscreen
XD = とにかく汎⽤性が⾼い
theme XDコトはじめ(私の場合) 『こんな時どうする?』特集
XDコトはじめ 1
よく聞かれること ① XD気になっているのですが、導⼊のハードルが⾼いです。 どうやって制作現場に取り⼊れましたか? 当事者ではないですが
2018 2020/01 現在
2018 2020/01 現在 最近XDがいい感じ! By先輩デザイナー 当時の Adobe XD デザインスペック(ベータ版) コメント機能強化中
Photoshop連携強化中 Sketch連携強化中 固定オブジェクト 数値フィールド内の四則演算
2018 2020/01 現在 最近XDがいい感じ! By先輩デザイナー 当時の Adobe XD デザインスペック(ベータ版) コメント機能強化中
Photoshop連携強化中 Sketch連携強化中 固定オブジェクト 数値フィールド内の四則演算
ちょうど同時期ぐらいに開催
導⼊の決め⼿ デザイナーにとどまらない共有の便利さ 1 他のAdobe製品との連携強化・⾒込み 2 無料で⼿軽に試しやすい環境があった 3
XDとどうやって仲良くなりましたか? よく聞かれること ② とにかく豊富な情報源を頼りにしてます
Adobe⾃⾝もかなり⼒を⼊れている 注⽬度の⾼いデザインツール
2019/12/3(⽕) Adobe MAX Japan
None
None
None
None
None
読む/触る/遊ぶ/質問するなど ⾃分にあった⽅法で無理なく情報を追う 1 周りの環境をできる限り整えて XDに触れる回数を増やす 2 XDと仲良くなるために
『こんな時どうする?』特集 2
機能編
リピートグリッドを崩さないで ⼀部を空⽩にしたい CASE1
⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります
プラグイン:RepeatGrid Fitter 1 透過PNG+spaceキー 2 おすすめの⽅法は2つ
プラグイン:RepeatGrid Fitter
透過PNG+spaceキー ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります ⾒出しが⼊ります
共有リンクで本番同様の シミュレーションがしたい CASE2
リンクを共有 デザインレビュー 1 開発 2 プレゼンテーション 3 ユーザーテスト 4 カスタム
5
リンクを共有 デザインレビュー 1 開発 2 プレゼンテーション 3 ユーザーテスト 4 カスタム
5 ⾒た⽬が⼀緒
ホットスポットの ヒント ユーザー テスト プレゼン テーション ナビゲーション コントロール ◦ ×
◦ × 出し分けたいなら「カスタム」を使う
リンクを共有 デザインレビュー 1 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/ 開発 2 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/ プレゼンテーション 3 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen
ユーザーテスト 4 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen&hints=off カスタム 5
リンクを共有 デザインレビュー 1 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/ 開発 2 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/ プレゼンテーション 3 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen
ユーザーテスト 4 https://xd.adobe.com/view/5c3e5b71-249a-4377-5c75-f210fb6a0553-2a0f/?fullscreen&hints=off カスタム 5 リンク先が競合
XDで印刷⽤のデザインを 作りたい CASE3
【おことわり】 あまりおすすめはしない
XDはカラーマネジメント⾮対応 1 単位はpx・書き出しの解像度は72が前提 2 ⽤紙サイズ設定がない 3 印刷時はPDFに書き出す必要がある 4 事前注意事項
XDはカラーマネジメント⾮対応 1 単位はpx・書き出しの解像度は72が前提 2 ⽤紙サイズ設定がない 3 印刷時はPDFに書き出す必要がある 4 事前注意事項
プラグイン:Print Artboard 解像度調整 単位変換 ⽤紙サイズ変更
XDはカラーマネジメント⾮対応 1 単位はpx・書き出しの解像度は72が前提 2 ⽤紙サイズ設定がない 3 印刷時はPDFに書き出す必要がある 4 事前注意事項 ×
× 解決策なし 解決策なし
出来上がりイメージ スピード
効率化編
プロトタイプを もっと早く繋ぎたい CASE4
デザイン 画⾯ コンポーネント ノーマル プロトタイプ 画⾯ ◦ × ◦ ×
まとめてコピー&ペースト 個別にコピー&ペーストなら:右クリック→インタラクションをペースト
あるサイトやファイルの UIやスタイルを素早く参照したい CASE5
ジャンル別に4つ スポイト 1 画⾯内全てのカラーを参照 プラグイン「Mimic」 2 公開サイトのアセット類をインポート UIキット 3 iOS標準などのUIパーツがそのまま使える
アセットをリンク 4 別XDファイルのアセットをリンク
アセットをリンク ⾒出し1テキスト ⾒出し2テキスト 本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキ スト本⽂テキスト本⽂テキスト本⽂テキスト本⽂テキスト ドキュメント1 ドキュメント2 ドキュメント3 ドキュメント4
ソースドキュメントはクラウドに保存する 1 ローカルアセットにする⼿段がない 2 リンクしたアセットは削除できない 3 アセットをリンク ※ただしソースドキュメントで削除した場合は可能
theme XDコトはじめ 『こんな時どうする?』特集
ご静聴ありがとうございました twitter: @isaikaori facebook: isaikaori blog: https://isaikaori.com 井⻫花織@いおり