2.4 Card

In the Figmaster - Lessons Figma file, open the 2.4 Card page.

Introduction

Cards are surfaces that display content and actions on a single topic. In this chapter, we will create a simple responsive card component. We'll use auto-layout so the content of the Card will behave accordingly when resized.

Step 1. Text Wrapper

Part 1. Header

  1. Open the text tool, click on a canvas and type in Card label.
  2. Change the text style to Heading/S.
  3. Change the color to Neutral/100 color style.
  4. Copy this placeholder text: Credibly reintermediate client focused growth strategies with functional initiatives.
  5. Open the text tool, click on a canvas and paste the text.
  6. Change the text style to Text M/Regular.
  7. Change the color to Neutral/80 color style.
  8. Move the text, so it's 8 px at the bottom of the heading.
  9. Select both text elements and group them.
  10. Change the group's name to Header.
  11. Add an auto-layout.
  12. Select both text elements inside the group and set their width Resizing property to Fill container.

Part 2. Date

  1. Open the text tool, click on a canvas, and type in Published on 24 Jan, 2021.
  2. Change the text style to Text S/Regular.
  3. Change the color to Neutral/70 color style.
  4. Move it 16 px below the Header group.

Part 3. Wrapper

  1. Select the date and Header group.
  2. Group it and apply the auto layout.
  3. Rename it to Text Wrapper.
  4. Select both text elements inside the Text Wrapper group and set their width Resizing property to Fill container.
  5. Add padding of 24 px (all sides) to the Text Wrapper.
  6. Add a Neutral/10 Fill color style.
  7. Set the bottom Corner radius to 4 px.
  8. Resize the Text Wrapper, so it's 280 px wide.

Step 2. Image

  1. Press R on your keyboard to open the rectangle tool.
  2. Click on the canvas to create a rectangle.
  3. Resize it, so it's 280 px wide and 200 px high.
  4. Set its top Corner radius to 4 px.
  5. Go here and copy the image.
  6. Select the rectangle and paste CTRL + V the image.

Step 3. Card

  1. Select the Image rectangle and Text Wrapper.
  2. Group them and apply the auto layout.
  3. Rename the group to Card / Default.
  4. In the Auto layout panel, set Spacing between items to 0 px.
  5. Select both elements inside the group and change their width Resizing property to Fill container.
  6. Select the Card and set its Stroke to 1 px Neutral/40 Outside.
  7. Add Shadow 1 effect.
  8. Set the corner radius (all sides) to 4 px.

Step 4. Card states

  1. Duplicate the Card / Default 48 px to the right.
  2. Rename the new copy to Card / Hover.
  3. Change the color of the Stroke to Primary/Main.
  4. Duplicate the Card / Hover 48 px to the right.
  5. Rename it to Card.
  6. Group it and apply the auto layout.
  7. Select the Card group inside and set its Resizing (width) property to Fill container.
  8. Rename the new group to Card / Focused.
  9. Set its Corner radius to 5 px.
  10. Add a stroke of 4px Primary/Focus Outside.

Step 5. Component and variants

  1. Select all cards.
  2. Create multiple components.
  3. Combine as variants.
  4. Rename Property 1 label to State.
  5. Rearrange States with your mouse to Default, Hover, Focused.
  6. Select the Card / Focused component.
  7. In the Stroke panel, add 3 px Outside Stroke with Primary/Focus color style.

Great work! You've just created a responsive card component! Let's move on to the next chapter.

PreviousNext