[Adobe XD]6月新機能をちょっと詳しく

Risa Yuguchi
6 min readJul 10, 2017

この記事は、Adobe XD Meeting #06 のフォローアップ記事です。一部挙動の変わったIllustratorとの連携も含みます。

6月リリースの全容は公式ブログにてどうぞ!

[Mac/Windows]シンボルのオーバーライド

上書き可能なシンボル(Override Symbol)とは、ワークスペース上に配置したシンボルそれぞれを部分的に変えられるシンボルのこと。

Mac/Winともに上書き可能シンボルが追加されました。Windows版としては待望のシンボルの実装が元から高機能で嬉しい限り!

上書き可能なものは何?

上書き可能なものは次の3つ。

  • テキストの文章・文言
  • ビットマップ画像
  • 部分的な文字のスタイル

ワークスペース上でしか変更できないものが、上書きの対象(何もしないと同期されない)になるというのが基本ルールのようです。プロパティインスペクタだけで設定できるもの、レイヤーパネルで設定できるもの(非表示・ロック・重ね順)は即座に反映されます。

個別に変更したものを全体に反映したいときは?

個別に更新・全体を更新ができる

シンボル中の全てのオブジェクトの変更をシンボルに加える

ワークスペースにあるシンボルの上でコンテキストメニューを出し、「すべてのシンボルを更新」をクリックします。

シンボル中の部分的なオブジェクトの変更を全シンボルに反映する

シンボルを編集状態にして、更新したいオブジェクトの上でコンテキストメニューを出し、「すべてのシンボルを更新」をクリックします。

(おまけ)全てのシンボルの状態を初期化する

シンボルを任意の場所に配置して、それを掴んで「すべてのシンボルを更新」をする。他のアプリケーションを見ていると単体巻き戻しがほしい思いますが現行は置き直ししかないようです。

何に使うと良さそう?

XDのシンボルは縦横のサイズが固定であることが一番の特異点です。この性質は変わってないので、そこから考えると次のようなものに相性が良いです。

  • 見出しテキストのスタイル統一
  • (主に個別ページ量産時)カードデザインのテンプレート

逆にあまり相性が良くないのは縦に伸びる可能性の高い本文のスタイル統一や、レスポンシブデザインでアートボードサイズに合わせて変形といった用途です。使うたびにシンボルを解除して利用するようなスニペット的な利用と割り切れば使いやすいともいえます。

リピートグリッドとの相性は?

XDといえばリピートグリッドですが、その中でシンボルを使った場合はどうでかというと、シンボルは手でテキストを変更する分にはリピートグリッドに入ってないときと同じように振る舞います。

ラベルのスタイルを統一したい場合には注意が必要です。一つのシンボルを使いまわす場合、後から文言変更するときにリピートグリッドを1行×1列に戻すのが一番確実な方法になってしまうからです。

しかし、リピートグリッドの中に入ったシンボルをデータで変更したとき特徴的な動きをします。

  • テキスト:1番上の行のもので固定
  • 画像:選択した画像の中で一番上に来るものになる。Windowsではパフォーマンスが下がる可能性がある。

現状は、テキストや画像を可変にしないものでシンボルを使うのがおすすめです。

[Windows]グラデーションを塗りに設定する

シェイプの塗りだけに切り替え機能が存在します。フォントの塗りにはグラデーションがないので、はやりの5000兆円のような効果をやるには工夫が必要になります。

線形グラデーションのUIが追加になったため、Windows版でもIllustratorで作成したグラデーションのカラーが変更可能になりました。(円形の操作はできませんが、円形グラデーションも持ち込んで色を替えることができます)

[Windows]部分スタイルの設定

テキストの部分的な変更は文中のスタイルがどう見えるかを確認するのに非常に有効な機能です。XDの場合、もちろんリピートグリッドやシンボルでも使えるのでまさに待っていた機能でした。

XDのフォントスタイルは、テキストのコピー&ペーストを行ったときコピー元のスタイルを一切考慮しません。挿入位置のスタイルが適用されます。この挙動は2017年6月月更新のもので、Mac版初出時(ペーストされたテキストには常にテキストオブジェクト自身のスタイルが適用される)から変更されています。

カレンダーUIにも使えますが…

現在の部分スタイルの仕様では工夫が必要なので一度作ってしまったら日付だけ変えるようにすると良いと思います。

ちょっと変わった利用例(バッドノウハウ)

XDは「思考と同じ速度でデザインする」ために「ソレを実現する機能」に重点が置かれたUIで、「じっくり作るときに使う機能」はその時に使えればいいという設計になっているのかなぁと考えると説明がし易いかもしれません。

--

--

Risa Yuguchi

UI Designer / Interaction Designer. Adobe Community Evangelist(2017-)