この記事では「Figmaで吹き出しを作る方法」と「プラグインで吹き出しを使用する方法」を紹介します。
目次
Figmaで吹き出しを作る方法
早速Figmaで吹き出しを作る方法を紹介します。
今回は下記のような吹き出しを作成します。
上記のような吹き出しを作成する手順は下記の通りです。
Figmaで吹き出しを作成する手順
- 吹き出しで使用するパーツを用意する
- オートレイアウトを使用する
- 三角形を配置する
吹き出しで使用するパーツを用意する
まずは吹き出しで使用するパーツを作成します。
必要なパーツは下記3点です。
吹き出しで必要なパーツ3点
- 角丸の長方形
- テキスト
- 三角形
これらを用意します。
オートレイアウトを使用する
続いてテキスト量に応じて角丸長方形のサイズが変更するようにオートレイアウト機能を使用して設定します。
手順は下記の通りです。
オートレイアウト機能を使用する手順
- 図形とテキストを選択する
- 「オートレイアウトを使用」を選択する
- テキスト量に応じてサイズ変更するよう調整する
①図形とテキストを選択する
始めに角丸の長方形とテキストを選択します。
②「オートレイアウトを使用」を選択する
続いて右側メニューにある「オートレイアウトを使用」を選択します。
③テキスト量に応じてサイズ変更するよう調整する
最後にテキスト量に合わせて図形サイズが可変する様に設定します。
縦横サイズの箇所を選択しどちらも「コンテンツを内包」にします。
すると長方形のサイズがテキスト量に応じて可変する様になります。
三角形を配置する
最後に三角形を配置します。
これで吹き出しの完成です。
プラグインで吹き出しを使用する方法
続いてプラグインで吹き出しを使用する方法の紹介です。
プラグインで吹き出しを使用する手順
- 「iMessage Chat Bubbles」を開く
- 好きな吹き出しを使用する
「iMessage Chat Bubbles」を開く
「Figma Community」を開き「iMessage Chat Bubbles」と検索します。
そして「Figmaで開く」を選択します。
好きな吹き出しを使用する
既にいくつか作成されている吹き出しがあります。
グループ化を解除して好きな吹き出しを使用してください。
あわせて読みたい
【簡単】AdobeXDで吹き出しを作る方法を紹介！
XDで吹き出しを作る方法を知りたい この記事は上記の課題に向けて作成します。 XDでデザインを作成する際吹き出しを作ることがあると思います。 XDでは簡単に吹き出しを...
Figmaでは簡単に吹き出しが作れる！
この記事ではFigmaで吹き出しを作る方法とFigmaのプラグインで吹き出しを使用する方法を紹介しました。
まだやったことのない方は是非試してみてください。