Back to Browse

Figma tutorial: Toast component

1.9K views
Nov 20, 2022
40:04

Figma file: https://www.figma.com/community/file/1175840233908243386 Styler plugin: https://www.figma.com/community/plugin/820660579767995949 Contrast plugin: https://www.figma.com/community/plugin/748533339900865323/Contrast Requests or feedback: https://7ms995091mt.typeform.com/to/zp9gXimA 🐰Hop around: 00:00 - Overview 01:13 - Getting started 03:27 - Creating components for status icons and close button 11:29 - Creating text layers for toast title and description 14:49 - Adding toast styles 15:56 - Adding close button to toast 17:22 - Adjusting description layer with set width and line height 18:09 - Creating components for buttons 20:49 - Adding buttons to toast 22:03 - Turning toast into component and adding boolean props for buttons 25:29 - Adding toast variants for different statuses 26:22 - Testing toast component with examples 31:29 - Making a prototype with smart animate 39:33 - Wrapping up Inspiration by: https://dribbble.com/ptrckmrx Icons: https://phosphoricons.com/ #figma #figmatutorial #uidesign

Download

0 formats

No download links available.

Figma tutorial: Toast component | NatokHD