Skip to main content
Back to path

Welcome to a Grasp lesson

Create a free account to keep studying and create your own study path.

Lesson 52

Crafting a Two-Sided Invitation

Recommended resources

Hello! Welcome back to your graphic design course.

In our last lesson, you did a great job designing a digital flyer, focusing on how to create a strong visual hierarchy and a clear call-to-action on a single page. You learned to guide a viewer's eye and inspire them to act. Today, we'll build directly on that foundation. Your learning goal is to design a two-sided event invitation.

This task introduces a new layer of complexity: creating a cohesive experience across two separate surfaces—the front and the back. We'll cover how to structure the information, maintain a consistent design, and set up your document correctly. To help with this, we'll also unlock one of Figma's most powerful features for creating organized, adaptable layouts: Auto Layout.

1. Anatomy of a Two-Sided Invitation

Just like a flyer, an invitation needs to communicate key information. However, having two sides allows us to be more strategic about when we present that information. We can create a "reveal," where the front grabs attention and sets the tone, and the back provides the necessary details.

  • The Front: This is the "hook." Its job is to be visually appealing and communicate the event's core purpose at a glance. It typically includes the most important information, like the names of the people involved and the event title.
  • The Back: This is for "the details." It's where you'll put the specifics: the date, time, venue, address, RSVP information, and any other notes (like a dress code). This side prioritizes clarity and readability.
Two-Sided Floral Event Invitation Design in Figma
This example shows a classic two-sided invitation. The front (left) is visually focused, featuring the couple's names to create an emotional connection. The back (right) is neatly organized with all the logistical details a guest would need.

Before we start designing, we need to choose a size. While we are designing digitally, invitations are often printed, so using a standard print size is good practice.

A Complete Guide to Flyer Sizes and Print Dimensions

The resource 'A Complete Guide to Flyer Sizes and Print Dimensions' from Figma is very helpful here. While it's about flyers, the sizes are relevant for invitations too.

Take a look at the table under the heading 'Most common flyer sizes for print marketing'. Notice the dimensions for A5 (1748 x 2480 pixels) and Postcard (1200 x 1800 pixels). These are both excellent and common sizes for invitations.

For our exercise, we will use the A5 size.

2. Setting Up a Print-Ready Document in Figma

Designing for print requires a few extra considerations that digital-only design does not. Even if your invitation is only shared online, understanding these concepts is vital for any project that might be printed.

The three key terms are:

  • Trim Line: The final, intended edge of the paper after it's cut. An A5 invitation's trim lines are its final dimensions.
  • Bleed Area: This is an extra margin of your design (usually 3mm or 0.125 inches) that extends beyond the trim line. Because physical trimmers are not perfectly precise, the bleed ensures that if the cut is slightly off, you won't have an ugly white sliver at the edge of your design. The background color or image should extend into the bleed area.
  • Safe Zone (or Margins): An area inside the trim line. All your important text and content should be kept within this zone to ensure nothing gets cut off.

A Complete Guide to Flyer Sizes and Print Dimensions

Let's revisit the Figma guide on flyer sizes to understand these concepts better and learn how to set up a two-sided document.

First, read the section 'Design and print considerations for different flyer sizes'. It gives a clear explanation of bleed and the safe area. Next, read the FAQ entry for 'How do I print a double-sided flyer?'. This short paragraph explains the exact process in Figma: create two separate frames (pages) and export them as a multi-page PDF.

So, the workflow in Figma is simple: you will create two A5 frames. One will be your "Front," and the other will be your "Back."

3. A More Efficient Way to Design: Auto Layout

When you design the back of your invitation, you'll have several lines of text that need to be perfectly aligned and evenly spaced. You could do this manually, but there's a much better way.

Auto Layout is a Figma feature that lets you create frames that automatically grow or shrink as you add, remove, or resize the content inside them. It handles the spacing and alignment for you, saving a huge amount of time. Given your background in a technical field, you can think of it as applying a set of rules (padding, spacing, direction) to a container of items.

Guide to auto layout

Figma's official 'Guide to auto layout' is the best place to learn this feature. We'll focus on the core concepts you need for our invitation.

Please read the following sections to get a solid introduction: Start from the top to understand what Auto Layout is used for. Read 'Add auto layout' to learn the key shortcut: Shift + A. In 'Choose an auto layout flow', focus on the difference between Vertical and Horizontal layouts. Under 'Adjust spacing properties', pay close attention to the definitions of Padding (space inside the frame) and Gap between (space between items). Don't worry about mastering everything at once; we will apply these basics in our exercise.

In short, the key Auto Layout properties you'll use are:

  • Direction: Stacking items vertically or horizontally.
  • Spacing between items: The gap between each element in the frame.
  • Padding: The space around the content, inside the frame's border.
Test your understanding!

Imagine you have three text layers: "The Ceremony," "The Reception," and "RSVP Details." You want to arrange them vertically, with 16px of space between each line and 32px of padding all around the group. Which Auto Layout properties would you set?

Show answer
  1. Select all three text layers and press Shift + A.
  2. In the Auto Layout panel in the right sidebar:
    • Set the Direction to Vertical (down arrow).
    • Set the Spacing between items to 16.
    • Set the Padding around items to 32.

4. Your Turn: Design a Two-Sided Wedding Invitation

It's time to put theory into practice. Your task is to design a two-sided wedding invitation using the concepts we've just covered.

The Brief:

  • Client: Myra & Kartik (from our example image)
  • Event: Wedding Invitation
  • Size: A5 (1748 x 2480 pixels)
  • Style: Clean, elegant, and modern.

Content for the Invitation:

  • Front Side:
    • Myra & Kartik
    • ARE GETTING MARRIED
    • 12 DECEMBER 2024
  • Back Side:
    • THE CEREMONY
    • 4:00 PM
    • City Botanical Gardens
    • THE RECEPTION
    • 7:00 PM
    • The Grand Ballroom
    • RSVP by November 20th via ourwedding@example.com

Step-by-Step Instructions:

  1. Set Up Your File:

    • Open Figma and create a new design file.
    • Create a Frame (F). In the right sidebar, set its dimensions to W: 1748 and H: 2480. Name this frame "Front".
    • Duplicate this frame (Ctrl/Cmd + D) and place it next to the first one. Name the copy "Back".

  2. Design the Front:

    • Add the text for the front side.
    • Focus on visual hierarchy. "Myra & Kartik" should be the most prominent element. Use a combination of font size, weight, and perhaps a more decorative script typeface for their names.
    • Arrange the three text elements to create a balanced and pleasing composition. Remember the principles of alignment and whitespace from previous lessons.

  3. Design the Back with Auto Layout:

    • On the "Back" frame, type out all the content for the back side. Don't worry about placement yet.
    • Group related info:
      • Group "THE CEREMONY", "4:00 PM", and "City Botanical Gardens" into their own vertical Auto Layout frame (Shift + A). Set the spacing between them to something small, like 8px.
      • Do the same for "THE RECEPTION" group.
    • Combine the groups:
      • Now, select all your elements on the back frame: the ceremony group, the reception group, and the RSVP text.
      • Press Shift + A again to put them all into one main vertical Auto Layout frame.
    • Adjust Spacing: Now you can easily control the layout. Adjust the Spacing between items for the main frame to create clear separation between the sections (e.g., 40px). Adjust the Padding to give your content a nice margin from the edge (e.g., 120px).

  4. Ensure Consistency: Use the same fonts and color palette across both the front and back to make the design feel like a cohesive set.

Take your time with this project. Experiment with different typefaces and spacing until you have a design you're proud of.

Conclusion

Excellent work today! You have successfully leveled up from a single-page design to a two-sided project. This required you to think about how to create a consistent visual system and how to strategically organize information across multiple surfaces. Most importantly, you've been introduced to Auto Layout, a fundamental tool for professional-level work in Figma that will make building complex, organized layouts much faster.

Key Takeaways:

  • A two-sided design separates the "hook" (front) from the "details" (back).
  • For print projects, you must consider bleed and the safe zone to avoid printing errors.
  • A double-sided document in Figma is simply two separate frames that can be exported as a multi-page PDF.
  • Auto Layout is a powerful tool for managing alignment and spacing automatically, perfect for text-heavy, structured content.

In our next lesson, you will design a branded title slide and content slide for a presentation template. The skills you've just practiced—especially Auto Layout and maintaining consistency—will be directly applicable as you create flexible and reusable presentation slides. Keep up the fantastic momentum