材料と分量の間を点線で結ぶという、レシピなどでよく見かけるデザインを作成するのは意外と大変です。長さと、それぞれの単語との余白を手動で調整するのは、手間も時間もかかりますよね。

AdobeXDを使って、なんとか全自動で調節したいと思いデータを考えました。→できました！

ボタンを作る要領で、2種類のボタンを作成します。ボックスの塗りは白、線は黒にしておきます。単語とボックスをグループ化してパディングの設定を行いますが、
1つの単語は右揃えにし、もう1つは左揃えにします。そして、余白の設定を右広めと左広めにしてください。
右が広い方は、左揃え。左が広い方は右揃えにしておきます。　

右が広い方を左側に、左が広い方を右側に配置して、その間に点線を配置します。
この時、点線の長さは、配置の余白よりもすこし眺めにしておいてください。

点線を2つのボタンの中央に配置したら、それぞれのボックスの線をなしにします。
塗りはそのまま残しておきます。最後に全てをグループ化しておきます。

完成です。点線の長さと余白を自動調整してくれるデータができました！

#AdobeXD パディング機能のダブル使いで左右に配置した2つの単語の間のラインを、自動調整！ pic.twitter.com/E4Ark6CJnE

— Taniweb (@taniweb) September 17, 2021

投稿レシピなどでよくある2つの単語の間の線と余白の自動調整　＃AdobeXDはTaniweb制作の最初に登場しました。

AdobeXDで文字数に合わせて下線も伸縮させる方法。マーカー風は色がついたボックスを背景に置いてグールプ化し、パディングを設定するだけですが、点線と下線はレイヤーの順番にちょっとコツがありました。

文字を囲むボックスを作っておき、そのボックスと点線をグループ化したものを、テキストより下に配置してパディングの設定をすることで、マーカー風と同じように伸縮してくれるようになりました。

基本

応用

マーカーではなく下線で、伸縮する見出しを作る方法。

AdobeXDでタイトルを作る際に、マーカー風の背景を付け、さらにそれを文字数に合わせて伸縮させるのは、パディング機能をオンにすれば簡単に実装できます。しかし、下線となると、余白の設定画面で「0（ゼロ）」以外の数字が選択できず、どうしたらいいのかわからないという方も多いと思います。ちょっと難しい応用編として、文字を乗せるボックスを作り、線とグループ化しておき、それを背景に持ってくることで、マーカーのように背景が文字数と一緒に伸縮する下線付きタイトルを作成することができます。

AdobeXDで文字数に合わせて下線も伸縮させる方法。マーカー風は色がついたボックスを背景に置いてグールプ化し、パディングを設定するだけですが、点線と下線はレイヤーの順番にちょっとコツがありました。 pic.twitter.com/Mch5GFpnRh

— Taniweb (@taniweb) September 15, 2021

投稿AdobeXDで文字数に合わせて下線も伸縮させる方法。はTaniweb制作の最初に登場しました。

私は日頃から、簡単な資料を作成するのにもAdobeXDが便利なので、バンバン使っています。横書きで凝ったものじゃない場合は、PDFもこれでいけます。

ただ、時々、ボックスに長い文章を流し込んだ時に、余白を自動で調整する時としない時があります・・・

ちょっとならいいのですが・・・大量にあるとブチ切れそうになる時あります（泣）

スタックの下にあるパディング設定の「何か」が悪いのだと思っていたのですが、Twitterで調べてもわからなかったのですが、今日、気づいてスッキリしました〜最初のボックスを作る時に「塗り」のチェックを外してしまうと、パディングが効かないんです。そんなことだったのね。

実は、一番最初に、ボックスを作成する際に、ボックスの中を透明にしてしまった状態で、グループ化し、パディングを作成すると・・・

余白を自動で取得してくれないというのがわかりました。

最初に、中を白地の状態で作成、その後透過させた場合は、キチンと余白を自動で取得してくれました。

盲点なので、注意が必要です。

illust / 昔の少女マンガ風イラスト　https://www.actzero.jp/developer/report-5426.html

投稿AdobeXDでボックスに長い文章を流し込んだ時にパディングが効いていない時の注意点はTaniweb制作の最初に登場しました。