見出し画像

AdobeXD ホバーでラインがつくテキストのコツ(DLデータあり)

by｜Yuhei Sasaki

ホバーステートでラインが表示されるテキストリンクを作成することはよくあると思います。
そのとき、インスタンスのテキストを変更するたびにラインの長さを変更していませんか？
パディングを利用して、テキストに合わせて伸縮するラインを作成すれば効率的に作業ができます。

作り方

  1. テキストとラインがちょうど隠れるサイズの長方形を作成し「塗り」と「線」両方のチェックを外します。（透明になります）

  2. 長方形とラインをグループ化します。

  3. 作成したグループとテキストをコンポーネント化して、パディングを適用します。

いいなと思ったら応援しよう！