Figmaでテキストごとオブジェクトを拡大・縮小する方法

Figmaでボタンやバナーなどのテキストを含むグループ・またはフレームといったオブジェクトを、フォントサイズ含めてレイアウトごと拡大・縮小する方法の紹介です。

この記事のターゲット

• Figmaの初心者・中級者

• テキストを含むオブジェクトをレイアウトを崩さずに拡大・縮小したい方

• ボタンやフォーム要素など決まったサイズのコンポーネントを拡大・縮小したい方

テキストを含むオブジェクトを拡大・縮小する

テキストを含むオブジェクトの四隅や四辺をドラッグ&ドロップすると、オブジェクト自体を伸縮することができます。

通常の場合はテキストは元のサイズのまま領域だけが拡大・縮小するためレイアウトが崩れてしまいます。

そこで、左上のツールバーのカーソルアイコンをクリックすると表示される「Scale」ツールを選択した状態で、オブジェクトの四隅や四辺をドラッグ&ドロップすると、オブジェクト内に含まれるテキストも併せて拡大・縮小することができます。

ただし、オブジェクトの拡大率に合わせてテキストのフォントサイズ・行間の値が変更されるため、小数値を含む中途半端な数値になるので注意が必要です。

Auto layout化されたオブジェクトでも、スペーシングの比率が維持されたまま拡大・縮小されます。

フォーム・コンポーネントやボタンといったデザインシステムなどのガイドラインによってピクセル単位でサイズが固定されているコンポーネントもで、縦横比を維持したまま拡大・縮小できます。

広告やWEBに掲載するバナーなどに画面モックやデザインを素材として利用したい場合などに便利です。

この記事を読んだ方におすすめの記事

Figma初心者が使い方に困った時に試してほしいTips

今回は、納品されたり引き継いだFigmaのデザインデータを、修正・変更して再利用しようとした時によく発生するトラブルと、その対応方法をいくつか紹介したいと思います。 ... 続きを読む

Figmaで簡単にコンテンツマーケティング用のバナー画像を作ってみよう

今回は、商品紹介やイベントの告知など、顧客にリーチするためのコンテンツマーケティングで利用するベーシックなバナー画像（ヘッダー画像）を、Figmaを使って作ってみようという試みになります。 ... 続きを読む

Figmaでシンプルなフォーム・コンポーネントを作る方法

今回は、Figmaでテキスト入力のシンプルなフォーム・コンポーネントを作る方法を紹介します。一般的なサービスでよくみるフォームを「Component」や「Auto layout」を使って作成します。自由に使えるサンプルファイルも用意していますので、よければご活用ください。 ... 続きを読む