Back to blog overview

August 10, 2023

Design Magic: Pasting Your Way from Figma to Web and Back Again

Lisa Panke

&

&

UX/UI Designer & Webflow Developer
Buffalo, NY

The age-old saying, “Time flies when you're having fun,” just got a techy twist: “Design flies when you're pasting fun!” What if I told you the future of web design involves a lot of... copying and pasting? At ZEAL, we embrace solutions that help us easily switch between design and development tools. Today, I'll reveal how I turned the [RedwoodJS Conference](https://www.redwoodjsconf.com/) website into a magical demonstration of Figma, Framer, and Webflow’s integrative capabilities.

## 1. Framer: Because Waiting is So 2020

[Framer](https://www.framer.com/), renowned for bringing static designs to life, has another trick up its sleeve with the "[Figma to HTML with Framer](https://www.figma.com/community/plugin/1037108608720448600/Figma-to-HTML-with-Framer)" plugin.

How it Works:

1. Whip up fancy design in Figma.
2. Use the "Figma to HTML with Framer" plugin. Watch as all layers from your design get effortlessly copied within Figma.
3. Head over to your Framer Dashboard and opt to add a new site.
4. On a whim, I decided to press cmd+v, without any preconceived expectations.
5. Like pulling a rabbit out of a hat, my Figma design magically appeared in Framer and was perfectly splendid.

**RedwoodJS Conference Example:**
The RedwoodJS Conference homepage served as the perfect candidate. The seamless transfer process from Figma to Framer was impressive, leaving no room for discrepancies.

Figma Plugin Menu
Figma to HTML with Framer Plugin

## 2. Webflow: Sometimes Playing Hard to Get

[Webflow](https://webflow.com/), the reigning champ of no-code web development, met its match with the "[Figma to Webflow](https://www.figma.com/community/plugin/1164923964214525039/Figma-to-Webflow-(HTML%2C-CSS-and-Website))" plugin. But this relationship has its quirks.

How it Works:

1. Channel your inner designer in Figma.
2. Open the plugin.
3. Connect to your Webflow space and copy your design.
4. Go into your Webflow project and paste it in. But remember, Webflow has standards - it loves auto-layout.

**RedwoodJS Conference Example:**
While trying to migrate the RedwoodJS homepage, Webflow was picky. Only sections and elements fully committed to Figma's auto-layout were welcomed with open arms. But here’s the silver lining: once they're in, they look and feel stunning. If Webflow's quirks seem exhaustive to you, Framer might be the better choice.

Figma Plugin Menu
Figma to Webflow Plugin

## 3. Figma's Magic Mirror: "HTML to Figma" Plugin

Do you want to transfer a website from your browser into Figma to iterate or try something new? Then the "[HTML to Figma](https://www.figma.com/community/plugin/1159123024924461424/html.to.design)" plugin is your friend. Simply paste the website’s URL into the plugin and be wowed by an almost pixel-perfect reflection on your canvas.

**RedwoodJS Conference Example:**
We continuously iterate on the RedwoodJS website and add speakers, talks, and new sections. With this plugin, I can bring a page into Figma in a heartbeat, saving me from the monotonous task of manual recreation.

html.to.design Figma Plugin

# Conclusion: The Future is Pasting (and a Bit of Chatting)

Let’s toast to a future where plugins, no-code tools, and AI-powered wonders are standard in a designer's toolkit. Gone are the days when creativity was stalled by technical limitations. Today, we designers can move from idea to implementation in the blink of an eye.

And before I hang up my cape, I’ll spill another secret: I’ve started sketching landing page outlines with a little chitchat with ChatGPT. Describe your project, the goal, and the user just a bit, and ask ChatGPT to give an outline for your next landing page. It might not always be perfect, but I love using it as a starting point.

With all the mentions of the *RedwoodJS Conference*, you might be curious about what's brewing there. Trust me, it's more than just a footnote in this article. Taking place from September 26-29 in Grants Pass, Oregon, it's set to be a stellar event. The lineup features incredible speakers, including Diana Mounter from Github and my personal hero, Amy Dutton, now part of RedwoodJS’s Core Team. See you at the [RedwoodJS Conference](https://www.redwoodjsconf.com/)?

Let's Chat

Are you ready to build something brilliant? We're ready to help.

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
RedwoodJS Logo
RedwoodJS
Conference

conference
for builders

Grants Pass, Oregon • September 26 - 29, 2023
View All