Mastering the Figma Webflow Workflow: A Complementary Guide

In the world of modern web design, the dynamic duo of Figma and Webflow has emerged as a powerful combination, empowering designers and developers to create stunning and interactive websites. The question arises: what's the best approach to master the Figma-Webflow workflow?

In this article, I explore two primary strategies that you can employ to streamline your design process. Whether you prefer to start in Figma and seamlessly transfer your designs to Webflow, or harness the graphic design capabilities of Figma while designing your site in Webflow, I'll delve into the nuances of each approach, highlighting their benefits and helping you choose the path that best suits your design goals.

Design in Figma

Webflow boasts on its home page that users can "build with the power of code — without writing any." While this is true, it certainly helps to have a strong grasp of HTML, CSS, and Javascript fundamentals. In Webflow, designers build pages on a visual canvas with drag-and-drop elements. These elements represent HTML, which you then style by assigning CSS classes and adjusting properties such as color and spacing.

Figma in contrast, offers a lower barrier to entry, giving designers “frames”, “groups”, and shapes to create designs. Although you can build high-fidelity designs with Figma's auto layout features, and advanced prototypes with interactions and user flows, overall it's a more accessible entry point into UI/UX than Webflow.

Another reason why you might start with Figma is if you want a clear delineation between design and development. This may manifest as distinct design and development roles. If this is the case, then designing in Figma makes a lot of sense. Plus, recent releases in Figma have made it even more friendly for developers to convert a design into code.

How to organize Figma files

One of the first things you need to understand about designing in Figma is the organizational structure, which consists of Teams, Projects, and Files.

In Figma, a Team refers to a collaborative workspace where multiple individuals can work together on design projects. In my Figma organization, for example, I have three teams: Clients, Templates, and Design System.

As you might have guessed, my client projects go in Clients, my ready-to-use templates go in Templates, and components and assets that I use across projects, go in Design System.

Within each Figma project, you create design files, which is where you turn ideas into responsive and interactive designs. There are many different approaches to creating design files in Figma, but I prefer to create files that map onto the website structure. For example, I start with a file called Landing Pages, and in that file I create the home page and... other landing pages.

As the project's designs grow, I create new design files for Collections, which includes Services, Products, Articles, and more, and Misc brand assets, such as the business card, logo, and more. If you're considering a similar approach, you may also want to create a Prototype file, where you build your interactive prototypes and user flows.

Figma to Webflow

One of the most powerful aspects of the Figma-Webflow workflow is the ability to transfer designs seamlessly between the two platforms. This is made possible by the Figma to Webflow plugin, which empowers developers to easily import Figma designs into Webflow.

To take advantage of this amazing workflow boost, you must authorize access to the Webflow sites or workspaces you'll be using. Additionally, you must design with auto layout in Figma, which enables the plugin to translate your designs to Webflow as responsive flexbox structures. You can even adjust HTML tags within Figma to speed up the process.

The Figma to Webflow plugin is a game-changer for teams who want to streamline their workflow and reduce the time and effort required to transfer designs from one platform to another.

Design in Webflow

Figma is a great place to start product design, but it requires more work and cost to maintain two product environments. This is a big benefit of Webflow, you can design, prototype, and publish in one tool. Putting my cards on the table, this is how I prefer to design. I believe great design benefits from constraint as much as freedom. I love designing in the environment in which the website will be published.

Plus, Webflow is the host of so many of my productivity boosts. Webflow is where I have templates that allow me to duplicate common patterns into new projects. Webflow is where I have my components and CSS class system.

Instead of using the Figma organization structure I previously described as the host of my page designs, I use these files for creating assets—such as hero images, lottie illustrations, and more. I use Figma’s new font preview feature to iterate quickly through Typography choices. I also use Figma to test out color combinations.

When using Webflow as the primary design environment, Figma becomes a powerful ally and complement, giving me graphic design and animation superpowers.

Which is best?

The approach you choose depends on your goals and preferences. If you want a clear delineation between design and development or if you prefer a lower barrier to entry, Figma may be the better choice for you.

However, if you want to design and develop in one tool and take advantage of Webflow's productivity boosts, designing in Webflow may be the way to go. Ultimately, both approaches have their benefits, and it's up to you to decide which one is best for your workflow.

If you need advice or help setting up your Figma-Webflow workflow, please feel free to contact me!