New

How I use automation to quickly transfer my designs from Figma to Webflow (Part 2)

In the second part you'll learn how to use automation to move the page layout built with SystemFlow from Figma to Webflow.

How I use automation to quickly transfer my designs from Figma to Webflow (Part 2)
Matt Wierzbicki
Co-founder at SystemFlow
How I use automation to quickly transfer my designs from Figma to Webflow (Part 2)

In the second part, you will learn how to transfer the entire page layout to Webflow based on what you have in Figma. If you didn’t read the first part, you can check it out here.

What we’ll build in the second part

I will show you how I use automation to move the page layout built with SystemFlow from Figma to Webflow. Here’s the video of how it works.

Remember that the automation explained in this article I built for my workflow in SystemFlow where all components have the same naming both in Figma and Webflow. However, you can still learn how I use Keyboard Maestro to create automation for your scenarios.

Since I’ve made a quite substantial introduction in the first part and explained what is Keyboard Maestro, and why I use it, let’s move straight into the action!

By the way, if you already use Keyboard Maestro and know the basics, you will find the macro file you can download and import to your Keyboard Maestro library at the end of this article.

Transferring layout from Figma to Webflow

Before you start working on automation, you need to break down everything you do into small steps. In my case, I had to think about all keyboard shortcuts I press and all actions I do to transfer the layout built with SystemFlow from Figma to Webflow. I listed the steps I do below, and it usually goes like this:

  1. Have Figma and Webflow opened in one browser.
  2. Check how many sections I want to move from Figma.
  3. Select the top Section in Figma.
  4. Select the Body element in Webflow.
  5. Copy component name in Figma.
  6. Paste component name in Webflow.
  7. Repeat for each section.

OK! Time to break down each step and show you how to automate it!

Step 1. Have Figma and Webflow open in one browser

It’s important to prepare the scene for your automation. That is, open all programs that you want your automation to run on. Obviously, you can do automation to open it all for you, but in my case, I have Figma and Webflow open anyway when I implement my design, so I decided to start from here. Figma is open in the first tab in my browser (⌘1) and Webflow in the second (⌘2).

Step 2. Check how many sections I want to move from Figma

The next step is to check how many sections are inside my page in Figma. It’s also important to check if all sections have the default names used in SystemFlow (they are fine as long as I didn’t rename the sections I grabbed from my assets panel).

Since it’s not a complicated task to quickly count the sections by myself, I decided to create a prompt from Keyboard Maestro that will ask me how many sections need to be moved. It’s important to specify this number because the automation would run in an infinite loop if we didn’t!

In this example, I have 7 sections inside my ‘Home’ page, so in the prompt, I will input ‘7’.

Create a new Macro

In Keyboard Maestro, we need to create a new Macro and call it Transfer Sections. Macro is a group of actions you want Keyboard Maestro to do for you in a specified order.

Add a prompt

In order to set up a prompt action, we need to add the Prompt for User Input from the actions panel. Then, enter the Title, Prompt, and add a variable ‘repeat’ like in the screenshot below.

Add a counter variable

Next, we need to set up the variable that will count each copy-paste action. It’s important because if we don’t do it the automation won’t stop when it meets the repeat variable value we set up in the Prompt. To add it, place the Set Variable to Text action below the Prompt action and set it like in the screenshot below.

Step 3. Select the top Section in Figma

Before we set up the next action in Keyboard Maestro, we need to select the first component we want to copy from Figma to Webflow. In our case, Navbar / Light / 1 is the first top component on our page. Remember that in Figma, the top component on the canvas inside the frame will be always displayed as last in the layers panel (see screenshot).

Step 4. Select the Body element in Webflow

In order to paste the components in the right order, I always select the Body element in Webflow. That way, it will always paste elements from Figma after the Custom Code component. Then, go back to Figma (because our automation will start in Figma).

Steps 5 and 6. Copy component name in Figma and paste in Webflow

OK! The scene is set up and we can proceed with the final action for our copy-paste action in Keyboard Maestro. Previously, we set up two variables ‘repeat’ and ‘counter’. ‘Repeat’ variable is specified when we enter the number of sections we want to transfer in the Prompt. ‘Counter’ is a variable that will count each copy-paste action that we will set up in this step.

While Conditions Met Execute Actions

In order to stop the automation after the ‘counter’ runs for the specified number of times (’repeat’), we need to add a While Conditions Met Execute Actions action to our Macro. Then, set the conditions as follows:

Copy-paste actions

Next, we need to set up the keyboard shortcuts sequence for the copy-paste action. Simply, we need to tell Keyboard Maestro what keyboard shortcuts to press and in which order. Remember, that we have our first top component selected in Figma. Let me break this for you:

  1. To copy the first component’s name we need to press ⌘R to rename it and then press ⌘C to copy its name.
  2. To switch the tab to Webflow in our browser, we need to press ⌘2.
  3. To open the quick search in Webflow in order to find our component, we need to press ⌘E.
  4. To paste the component name we need to press ⌘V and press Return to add it.
  5. At this point we have our first component in Webflow, now we just need to go back to Figma (⌘1) and select the next component Shift+Tab.

Now, we just need to create this sequence of keyboard shortcuts in Keyboard Maestro. There is a special action for pressing the keyboard shortcut called Type a Keystroke. All we need to do is to place all actions inside the ‘execute the following actions’ area inside While Conditions Met Execute Actions (see screenshot).

Step 7. Repeat for each action

At the end of our copy-paste sequence, we just need to add an action that will update our ‘counter’ variable by adding ‘1’ to it. This way, our automation will stop when our counter will be higher than the ‘repeat’ variable. There is a special action in Keyboard Maestro for it called Set Variable to Calculation. We just need to set ‘counter’ to ‘counter + 1’ (see screenshot).

Voila!

The macro is completed. Now, we can launch it with a keyboard shortcut or by a command!

Summary

I hope this article inspired you to use Keyboard Maestro for your workflow and all design tasks that you repeat each time. Remember that if you can perform it manually, Keyboard Maestro can almost certainly automate it for you. If you enjoyed the article, make sure to share it with your friends and colleagues!

Download the macro

Here you can download the macro for Keyboard Maestro I described in this article.

Ready to get in the flow?