In the second part you'll learn how to use automation to move the page layout built with SystemFlow from Figma to Webflow.
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.
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.
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:
OK! Time to break down each step and show you how to automate it!
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).
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’.
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.
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.
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.
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).
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).
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.
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:
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:
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).
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).
The macro is completed. Now, we can launch it with a keyboard shortcut or by a command!
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!
Here you can download the macro for Keyboard Maestro I described in this article.
