コンポーネントのサイズ変更が難しい！上手なリサイズ方法は？ – Adobe XD

こんにちは、ベジェです。AdobeXDを愛用しているウェブデザイナーです。

最近シンボルがコンポーネントに進化しましたが、みなさんは挙動の違いに戸惑っていませんか？

コンポーネントになってからマスク範囲のような概念を持ち、なんだか言うことを聞いてくれない。シンボルの頃は素直だったのに、、、、

「アイツ、変わっちゃったな」「もう自分の知ってるアイツじゃない、、、」そんな悲しいことを言わないで、コンポーネントと仲良くやっていくためのサイズ変更のコツをお届けします。

私がおすすめするやり方は二通り

• ボタンやカードなど写真や色にバリエーションがあるパーツ＝レスポンシブサイズ変更の設定をする
• フッターなどの共通パーツ＝いったん解除してサイズ変更後に置き換える

そもそもサイズ変更のなにが難しいの？

このようなコンポーネントがあったとして、サイズ調整する場合。

ダブルクリックしてコンポーネントの中に入って編集すると、思いがけず下が切れてしまいます。

シンボルの時はもっと素直だったのに！どうしちゃったの、この子！！

切れるのはバグなの？

2019年6月現在、この問題はAdobeのユーザーボイスに報告されています。

「BUG-FILED」というタグが付いているので、いずれ修正されそうですね。

「早く直して！」という声が大きければ修正が加速するかもしれませんので、気になる方は投票してみてください。

ユーザーボイスの投票ページ：Componentcropping（https://adobexd.uservoice.com/forums/353010-adobe-xd-bugs/suggestions/37640830-component-cropping）

バグが修正されたらこの記事はお役御免ということになりますね、、、

現時点での解決方法　レスポンシブサイズ変更編

コンポーネントはレスポンシブサイズ変更に対応しているので、それを使ってリサイズすることができます。

レスポンシブサイズ変更ってなに？

レスポンシブサイズ変更というのは、位置関係をある程度認識して上手にサイズ調整してくれる機能です。

例えば、天地左右の中心にテキストを配置し、右上にラベルマークを付けたカードのデザイン。

グループ化もコンポーネント化も何もしてない素の状態で、このように位置関係を保ってサイズ変更してくれました。

パーツがそれほど複雑じゃなければ上手くいきますが、複雑になるとさすがに思い通りにならない場合もあります。

たとえば複数の情報があるカードデザイン。

緑色の枠を引っ張って下に伸ばします。

この時、「寝ている猫です」「2019.05.30」の文字は動かず、ユーザー情報だけ下についてきてほしいですが、うまくいきません。

レスポンシブサイズ変更の設定をしよう！

右側のプロパティパネルにレスポンシブサイズ変更の設定項目があります。

「寝ている猫です」の文字を見ると、それぞれ「右を固定」「幅を固定」「高さを固定」がオンになっています。

では、「上を固定」をオンにしてみましょう。

緑のボックスを引っ張って伸ばしても、「寝ている猫です」の文字が動かないようになりました！

「2019.05.30」にも同じように設定すれば、思い通りに動くようになります。

この設定、はじめは難しいですが、何度かやってるうちにどこを固定すればいいかわかるようになります。

解決方法その2　解除して置き換え編

グループが入れ子になってたり、パーツが複雑でレスポンシブサイズ変更の設定がどうしても面倒なときがあります。

そんな時は、いったん解除してコンポーネントごと置き換えることができます。

ただし、この方法は個別の変更を保てません。写真やテキストや色など、インスタンス個別に加えた変更がすべて元に戻ってしまいます。ウェブサイトのフッターデザインなど、個別に変更する必要のない共通パーツに有効な手段です。

「インスタンス個別の変更を保てない」というのがどのようなことかも含めて、やり方を説明します。

例えば、このように3か所で使いまわしているコンポーネント。「元コンポーネント」という名前で、マスターは猫だとします。

豚のカードを「コンポーネントをグループ解除」します。

そして、サイズを調整します。

豚のカードをコンポーネント化し、「新コンポーネント」という名前にします。

元コンポーネントのマスターコンポーネント（猫のカード）に、「新コンポーネント」のアセットをドラッグドロップします。

サイズを一括変更できました。

ただし、テキストと写真はすべて豚になってしまいました、、、

というわけでこの方法は、テキストや写真などがまったく同じコンポーネントに対して、サイズを一括編集したい場合に有効です。

フッターやサイドバーなどの共通パーツにおすすめですので、「レスポンシブサイズ変更の設定めんどいわー」というときにお試しください。

AdobeXDはこれからも進化が楽しみです。

少しずつ増える機能をキャッチしながら、使いこなしていきましょう！