ITツール

【Figma】テキストの長さに応じて可変するオブジェクトを作る

text-kahen-object

Figma にて、テキストの長さや量に応じて可変する要素の作り方を解説します。

コーディングの感覚と同じように、もととなるテキスト要素を決定して、そこから余白とデザインを作っていく感じになります。

テキスト量で可変するオブジェクトの作り方

1Tを押して、テキストモードに変更。テキストパーツを作成します。

2テキストを選択した状態でshiftAを押して、auto layout に変換します。
右クリックのメニューから選択してもOKです。

text-kahen-object_1

すると左のレイヤーが、テキスト要素の親レイヤーに Frame が作られました。これで基本的には完了です。

text-kahen-object_4

あとはデザインの調整です。テキストを取り囲む余白(padding)を設定したり、背景色や角丸を設定していきます。
デザインで設定する項目は以下の通り。

text-kahen-object_2

あとがき

XDの場合、先に「四角のオブジェクト」と「テキスト」を造り、それらをひとつのグループにまとめてから、余白の設定などをしていきます。

なのでFigmaとXDとでは、作成する手順が違うんですね。

Figmaのほうが実際のHTMLの考え方に近い作り方になるので、個人的にはFigmaのほうが使いやすいように感じますね。

関連キーワードからさらに見る

\ この情報をシェアしよう! /

  • この記事を書いた人

ばんか

Webディレクターとしてサラリーマンをやりつつ、個人でブログや執筆活動をするパラレルキャリアを実施中。 ITツールを日常で活かす方法を広く伝え歩くことをミッションとした「ITツールエバンジェリスト」です。AllAboutやYahooクリエイターズプログラムでも活動中。

-ITツール
-,