figma-how-to-use-scale
公開日: 2022.05.06  | 更新日: 2022.05.06

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

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

この記事のターゲット

  • Figmaの初心者・中級者

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

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


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

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

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

scale1

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

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

scale2

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

scale3

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

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

scale4

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

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

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

figma-beginners-tips

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

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

figma-basic-banner-design

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

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

figma-how-to-create-form

最新の記事はこちら
広告
この記事を書いた人
うえんつ

うえんつ

Twitter
SaaS・アプリ開発などWEB領域での課題解決が得意なデザイナーで、このブログのオーナーです。
今の関心事
Figma・UI/UX・空間設計・QOL・料理
広告