Which comes first: Content or Design?

Improving the Design + Content workflow with content components in Figma. With Step-by-step tutorial.

Published in

Vanguard UX

8 min readJan 23, 2023

Note to designers: To get the most out of this workflow, I recommend using Auto layout as you build your components and file. A guide to using Auto layout

Ask any content owner or designer whose work comes first, and you’ll get a resounding, “mine.” Content impacts design, and design impacts content. Truthfully, they should create in sync.

Although content owners are more than likely visual people, it doesn’t mean they want to design. In the same respect, designers probably don’t want to write content for their designs.

Case in point — I’m a designer and I’ve been trying to write this blog post for something like eight months now. A big struggle, because writing is not my expertise.

Shout out to both Lydia and Francesca for working through the bumps and figuring this workflow out with me. They are both incredible teammates, and amazing content owners. The cheesy 🧀 quote is true - Team work makes the dream work. Plus shoutouts to all my peers who reviewed this and provided much-needed feedback.

Eight MONTHS?! Let’s go back to 2022.

Early in 2022, my teammate Francesca gave me a challenge: Find a seamless and effortless way to make Figma work for content owners as easily as it does for designers. I scoffed, thinking that wasn’t possible.

After all, I had watched and read dozens of Figma tutorials. I was sure we were stuck in the “copy-and-paste, adjust-the-padding-and-elements, add/delete content, change design, send-back-and forth-forever” hamster wheel process.

LET ME OFF THE HAMSTER WHEEL ALREADY!

I gave up on the tutorial rabbit hole and went heads down trying to work out a solution. Some time later, I discovered that it is possible to create content components that update seamlessly. That’s why you’re reading this, right? If you don’t believe it, this should convince you: I’ve saved 50% or more in time and effort when updating the master files if I need to pivot or update the design due to design changes or content changes.

Whether you’re a designer who doesn’t want to adjust yet another frame to fit content, or you’re a writer who loves to visualize your work in real time, this is a game changer. It all starts with a well-organized file that uses both design and content components.

Let’s begin

You should ALWAYS have a well-organized and labeled file. It may add a little extra time to your setup process, but it will benefit you and it will benefit anyone who may be viewing your file (think other designers, project managers, developers, etc.). Transparency is always best. Your future self will thank you.

This is an image that shows the left rail of Figma. It contains blank pages that act as section titles, with pages sorted under each section. The sections are “General”, “Ideation”,”Production”, and “Master Components” — This is an example of how I structure my file for myself and my team. Feel free to organize your file however best fits you and your team.

Keeping your file appropriately labeled and your components on different pages, makes it easier to stay organized. And thanks to the new sections feature, it’s even easier to keep your pages sorted as well.

After creating a good file structure, you can begin ideating in low fidelity. Then, after some testing and research, you should have a good idea of the direction your design is heading. This is where it is important to start building a solid foundation of file components.

Step 1: Setting up your design components

Even if your company has a design system in place, you’ll need to identify the main components and groupings of components that occur in your designs. You can always add more components as the design progresses.

You’ll want to create a page that contains only these components. You can organize this page with sections as well (see above). I also highly recommend building your components in mobile first. and then scale them up to larger screens. A guide to creating and managing pages.

This is an image of a section within Figma. It has all components organized and properly labeled.

Identify any components and groupings of components. For example, your headline and body text might be predefined as individual components. And your grid system might be set up on multiples of a number (in this case, multiples of 8). You can go ahead and set up that combination of two components, into one component, with those spacing rules via auto layout, here in the design component section. A guide to components in Figma.

This is a close up image of one of the components in the section shown in the previous image. It is labeled “001 3xL H1 & Body”. The componenet itself has a placeholder titled and a placeholder body description, seperated by 32px of padding, which has been highlighted in pink.

I think of the design component page as the foundation that the content components and main designs need to be built on. Any changes start here and anything built on top of the design components will take on those and future changes.

For example, The spacing needs to be updated from 32 to 16, but the component has been placed in nine different places. Usually this would be a headache. However, If you have built off of the design component page, the padding change will be applied everywhere the design component has been embedded.

Additionally, If your design system components are still linked to the main component, any updates made will still apply. And they will also be pushed throughout your file as well. In this case, the design system would be the foundation.

Going forward, I’ll be focusing on the “001 3xL H1 & Body” component shown above. But for short, lets just call this “001”

This image contains an overview of the main file. It has three different sections. Each section is a different page with default components. each page in the section is represented in three different breakpoints: Desktop, Tablet & Mobile.

So what about the content, and what about content components? In the example above, we have started to work on three different pages, with three different breakpoints. The component “001” appears in all nine of those screens. But we know the content will be different on each page.

Step 2: Creating a Content Section

You will need to create a content section or page.
Once created, you will now insert the “001” design component into the your content component section.

This is a screenshot that shows the creation of a “Content component” section. In the section, the original component “001 3xL H1 & Body” has been placed in the section, and made into a nested component.

Step 3: Components on components!

In your new content component section, with the occurrence “001” selected, You will make “001” its own component. In reality, you are embedding a component inside another component.
Pick a name that is easily identifiable as a content component. In this example below, I will name it “CC_001 H1 & Body” — CC being “Content Component” — Let’s just call this “CC_001”

A GIF showing the title of the content component being changed from “001 3xL H1 & Body” to “CC_001 H1 & Body”

Step 4: Creating variants

In your design, you will want identify all components that might occur. I know that for now, “CC_001 ” will exist on the Home, About, and Services pages, and it’s no big deal if we need to add more occurrences later.
Create as many variants as you see unique occurrences. So, let’s go ahead and create three variants (Home, About, and Services)

A GIF showing the user adding three new variants to the “CC_001 H1 & Body” content component. they are being labeled “Home”, “About”, and “Services”, with the variant title being labeled as a page.

Step 5: Add content

You can now populate each variant with its corresponding content.

If you are feeling confident with Figma, you can simply ‘Command+click’ to directly select elements.

If you’re not as familiar with Figma, and feeling a little bit nervous about being inside a design file, follow the points below:

Use the left rail to locate the content component. Drill in to elements to expand them further. You can open and close the triangles on the left side of the elements by clicking on the triangles.
Verify you have found the right element by looking in the middle area of the screen, and seeing the bolded outline that will surround the text. (In my example, the outline is bolded purple. )
Select that element by clicking on the name to the right of the caret. You should see that element highlighted.
After you have that element selected, navigate over to the right rail.
Locate the text input field labeled “content.”
Paste or type the content into the “content” section on the right rail.
Click outside of the input field to apply changes.
If you’re still nervous about working inside a file, you can try working inside branches. A guide to branching.

This is a GIF of the user adding the real content to the variant we just created. — If you’re not as familiar with Figma, have no fear! Here is a quick demo of how to use the left rail to locate the content component and then paste the content into the “content” section on the right rail. These steps are listed above.

Step 6: Swap instances

Navigate back to your original designs, on whatever page they might exist.
Locate the design component you want to replace.
With the component selected, use the the “swap instance” feature in the right rail, and replace with the correct component. A guide to using swap instance.
If you have not built out your frames yet, you can simply build your frames using the content components.
When you have a component selected, press “Command + P”, and then type “select all with same variant” and swap instances that way. 🫡 Thank you for that tip, Tina. What a time saver!

This is a GIF showing the user navigating to the Work in Progress page, and swapping out the Design Component with the Content component using the Component swap feature in the right rail.This is a GIF of the user adding the real content to the variant we just created.

So you may be thinking, “Okay but what is the big deal?”

When designers use auto layout, and maintain a tidy file, content owners can make updates without impacting design (and vice versa).

It’s a holistic approach that improves the design + content workflow by reducing time spent updating designs to fit the content. It also reduces the need to make changes to the content after seeing it in the design. With this process, the content owner can see their work in the design as they add it.

Content owners can also see groupings of text architecture to verify the content flows, and fits together on all pages. A huge perk! Plus content owners and design owners, can be working inside the same file at the same time. 🤯 Try the comment feature too, super rad!

You also won’t have to go back to every occurrence to update the text or update the padding if you set everything up in auto layout. The combination of content components + auto layout is incredibly powerful.

But the design changed! Now what? Let’s say I need to add color into my design, and we want to change the titles to stand out more.

No problem. Because we embedded everything from the design component page, we should be good. In this example, I’ll update the header title to be a different color, so you can see it change everywhere.

So, which comes first: Content or Design? Neither. Let us work together in a more connected way.

This is only a small glimpse of what you can achieve while using auto layout, as well as components. It is my hope that designers and content owners can streamline their creation process with this more connected approach. And continue creating designs and content that inform and influence each other.

Thanks for reading!

Kristi C.
Senior UX Designer | Vanguard

One of my favorite parts of working for Vanguard is having the time to learn and improve, and having a voice to pitch big ideas. Are you a big thinker? Check out our open roles.