In this tutorial you'll learn how to create a card component in Figma, using auto layout and variants. You'll also learn how to use slots, so that you don't have to detach instance when modifying the card body.
Figma file: https://www.figma.com/community/file/1180892339637518007
Hop around:
00:00 - Getting started
00:23 - Card header component
01:50 - Card footer component
03:28 - Card component
04:23 - What to do with card body? The common way
05:21 - The slot way, let’s make one!
07:00 - Replacing slot with a local component
09:00 - What if we still detach?
10:18 - Let’s review what we have
10:40 - Adding text variant to card component
12:03 - Adding table variant to card component
14:18 - Let’s clean up
15:30 - Let’s the component by recreating examples
#figma #figmatutorial #uidesign
