design
岩瀬 莉奈

2020.10.30デザイン 

Webデザイナー

岩瀬 莉奈

【AdobeXD新機能】10月に追加された3D変形やテキスト自動調整、コンポーネントの新機能を使ってみた。

こんにちは!デザイナーの岩瀬です。

今回は、10月に追加された3D変形やテキスト自動調整、コンポーネントの新機能を実際に使ってみましたので、ご参考になればと思います。
この記事で紹介する内容以外にも、CCライブラリの共有やVisual Studio Code連携など様々な機能が追加されていますので、是非公式のブログもチェックしてみてください。
1028@2x
今回もサンプルのデザインを用意致しました。

1028 – 1@2x

右メニューの立方体をクリックすると、アートボードに「回転のアイコン」が出てきます。
このアイコンをドラックして回転することも出来ますし、右メニューで直接数値を入力して回転させることも出来ます。

1028 – 2@2x

実際に動かして、レイヤーの重なりを表現してみました。(Z軸を使わず、通常の回転も使っています)
表現の幅が広がるので面白いですね。

テキストの自動調整

1028 – 3@2x

続いてテキストの自動調整機能を使っていきます。
テキストボックスに対して、右メニューの「高さを自動調整」のアイコンにチェックを入れます。

ちなみに「Trimlt」というプラグインのショートカットが、3D機能リセットのショートカットとバッティングして使えなくなりましたよね。。
代わりにテキストの自動調整を使用していますが、ショートカットキーがあればなぁと思っています。

1028 – 4@2x

その後、背景の白枠と一緒にグループ化します。
グループ化した後、右メニューのスタックにチェックを入れます。

1028 – 5@2x

すると、テキストの量が増減しても、背景の白枠が自動で調整されます。便利!

1028 – 6@2x

白枠のブロックを複製し、2つのブロックをグループ化して更にスタックにチェックを入れます。

1028 – 7@2x

すると、テキストの量が増減しても、ブロック同士の余白が保たれたまま調整されます。かなり楽!

進化したコンポーネント

1028 – 8@2x

続いて新しく追加されたコンポーネントの機能を紹介します。
まず、マスターコンポーネントを用意します。

1028 – 9@2x

グループコンポーネントを作成します。
「コンポーネント」複製→「コンポーネント」をグループ化→グループ化した「コンポーネント」を更にコンポーネント化。
レイヤーを見ると、「コンポーネント」の上に「コンポーネント」がかかっているのが分かります。

1028 – 10@2x

コンポーネントを紺色に変えると全ての色が変わります。
その後、グループコンポーネントのみピンク色に変えると、グループコンポーネント同士のみ色が変わっています。

1028 – 11@2x

その後、マスターコンポートネントを使用しても、グループコンポーネントには影響がありません。
コンポーネントの管理には注意が必要ですが、慣れると使いやすそうです!

最後まで読んでいただきありがとうございました!

現役ウェブ解析士が教えるWebサイトの読み解き方 イメージ
ホームページ制作サービスはこちら
ページTOPへ