諸注意
ヘルプの中で迷いそうな所マトメなのがこのTips ＆ Triksなので、何故か写真が思った拡大率でいれられない、グループに影がつけられないと使えないなあと迷ったら是非一読を！私が一月使って体得したことの殆どがここにありました…。
文中のメニュー項目やツール名は、現在は英語版しか出ていないので、あえて和訳していません。
また、文中のShapeとElementsは次のようなものを指すと思います。
- Shapeツール→ Rectangle/Ellipse/Path
- Elements → Shape/Line/Image/Group/Combine Objects(多分)
tips & tricks
全体のチップス＆トリック
- デザイン中のアイテムグループをコピー＆ペーストするよりむしろ、Repeat Gridツールを使うことを考慮する。(プロパティインスペクタ中で利用できる)
- shapeを選択し、Optionキーを押しながらその新しいコピーをドラッグことによって複製できる。
- 要素はロックできる。メニューのObject > Lock (あるいは Cmd+L) を選ぶ。これは実際ロック状態を入れ替えるため、同じコマンドを使ってそのエレメントをロックできる。
- Cmdキーを抑えながら「直接選択」することができる。これはネストされたオブジェクトを選択可能にする。
- shapeの中に画像をドロップすることで素早くマスクがかけられる。そのshapeの塗りはその画像になる。(訳者注:比率を保ったままそのshapeに収まるギリギリのサイズに拡大縮小されてフィットします。塗りの繰り返しや塗りを指定の拡大度にすることはできません。自在に画像をはめたかったら次の編集可能なマスクを使うこと)
- 編集可能なマスクを作ることができる。 画像をインポートし、それから画像の上にshapeをかく。両方を選択して、メニューの Object > Mask with shapeを選ぶ。マスクされたグループをダブルクリックすれば後からマスクや画像を編集できる。
描画とテキスト
- Cmdキーを押したままにすることによってスナップガイドをOFFにすることができる。
- Macのネイティブカラーピッカーにあるものでなく、プロパティインスペクタのアイドロッパーを使う。そうすればより実際の色を取得できる。(訳者注:ネイティブのカラーピッカーにあるスポイトは色相・彩度・明度がすべて微妙に変わるので使い物になりません。)
- そのカラーピッカーの2番めのタブからhex値を入力することができる。現在、より良いカラーピッカー体験のためにネイティブのからピッカーからリプレイスしてSkala Color( https://bjango.com/mac/skalacolor/ )を使うことを検討している。
- どのパスポイントでもダブルクリックすれば、カーブと角を切り替える事ができる。
- カーブハンドルをドラッグしている間にAltキーを押せばカーブハンドルを独立させることができる。(再びそれを依存するようにするには、ダブルクリックして角に戻してまたダブルクリックする)
- ペンツールで描画する時、アンカーポイントを選ぶことができる。
- ダブルクリックすればグループの編集コンテキストに入る(このコンテキストにエレメントを加えられる)ことができ、単にCmdキーを押しながらクリックすれば、グループの中のオブジェクトを選択できる。
- テキストアイテムを選択して、それから新しいテキストを作れば、最初のアイテムから次のものにすべてのスタイルが引き継がれる。
- Path combinations (Add/Subtract/Intersect/Exclude Overlap) は非破壊。結合のON/OFFを切り替えられる。
コンテンツのインポート
- Illustratorからコンテンツを持ってくるには、Illustratorでベクターシェイプを選択しコピーして、Adobe XDにペーストする。
- Photoshopからビットマップコンテンツを持ってくるには、ビットマップあるいはテキストレイヤーですべてを選択(Cmd+A)し(もしくは、ベクターレイヤーかグループをスマートオブジェクトに変換する)、コピーしてAdobe XDにペーストする。ペーストされたレイヤーはビットマップになる。また、マーキーツールで選択範囲を作ってコンテンツをコピーすることもできる。そうしてメニューから編集>コピー(現在のレイヤーの選択対象を得られる)を選ぶか、編集>合成をコピーを選ぶ(選択範囲に入っているすべてのレイヤーの選択対象を得られる)。(訳者注：これはPhotoshopがオブジェクトベースではないためだと思います。レイヤーにサイズもないので持ち込みには選択範囲必須)
- Sketchからコンテンツを持ってくるには、一つか複数のレイヤーまたはグループを選択し、Make Exportableをクリックする。フォーマットにSVGを選んでそのレイヤーをSketchからAdobe XDにドラッグ＆ドロップする。これで、Adobe XDで編集できるベクターコンテンツがえられる。
アセット(PNG, JPG, TIFF, GIF, SVG)をインポートするには、メニューのFile>Importを使うか、FinderからAdobe XDにドラッグ＆ドロップするか、コピー＆ペーストする。またブラウザからAdobe XDにコピー＆ペーストすることもできる。
キーボード制御
- Optionキーを押したまま角丸を調整すれば、一つの角だけに調整を制限することができる。
- エレメントの移動やリサイズするときに一時的にスナップを無効にするには、Cmdキーを押さえる。
- リサイズしている時にShiftキーを押したままにすれば、そのエレメントのアスペクト比を保つことができる。
- shapeを描く間Altキーを押したままにすれば、基準点(左上)からでなく中央から描くことができる。
- 選択したアイテムの不透明度を素早く変更するには、次のナンバーキーを叩けばいい。1は10％、2は20％などなど。0は100％になる。
- 矢印キーでshapeを動かしたり、ポイントを制御するとき、Shiftキーを押していれば10ピクセルずつ動かせる。
- スペースバーを押したままにしてハンドモードにすれば、キャンバスをクリック＆ドラッグできる。
アートボード
- アートボードを選択するには、アートボード名をクリック、アートボードの背景をCmd＋クリック、アートボードの背景をダブルクリックする。
- 空のアートボードを選択するには、そのアートボドの背景をクリックする。
- アートボード(とそのコンテンツ)を複製するには、アートボード名をドラッグしてる間Optionキーを押したままにする。
- アートボード名を変えるには、その名称をダブルクリックする。
Repeat Grid
Repeat Grid中の繰り返しアイテム間のパディングを調整するには、そのRepeat Gridを選び、それからelementの間のスペースをマウスオーバーする。repeat gridの内側のアイテムを編集しているなら、Escapeキーを押して編集モードから出る必要がある。
プロトタイピングとプレビュー
- 一つのアートボード(あるいはすべてのアートボード)上のあらゆるアイテムを選び、ワイヤーをアートボード間のインタラクショントリガーにドラッグする。
- 遷移先へのワイヤーをドラッグしてはずすせば、既にセットしたインタラクションのひも付けが外れる。
- Webのための設計では、ディゾルブサージを使います。
- プロトタイプモードで、Cmd+Aを押すと、(アートボードから直接トリガーされたものを除き)アートボード間のすべてのつながりを見ることができます。
- プレビューウィンドウは現在選択しているアートボードを表示する。もし選択されていなければ、プレビューウィンドウはまずHomeのアートボードを開きます。
- インタラクションプロトタイプのプレビューウィンドウから動画を録画できる。ビデオを開始するにはタイトルバーの録画アイコンをクリックする。
- 再び録画ボタンをクリックするかEscキーを押すと動画録画はとまる。
シェアリング
- シェアするためには、Adobe Creative Cloudアプリか他の何かのAdobeアプリケーション(PhotoshopやIllustratorなど)でAdobeアカウントにログインしなければならない。
- もし最初のインタラクションを追加せずにデザインをシェアすると、すべてのアートボードがアップロードされ、ユーザはキーボードの矢印キーでナビゲートすることができる。アートボードの順番は左上から右に進む
- インタラクションを含んだデザインであれば、Homeアートボードに紐付けられたアートボードだけがアップロードされシェアされる。
- Homeアートボードとして定義されたアートボードは、シェアされたデザインを見るとき目にする最初のアートボードになる。
- プロトタイプモードで、次にHomeにしたいアートボードのHomeアートボードアイコンを選ぶことでホームアートボードを変更できる。
このホームのアートボードのアイコンのみが選択されているアートボードのために現れる (あるいは選ばれたターゲットの遷移先). - モバイルブラウザでプロトタイプを見るとき、ショートカットをそのデバイスのホームスクリーンに保存できる。そうすればプレゼンの時にそのプロトタイプをよりネイティブアプリのように感じさせることができる。
和訳はここまでです。
終わりに
実際、まったく和訳する気はなかったんですが、Mediumにアップする記事とかなりかぶっていたので和訳することにしました。
この内容、毎月のアップデートに合わせて更新したいと思いますが、間に合わなかったり時間がなかったして更新されてない可能性もあります。きっとすぐ公式日本語訳ができるはず…はず！
よろしければMediumにアップしている「操作性から見たAdobe XD (2016年3月版ベータ版)」も合わせてご覧ください。