Figmaで吹き出しを作る方法を知りたい
この記事は上記の課題に向けて作成しています。
Figmaでは簡単に吹き出しを作ることが出来ます。
この記事ではFigmaで吹き出しを作る方法について紹介します。
この記事を読むメリット
- Figmaで吹き出しを作る方法がわかる
この記事を書いた人
この記事を書いた僕はこんな人です！
- 都内制作会社でwebデザイナー・webディレクターとして勤務
- webデザイナー3年、webディレクター1年目
- web制作現場で学んだことを発信している人
XDでも吹き出しを作ることが出来ます。
あわせて読みたい
【簡単】AdobeXDで吹き出しを作る方法を紹介！
XDで吹き出しを作る方法を知りたい この記事は上記の課題に向けて作成します。 XDでデザインを作成する際吹き出しを作ることがあると思います。 XDでは簡単に吹き出しを...
目次
Figmaで吹き出しを作る方法
早速Figmaで吹き出しを作る方法を紹介します。
今回は下記のような吹き出しを作成します。
上記のような吹き出しを作成する手順は下記の通りです。
Figmaで吹き出しを作成する手順
- 吹き出しで使用するパーツを用意する
- オートレイアウトを使用する
- 三角形を配置する
吹き出しで使用するパーツを用意する
まずは吹き出しで使用するパーツを作成します。
必要なパーツは下記3点です。
吹き出しで必要なパーツ3点
- 角丸の長方形
- テキスト
- 三角形
これらを用意します。
オートレイアウトを使用する
続いてテキスト量に応じて角丸長方形のサイズが変更するようにオートレイアウト機能を使用して設定します。
手順は下記の通りです。
オートレイアウト機能を使用する手順
- 図形とテキストを選択する
- 「オートレイアウトを使用」を選択する
- テキスト量に応じてサイズ変更するよう調整する
①図形とテキストを選択する
始めに角丸の長方形とテキストを選択します。
②「オートレイアウトを使用」を選択する
続いて右側メニューにある「オートレイアウトを使用」を選択します。
③テキスト量に応じてサイズ変更するよう調整する
最後にテキスト量に合わせて図形サイズが可変する様に設定します。
縦横サイズの箇所を選択しどちらも「コンテンツを内包」にします。
すると長方形のサイズがテキスト量に応じて可変する様になります。
三角形を配置する
最後に三角形を配置します。
これで吹き出しの完成です。
Figmaでは簡単に吹き出しが作れる！
この記事ではFigmaで吹き出しを作る方法を紹介しました。
Figmaでは簡単に吹き出しが作れます。
まだ作ったことの無い方は是非実施してみてください。
リンク
Figmaに関する他の記事はこちら
あわせて読みたい
Figmaでカーニング(文字詰め)する方法を紹介！
Figmaでカーニング(文字詰め)する方法を知りたい この記事は上記の課題に向けて作成しています。 Figmaでデザイン制作してると文字詰めする必要が出てきます。 Figmaで...
あわせて読みたい
【Figma】ファイルやオブジェクトを複製する方法！
Figmaでファイルやオブジェクトを複製する方法を知りたい この記事は上記の課題に向けて作成しています。 Figmaではファイルやオブジェクトの複製を簡単にする事が出来...
あわせて読みたい
Figmaでアニメーションを作る方法を紹介！
Figmaでアニメーションを作る方法を知りたい この記事は上記の課題に向けて作成しています。 デザインの段階でアニメーションの動きが確認出来たら、クライアントやエン...