Skip to content

PRO TIP Block youtube.com at the DNS level — Pi-hole, NextDNS or your hosts file — but allow youtube-nocookie.com and i.ytimg.com. These tutorials keep playing; the rabbit hole does not.

Learning without distractions

Create the card and container system: Figma Design for beginners [8 of 13]

61.2K views on YouTube

Figma 71 tutorials here

In this video, we’ll use auto layout to build a responsive card element for our portfolio’s landing page. Then, we’ll revisit the elements we built in the previous lessons and apply auto layout to them to build a container system for our portfolio. Finally, we’ll wrap things up by turning all of the elements into reusable components.

Playlist of full course here → http://bit.ly/4lPoklZ

Feel free to make a copy of the Figma community file to check out the final design and additional resources: https://www.figma.com/community/file/1499455316701927850/figma-design-for-beginners-2025-course-assets

Visit https://help.figma.com/ to view a written version of this course, along with up-to-date information on specific features.

Timestamps:
00:00 Intro
00:36 What is a card element
01:38 Build the card elements
03:54 Put the card together using auto layout
06:24 Apply max width to the card
07:57 Containers and components
09:46 Add containers to existing elements
16:01 Create multiple components
17:00 Move the components to the Components page
17:36 Outro

#Figma #design #beginners #tutorial #course
____________________________________________________

Find us on ⬇️
X (formerly Twitter): https://x.com/figma
Instagram: https://www.instagram.com/figma
LinkedIn: https://www.linkedin.com/company/figma
TikTok: https://tiktok.com/@figma
Figma forum: https://forum.figma.com/