Lesson overview

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

A case study is a written showcase of a specific project or piece of work. It highlights the problem, your approach to solve it, and the results you achieved. It also demonstrates skills and expertise to help potential employers or clients understand the value you can bring. For inspiration on writing your own case studies, check out the dozens of case studies on Figma’s blog, Shortcut.

Your portfolio will likely have multiple case studies. Instead of building a single case study template, we'll create the following elements we can use to customize different case study page layouts:

1. A hero with bold text and an image background to set the context for the page.
2. A section heading to organize the page content.
3. Paragraph text to describe different aspects of the project and how we contributed to its success.
4. An image that allows us to showcase final assets, illustrate works in progress, or other visuals and resources.
5. And a quote block, where we can include a quote, insight from a project, or testimonial from a client or collaborator.

Create a frame using frame presets

Our case study will be a full page on our website. To help us lay out the page and make sure we’re using the correct dimensions, we can use a frame preset.

Frame presets are a collection of ready-made frame sizes. They allow you to quickly create frames for popular dimensions so that you don’t have to remember or guess what size your frames need to be. When you enable the Frame tool, you’ll find frame presets in the right sidebar for common desktop, mobile, and tablet devices. Click the arrow to expand the section and select a preset from the list. You can choose presets for popular device and asset templates. Learn more about frame presets.

Create a new frame using a frame preset

We'll create a frame using the Desktop frame preset.

1. Enable the Frame tool, then open the Desktop section in the right sidebar.
2. Select the Desktop frame preset to add a new frame to the canvas.
3. Rename the new frame to Case study exploration.

Now we have a defined space to start building our case study elements. If you run out of room in the frame, you can select it and drag the bottom edge to lengthen it. In a future lesson, we’ll learn how using auto layout can save us time from having to manually resize frames.