💬
Figmaでいい感じの吹き出しをつくる
こんにちは、あきねん(@_akinen)と申します。
本記事はFigma Advent Calendar 2021の記事です。
12/21の25:00ということで、21日目の投稿になります。🔥
概要
今回は、👇のような、矢印（◀）を上下中央にしながらテキストを改行できる吹き出しの作り方をご紹介します。
Frameから矢印部分をはみ出させつつ、Auto Layoutを使うというのが今回の肝になります。
用意するもの
- 吹き出し用のFrame
- 小さなFrame(赤)
- 矢印の三角形(Cmd+Eでサイズを要素に合わせておく)
- テキスト
つくりかた
① 小さなFrameの中に三角形を入れます
矢印は右寄せ・上下中央揃えにします。
このとき、FrameのClip ContentはOFFにして、Frameから矢印をはみ出させます。
そして、小さなFrameを最小サイズ（1px * 1px）にします
② 吹き出し用のFrameに、小さなFrameとテキストを入れます
適当に投げ込みます。
③ Auto Layoutを指定する
👇のように指定します。
ここでのポイントは、Frame左のpaddingを0にして、要素間を8pxにすることで、小さなFrameを左端に置きながらあたかも左右にpaddingがあるように見せられる、ということです。
こうすることで中身の要素は常に上下中央揃えになるので、小さなFrame配下の矢印も中央に来てくれます。✨
完成🎉
Auto Layoutの向きを縦方向にすれば、下付きの吹き出しも作成可能です。
まとめ
結果としてCSSのposition: absolute;のような形になったと思います。ただし1px*1pxの正方形があるので、ピクセルパーフェクトではない点は工夫が必要そうです。
PopoverやTooltipは案外つくる機会が多いと思いますので、誰かのお役に立てれば幸いです。より良いつくりかたをご存知の方がいらっしゃいましたら、こっそりTwitterやコメント等で教えて下さい😂
最後までお読みいただき、ありがとうございました！
Discussion