Adobe XD ユーザーフェス2020内でSlidoにいただいた質問をまとめました。
※ 回答できていない質問もございます。ご了承ください。
【質問一覧】(クリックで回答にジャンプします)
- XDでのバージョン管理どのように行ってるか知りたいです!
- XDを業務で使うにあたり「これめっちゃ便利じゃん!」と思ったプラグインがあれば教えてもらいたいです!
- 共有で発行したリンクの削除の仕方を知りたいです。
- HTML、CSSに書き出す場合、まともなコーディングするプラグインや連携ツールを知りたいです。
- プラグインを入れすぎると、重くなるなどのデメリットはありますか? 目当てのプラグインがなかなか見つからないのと、たまにショートカットが被ってしまう…というくらいしか思いつかずですが、どうでしょう?
- XDがなかなか普及しない原因はなんだと思いますか?案件ではなかなか使えなくてせっかく勉強しているのに悲しいです。
- Webデザイン案件でXDでざざっとワイヤーフレーム→デザインを作成し、PhotoshopやIllustratorで提出できたら嬉しい(が、移管が難しい印象とXD形式の納品っていうのはなかなか厳しいのかなって思っています。
- デスクトップ用のプロトタイプを作成する際、XDではホバーのアクションができないので、InVisionで作業しています。やはりスマホファーストだからホバーという概念がXDにはないのでしょうか?もしあったら…知りたいです。
- グラデ色の位置を数値設定する方法ってXDにありますか?0,30%,60%,100%、みたいなことしたいんですけどわからなくて…。
- 企画書と提案書が別で表記されていましたが、違いがあれば教えていただけるとうれしいです!
- 共有でリンクを作ったあとのバージョン管理方法を知りたい。リンク更新したとき更新前のデータは残りますか?残らないなら、新規リンクを更新のたびに作って、自分で管理するしか方法がないでしょうか…。
- 「みんな投票して〜!」というユーザーボイスがあればぜひ教えてください!投票しにいきます!我々参加者の力でXDがより良くなってくれればと!
- リピート機能のテキスト編集で、個別、全体編集の違いを知りたいです。
- Windowsだと「表示」がないのですがどこにありますか?
- XDでスライドを作成するときに、編集画面でスライドとスライドを行き来するのがパワポと比べて結構大変かと思うのですが、XDでスライドを作られる方はどうお考えでしょうか。もしスライド作成にあたって便利なプラグインがありましたら教えて頂けると嬉しいです。
- こういうパーツのプラグイン?を使ったことないんですがやっぱり使えた方がいいですか?
- 本山さんのセッションで企画書やマニュアルもXDで作るというお話でしたが、そういった今後の資産(顧客との共有資産)として扱う場合、データの管理はどうされているのか気になります!データはAdobe CCのアカウントに紐づく認識(違ってたらすみません!)なので、製作者の出入りのタイミングなど良き方法があればお伺いしたいです。
- XDを使ったデザインガイド運用方法を知りたいです!zero-hightなども魅力的ですが、外部サービスに依存して良いものかと踏み切れずにいます。
- テキスト校正くんがプラグインの検索で出てこないのだが…なぜ??
- グループ化したオブジェクトの表示をだんだんと透明になっていくようなデザインをXDで作りたいのですが、グラデーションでイラレの不透明マスクみたいなものをかけられるような方法ご存知でしたら教えてください。
- コンポーネントのステート機能でステートを管理するよりも、ステート別にコンポーネントを作った方がいいんでしょうか?
- 黒野さんのセッションで、状態を注意深く洗い出す必要がある、というお話があって、その通りだなと思いました。状態を洗い出したいけど要件がふんわりしてるな〜、という時はどうしていますか?カテゴリー分けはあるのかないのか、ステータスの変化はどれだけあるのか、迷うことがあります。
- XDをつかって、サイトマップを簡単に作成できるプラグインか何かがあれば教えてほしいです。
- 実際に作ったアニメーションをサイト内(例えばローディングとかスプラッシュ)で使いたいって時にどのように書き出したり利用するのか興味があります!
- ハンドオフ機能、デザインスペックはエンジニアさん達は実際に使っていますか? それともXD自体をエンジニアが開いて使っていますか? それともそれとも、サードパーティツールとして、Zeplinやavocodeを使っていますか?
- Adobe CC ライブラリを活用してillustratorなど他ツールからアセットのインポートができると聞きました、実際皆さんの現場では活用されていますか? (僕の現場だとアイコンなどのサイズ変更がうまく動かないことが多く、うまく活用できていないです…)
- バージョン機能、ブックマークタグを付ければ、30日以上も消えずに残りますよね?
XDでのバージョン管理どのように行ってるか知りたいです!
XDのバージョン管理機能を使っています。ただバージョン管理に名前つけていないと30日を超えたものから自動削除されるのでご注意ください。
またデザイナーの方はphotoshop時代の引き継ぎから、保険としてファイル名変更でのバージョン管理もしている方が多いようです。
XDを業務で使うにあたり「これめっちゃ便利じゃん!」と思ったプラグインがあれば教えてもらいたいです!
- XDのショートカットのカンペをプラグインパネルに表示できるプラグイン
- keyboard shortcuts
- TODOリストをプラグインパネルに表示できるプラグイン
- Task list
- 色覚異常のシミュレーションを行ったり、背景と文字のコントラスト比のチェックを行えるプラグイン
- Stark
共有で発行したリンクの削除の仕方を知りたいです。
共有モード > 「リンク」一番右側の矢印をクリック > 「リンクを管理」をクリックして「公開中のアイテム」をブラウザで開く > 該当のアイテムの「・・・」から「完全に削除」をクリック
プラグインを入れすぎると、重くなるなどのデメリットはありますか? 目当てのプラグインがなかなか見つからないのと、たまにショートカットが被ってしまう…というくらいしか思いつかずですが、どうでしょう?
お悩み相談室の回答者では重くなるという感覚の方はいませんでした。
プラグインショートカットも重なるときは重なりますがショートカットをカスタムすればおおよそ解決できそうです。
XDがなかなか普及しない原因はなんだと思いますか?案件ではなかなか使えなくてせっかく勉強しているのに悲しいです。
お悩み相談室の回答者では「普及しない」という実感があまりなかったのですが、もしかしたら業種や地方格差によっては普及しにくい条件はあるかもしれません。
その場合は、普及させたい環境に対してXDのメリットがあまり伝わっていない可能性があります。
導入した場合どのように便利になるか、どんな場面で活躍するかといった「XDを導入すべき理由」をユーザーで広めていけるといいですね。
Webデザイン案件でXDでざざっとワイヤーフレーム→デザインを作成し、PhotoshopやIllustratorで提出できたら嬉しい(が、移管が難しい印象とXD形式の納品っていうのはなかなか厳しいのかなって思っています。
データの作りによって手間がまちまちで一概に良い方法の提案は難しいですが、あえてやり方を挙げるなら下記の方法があります。
【Creative Cloudだけで完結】
・PDFに出力すればPDF → 各種フォーマットに書き出す
・CCライブラリにアートボードをグラフィックとして入れてIllustratorでコピーを配置し、ほかのフォーマットで保存する
【他のサービスを使用する方法】
・Photopeaを使用する。
ただし、Webサービスのためクライアントワークに使用するかどうかはよく議論してから利用してください。
※いずれの方法も完全に変換できませんので必ず手直しが必要です。
デスクトップ用のプロトタイプを作成する際、XDではホバーのアクションができないので、InVisionで作業しています。やはりスマホファーストだからホバーという概念がXDにはないのでしょうか?もしあったら…知りたいです。
これはステート機能で解決できます。
ステートについて詳しくはこちらの記事をご覧ください。
グラデ色の位置を数値設定する方法ってXDにありますか?0,30%,60%,100%、みたいなことしたいんですけどわからなくて…。
XDの機能の中にはグラデーションのカラーステップを数値指定は存在しません。APIはあるのでプラグインを作ればできますが、XDからインストールできるプラグインに機能があるものもないですね。
企画書と提案書が別で表記されていましたが、違いがあれば教えていただけるとうれしいです!
こちらについては本山さんが記事にまとめてくださっていますので、こちらでご確認ください。
共有でリンクを作ったあとのバージョン管理方法を知りたい。リンク更新したとき更新前のデータは残りますか?残らないなら、新規リンクを更新のたびに作って、自分で管理するしか方法がないでしょうか…。
共有リンクの更新ではコメント以外が上書きされて残りません。バージョンごとに残したい場合にはお書きになっているようにご自身で管理するのがよいと思います。
「みんな投票して〜!」というユーザーボイスがあればぜひ教えてください!投票しにいきます!我々参加者の力でXDがより良くなってくれればと!
今回いただいた質問に関連するユーザーボイスを集めてみました。
- グラデ色の位置を数値設定する(グラデーションのカラーストップを百分率で見せてほしい)
- Show Gradient Stops Percent
- XDを使ったデザインガイド運用(投票がばらけているのでどれというものがないですが、あえて挙げるなら…)
- Design Systems: Documentation syncs between design system and projects.
- グレースケール(チャンネル)のマスク(αマスクサポート)
- Alpha Mask Support
- サイトマップを簡単に作成
- Sitemap for shared prototype
- Plan View similar to Adobe Muse to create sitemaps
- アニメーションの書き出し
- Export animated SVG
- Export HTML / CSS animation code snippets for transition animations
【ここからおまけ】
- カラーマネージメント対応
- Color Management (set color profiles)
- 外部URLへのリンク
- Link to external URLs
- エリア内テキストの水平方向の揃え
- Vertical Alignment of text in text box
リピート機能のテキスト編集で、個別、全体編集の違いを知りたいです。
リピートグリッド内のテキストは、セルごとに編集になりほかに影響しないのが原則です。しかし、状態によっては全体に反映されるものがあります。
・メインコンポーネントのテキスト…編集済みでないインスタンスに反映
・txtファイルのデータをドロップしたテキスト…テキストファイルのデータが1つだけの時、全反映されるようになります
Windowsだと「表示」がないのですがどこにありますか?
Windowsの場合は、何もないカンバスの上で右クリックしたときに表示される下記のメニューが一番近いものになります。
XDでスライドを作成するときに、編集画面でスライドとスライドを行き来するのがパワポと比べて結構大変かと思うのですが、XDでスライドを作られる方はどうお考えでしょうか。もしスライド作成にあたって便利なプラグインがありましたら教えて頂けると嬉しいです。
こちらについては本山さんが記事にまとめてくださっていますので、こちらでご確認ください。
こういうパーツのプラグイン?を使ったことないんですがやっぱり使えた方がいいですか?
こちらについては本山さんが記事にまとめてくださっていますので、こちらでご確認ください。
本山さんのセッションで企画書やマニュアルもXDで作るというお話でしたが、そういった今後の資産(顧客との共有資産)として扱う場合、データの管理はどうされているのか気になります!データはAdobe CCのアカウントに紐づく認識(違ってたらすみません!)なので、製作者の出入りのタイミングなど良き方法があればお伺いしたいです。
こちらについては本山さんが記事にまとめてくださっていますので、こちらでご確認ください。
XDを使ったデザインガイド運用方法を知りたいです!zero-hightなども魅力的ですが、外部サービスに依存して良いものかと踏み切れずにいます。
こちらについては本山さんが記事にまとめてくださっていますので、こちらでご確認ください。
テキスト校正くんがプラグインの検索で出てこないのだが…なぜ??
テキスト校正くんはXD上には公開されていないプラグインなので、検索では出てきませんが、以下のURLからインストールできます。
誤字検知に役立つ!Adobe XDのプラグイン「テキスト校正くん」を公開
グループ化したオブジェクトの表示をだんだんと透明になっていくようなデザインをXDで作りたいのですが、グラデーションでイラレの不透明マスクみたいなものをかけられるような方法ご存知でしたら教えてください。
XDはグレースケール(チャンネル)のマスクに対応していないので現在はできないです。PhotoshopやAfterEffectなどに持ち込んで処理がよいかも。
コンポーネントのステート機能でステートを管理するよりも、ステート別にコンポーネントを作った方がいいんでしょうか?
どちらともいえません。ステートごとにコンポーネントを分けておくと検索は楽です。
一方、プロトタイプにホバー状態を含めたい場合はステートを利用する必要があります。
現在デザインスペックがステートに対応していないので、そこはデザインを提供する側が考慮する必要があると思います。
(開発用で共有した場合、ステートのスペックをブラウザ上で表示する機能がないのでステートを使った場合はコンポーネントのステートごと表示するアートボードを一緒に共有する必要がある)
黒野さんのセッションで、状態を注意深く洗い出す必要がある、というお話があって、その通りだなと思いました。状態を洗い出したいけど要件がふんわりしてるな〜、という時はどうしていますか?カテゴリー分けはあるのかないのか、ステータスの変化はどれだけあるのか、迷うことがあります。
必ずしも以下が当てはまるとは限りませんが、一例として。
まずは、その機能開発/機能追加によって達成すべき目標を明らかにします(例:お客さまにポイントによるお買い物ができる機能を提供する、気に入った商品にいいねをつけてもらって一覧でひょうじできるようにする、など)。
次に、その目標を達成するための道筋=ユーザーフローをラフに書いていき、システム側で実装可能なのかどうかを確認します。
このあたりで複数人でレビューしていくと、「ここはお客さまが理解しにくい」「この場合は条件分岐する」「ここはデータがとれないので実装できない」などの要件が浮かび上がってくると思われます。ここで浮かび上がっていったものをフロー図に書き足していき、再度レビュー、という過程を何周か回すと、概ね必要な状態が洗い出せるのではないでしょうか。
フロー図上に表しきれない場合は、別途ドキュメントに表で状態変化やその条件を書き出していくこともあります。
XDをつかって、サイトマップを簡単に作成できるプラグインか何かがあれば教えてほしいです。
実際に作ったアニメーションをサイト内(例えばローディングとかスプラッシュ)で使いたいって時にどのように書き出したり利用するのか興味があります!
残念ながらあくまで「プロトタイプ」ですので、書き出してもそのまま使うことはできず、コーダーさんがXDのプロパティインスペクターで距離や角度、不透明度、秒数、イージングなどを実際に確認してコーディングして実装することになります。
書き出したものをそのまま使うには、XDでなくAnimateやAfter EffectsからSVGアニメーションとして書き出す方法があります。
【参考記事】
UI改善にキラリと役立つ!SVGアニメーションの作り方まとめ
デザイナーでもできる、After Effects からのSVGアニメーション書き出し
ハンドオフ機能、デザインスペックはエンジニアさん達は実際に使っていますか? それともXD自体をエンジニアが開いて使っていますか? それともそれとも、サードパーティツールとして、Zeplinやavocodeを使っていますか?
開発用リンク(デザインスペック)はコードを書くときはあまり参照せず、Zeplinやavocodeなどを使うことが多いです。ただ開発用リンクは共有が早いという利点もあるので、実践面よりもデザインの確認やデザイナーとのコミュニケーション面で活用しています。
Adobe CC ライブラリを活用してillustratorなど他ツールからアセットのインポートができると聞きました、実際皆さんの現場では活用されていますか? (僕の現場だとアイコンなどのサイズ変更がうまく動かないことが多く、うまく活用できていないです…)
ご質問への直接的な回答にはなっていないのですが、ちょっとしたアイコンを複数人で使う、という観点で言うと「Icons 4 Design」と言うプラグインが活用できると考えています。
これは、GoogleのMATERIAL DESIGNのアイコンなどWebフォントのアイコンをXD内で検索してそのまま配置が行えるものです。
バージョン機能、ブックマークタグを付ければ、30日以上も消えずに残りますよね?
ご指摘通りです。ブックマークすれば永続で保存され、名前も変えられます。ただし、複製したものにはおそらく履歴はついてこないと思います。