With websites, what comes first: The copy or design?

How to use Figma to solve the chicken-egg quandary

Poll any marketer and they’ll tell you website projects rank up there with root canals and visiting the DMV. The end result is (mostly) great, but the process to get there is excruciating.

In my career, I’ve overseen countless website projects — from microsites, to landing pages, to net new website launches and major redesigns. No matter the size of the project, I always struggle with the exchange between design and copy. The two are inextricably linked in the ultimate chicken egg quandary. And because there’s so many siloed tools involved, the experience can feel like a black box (even for the project manager).

There’s a better way! Much like Google Slides eased the pain of creating presentations collaboratively, cloud-based design tools solve the “who’s on first” problem of copy and design. When multiple people from design and marketing can work in a design at the same time, it transforms the experience of creating a web asset.

Trapped in a corporate version of Groundhog Day

I discovered this 9 months ago, when I joined browser-based design tool Figma as head of product marketing. When we decided to add some new pages to our website, I geared myself up for a world of hurt.

In previous roles, I’d spend weeks, sometimes months playing ping pong with the design team to build net-new website pages. I’d write copy in Google Docs, they’d design in Sketch, and we’d realize the copy didn’t fit. We’d try again for a second round, but then a design critique or a copy review would change everything. Once other stakeholders got involved — as they inevitably do — it would turn into a cluster.

At one company, most of our designers were remote. Our back and forth would get so crazy I’d wind up printing out the website designs, manually writing my edits on them with a pen, and scanning these marked up documents — yes scanning! — to share back with the team. It was like being trapped in a corporate version of Groundhog Day.

Figma was a different story and a much more pleasant one.

Here’s how the website project went using Figma:

1. I scoped out the main copy points I want to make for each page in one Google doc
2. The design team created a project in Figma with frames for each website page
3. We worked together — often simultaneously — to go from high fidelity wireframe to final design

No endless cycles between design and copy. No waiting days or weeks to get designs back before I could iterate on the text. No need to export or email designs to stakeholders. No scrambling to update last minute tweaks right before a milestone review.

You can imagine the time this saves and the frustration it averts.

With Figma, I can instantly see if the copy is too long or short in the context of the design and keep updating it without bothering the design team. The designers can focus on the actual design instead of managing the communication caused by a siloed tool chain. And the stakeholders can always see the latest design/copy, leave comments and access version history via the project’s URL. Better yet, we also use this URL to run user tests, so everyone involved can see the customer feedback. Having everyone and everything in one place is truly game changing.

While using Figma doesn’t replace every web project meeting, we have way less of them, and we run them far more efficiently. The result? I no longer cringe when I hear the phrase “let’s update the website” and instead get excited to use Figma the way some of our users do. With our free tier you can check out Figma yourself to see if it could work for you.

Do you have a great web use case for Figma? We’d love to hear it. Send us a note at content@figma.com.