Create the case study page: Figma Design for beginners [5 of 13]

In this video, we’ll build a basic structure of a case study page to help showcase our work. Along the way, we’ll learn how to create frames using frame presets, introduce how to make your designs responsive using constraints, and how to quickly tidy up and rearrange elements using smart selection.

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

Check out the dozens of case studies on Figma’s blog, Shortcut, for more inspirations: https://www.figma.com/blog/case-study/

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:35 Case study overview
01:08 What are we building
02:40 Frame presets
03:31 Create a frame using frame presets
04:31 Create the section heading
05:28 Create the paragraph text
06:49 Create the quote block
07:45 Text alignment
08:30 Create the image layer
09:26 Create the hero
12:21 Constraints
14:35 Apply constraints to the text layer
15:04 Tidy up the layers
16:02 Smart selection
17:48 Explore layouts and spacings with smart selection
18:05 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/