Figma tutorial: Chat (message) bubble component pt.1 / Mobile app design

Figma file: www.figma.com/...
Color styles tutorial: • Color styles / Figma f...
Phosphor icons: phosphoricons....
Steve Schoger: www.steveschog...
CHAPTERS
00:23 Setting up text layers
01:54 Custom arrow tail
04:30 Combining tail with text layers
07:22 Turning message bubble into a component
08:26 Multiple lines variant
09:56 Outgoing message variants
13:16 Content text properties
#figma #figmatutorial #uidesign

[@outrigger8594]

I haven't had a chance to design a messaging app yet, but your techniques really are very useful for other projects, will definitely try those. Thank you for sharing!

[@mash312]

Sweet! And thank you :)

[@salmamohamed8312]

that was a helpful tut with tons of tips!
amazing job.. your channel is inspiring me

[@mash312]

this is so kind, thank you so much :)

[@alexzlatkus7057]

I'm not sure how on the dev side this works, but you can vertical trim the Message and Time text layers so they have the same baseline.

[@mash312]

👀 I’ll adjust that

[@channelchuu6629]

6:34 … please how did you bring those frames together to form a 3rd frame. I’m having trouble with that and can’t get over that hurdle :(((

[@mash312]

hey! have the two frames selected and then click Shift+A to add auto layout (you can also add auto layout from the properties panel on the right)
here are Figma docs if helpful: help.figma.com/hc/en-us/articles/5731482952599-Add-auto-layout-to-a-design

[@channelchuu6629]

Thank you so much! It worked! I can’t get my auto layout like yours tho… at 6:55… I am not seeing any toggle saying “fixed height / fill container” when I click on the rectangle (top left part of chat bubble). It just shows me “rectangle 11” highlighted. Cus of this my chat bubble works until I try to type a long message and the bottom left of the chat bubble is not expanding with the rest bubble. Hope this makes sense! Pls help 🥺

[@laxmanpatil81]

Love it.

[@mash312]

🙌 thank you!

[@noobicorn_gamer]

Learned a lot! But for the last part. You could’ve just flipped the whole thing and do it much easier lol thx tho

[@mash312]

thank you :)

[@Q-Phreak]

What a hack - but it works! Thank you so much

[@mash312]

thank you! :) i was surprised too haha

[@SvjetlanaZajec]

why you use percentages (150%) for line height value?

[@mash312]

Percentages are more manageable (for example, if font size changes, you don’t have to worry about updating the line height)

[@mash312]

Spoiler alert: almost half of this video is just doing the custom arrow tail 😅