In this article, I will describe some of my ways to automate tasks that you are probably doing manually while transferring your design from Figma to Webflow. In the first part, I will show you how I use automation to move my color palette 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.
I will show you how I use automation to move the color palette from Figma to Webflow. Here's the video of how it works.
As a freelance designer, creator, founder, and no-coder, I work on dozens of web design projects each month. Not only do I create websites for my clients, but I'm also responsible for my side projects, and each one needs a different branding and a website. I do layout and style exploration in Figma and then develop everything in Webflow. As you can imagine, it's a lot of work.
When I worked on more and more projects, I started noticing patterns - things I repeated with each project I started. I set up the color palette, designed the same generic sections for the website, created a typography scale, looked for icons, etc... That's when I realized I needed to wrap everything in some process to save my time.
I started to work on a framework for Figma and Webflow - a starting point for each project where I can focus on the content, UX, and customer value - not on tedious, repetitive design tasks.
In early 2020, I teamed up with Greg Rog, who also needed an ultimate design framework for his projects, and we started to work on SystemFlow. After hundreds of iterations and testing, we began to use our framework in client projects. We've noticed that it was helping us to work faster. We did the projects for our clients quickly, and SystemFlow made our designers' and entrepreneurs' lives easier. We agreed that we couldn't keep it to ourselves, and we decided to share it with the world.
After months of hard work, we launched it for a small number of our friends and beta testers. I was responsible for the system creation and documentation, while Greg took care of marketing, education, customer support, and orders automation. We received tons of positive feedback and decided to launch!
On the launch day, the framework contained hundreds of CSS classes, pre-built components, layouts, and more.
Today, hundreds of designers and teams are using SystemFlow. What is more, it was the 2nd product of the day on Product Hunt, which made us happy.
Thanks to SystemFlow, we don't need to start from scratch, and it saves us days of repetitive work already. We can't imagine starting with a blank canvas now, and SystemFlow is a massive boost to our productivity.
Until today, I created dozens of projects with SystemFlow, and guess what?! I started to notice new patterns where I was repeating myself!
I realized that I was wasting my valuable time on transferring colors one by one or copying and pasting section names for each project. I knew that anyone could've done this, and I should probably focus on different things that required my creativity or expertise.
I was ready to pay my sister to do it for me so I could spend extra 30 minutes on more essential tasks.
Sorry Joanne, not this time. I found a robot that will do it for me. For free and faster!
Recently, thanks to Greg, I got fascinated by no-code and automation. I'm amazed at what you can do without writing a single line of code these days. Tools like Webflow, Integromat, Zapier, and Airtable give anyone the power to run a business on a different, higher level.
While digging deep into the rabbit hole of automation, I found out about Keyboard Maestro. I can't thank enough one of the polish top creators on automation - Adam 'overment' Gospodarczyk. His expertise, tutorials, and feedback helped me create the solutions I'm describing in this article.
So, what is Keyboard Maestro, you may ask? It's an automation software for macOS where you can automate virtually anything. Applications or websites, text or images, simple or complex, on command or scheduled. If you can perform it manually, Keyboard Maestro can almost certainly automate it for you. Whether it is typing your email address, going to Gmail or Twitter, launching Pages, or duplicating a line, Keyboard Maestro can help. I use it for many different situations, but I will focus only on Figma to Webflow scenario in this article.
The tedious tasks of transferring the color palette from Figma to Webflow or setting up the layout in Webflow based on the structure in Figma are all sets of manual actions. This is where Keyboard Maestro comes in really handy. It does all the clicking, keyboard shortcuts, or typing for us.
If you are new to Keyboard Maestro, I described everything I do step by step below so you can follow along and do your automation. Remember that the automation explained in this article I built for my workflow in SystemFlow. However, you can still learn how I use Keyboard Maestro to create automation for your scenarios.
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.
Let's get started!
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 colors 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.
I open Figma and a documentation page with colors in the SystemFlow project. Then, I select the first color in the color group I want to transfer from Figma. For example, when I want to transfer all my primary colors, I select Primary / 10 (there are ten Primary colors, from Primary / 10 to Primary / 100).
Next, I open the Inspect tab in Figma, where my automation can easily click and copy the hex value of the selected color. Yes, click! Keyboard Maestro can click on the portion of the screen you will pass to it! But I will explain it in detail later on.
In Webflow, I need to open my colors documentation page in SystemFlow and select the Primary / 10 color swatch in the colors grid. Then, I scroll down my design panel so the Background color settings are visible so Keyboard Maestro can recognize it and click on it.
OK! The scene is all set up. Now, it's time to set up the actions in Keyboard Maestro.
So, we have our color style selected in Figma, and the Inspect panel is visible. The first thing our automation needs to do is to copy the hex value of the chosen color.
In Keyboard Maestro, I've created a new Macro and called it Transfer Colors. Macro is a group of actions you want Keyboard Maestro to do for you in a specified order.
First, I created the new Group in Keyboard Maestro and named it Copy Color 1 to keep all actions related to copying the hex code of the selected color in Figma.
Then, I've added the first action to my Group and called Move and Click 0,0 from the Center of the Found Image. It's a simple action where you can select a portion of your screen by screenshotting it, and automation will click in the specified position. So, I screenshotted the part of the Inspect panel where you copy the hex value of the color in Figma. Then, I set it to click 22 pixels to the left on the X-axis from the center of the selected portion of the screen so our automation can copy the value.
Next, I added the action Move Mouse to (0,0) from the Center of the Main Screen and set it so that the mouse cursor is moved to the center of the screen. It's essential to do so because Keyboard Maestro won't recognize the color panel while copying the value from the next color. It's because the cursor will still be hovering over it, and the color panel will have a "Copy" word displayed. We don't want that.
OK, at this point, the automation will copy the value from Primary / 10 color in Figma, and I'll have "background: #EBFAEB;" in my System Clipboard.
Now, it's time to get only the hex value (EBFAEB) and store it in a variable in Keyboard Maestro, so the automation can use it when adding the colors to Webflow. There's a special action for that. I use Search System Clipboard Using Regular Expression and pass the "\b[0-9A-F]+\b" expression. You can learn more about regular expressions here. Doing so tells Keyboard Maestro to only take the hex value (EBFAEB) from the phrase "background: #EBFAEB;". Then, I can store the hex code in a variable by providing the variable's name in the same action. In my case, I named the variable "color1".
At this point, I have my color stored in the variable, and I can tell the automation to move to the next color in Figma. In Keyboard Maestro, I set the new action to Type the Keystroke and set it to Shift+Tab.
To wrap the Copy Color 1 group up, I add the Delete Past Clipboard action at the end of this Group to clear the System Clipboard. I also added some 0.2-sec pauses along the entire Group to make sure no action gets skipped accidentally.
Having the Group ready, I duplicate it, so there are ten groups in total (because there are 10 Primary colors I want to transfer from Figma to Webflow). Then I rename groups, so there are Copy Color 1 to Copy Color 10 groups. In each Group, in Search System Clipboard Using Regular Expression, I change the variable name to color2, color3, etc... so there are ten variables in total. Copy Color 1 has the "color1" variable; Copy Color 2 has the "color2" variable, and so on. Doing so will make Keyboard Maestro store each color in its own variable.
Now, the automation will store all ten colors in variables. It's time to make it switch the browser tab and edit the swatches in Webflow.
We can easily do it with a keyboard shortcut CMD+2. I use Type the Keystroke action and place it between small pauses.
I created the new Group after the second pause and named it Paste Color 1.
I've added a new action to the newly created Group. The action clicks on the color swatch in the background color panel in Webflow. It's also done with Move and Click 0,0 from the Center of the Found Image. I had to add a screenshot of the Background color panel and specify the location of the click (-50,10).
To edit the swatch, the automation needs to click on the edit icon. I also did it with Move and Click 0,0 from the Center of the Found Image and screenshotted the integral portion of the colors panel.
Having the Edit swatch panel open, my automation needs to select the hex input to paste our color value from Figma. It's tricky because the hex code in Webflow will always be different for each color, so I couldn't do it with Move and Click 0,0 from the center of the Found Image action this time. However, I figured out that I could select it with the keyboard by pressing Shift+Tab six times! I've set up the Type the Keystroke action to press it six times, and voila, the hex input is selected!
Now, the automation needs to paste the hex code from the first variable it copied from Figma. I used the Insert text by pasting action and set it to paste the text stored in the "color1" variable (%Variable%color1%). Then, I set the automation to press the Return key with the Type the Keystroke action to confirm the pasted hex code.
To save the changes in the color swatch, I set new action Move and Click 0,0 from the Center of the Found Image so the automation will click the Save button in the Edit swatch panel. Then, we need to close the color panel with Type the Keystroke (Escape) and move to the next color swatch in the Navigator panel with Type the Keystroke (Right Arrow).
Now I just had to create ten paste actions. I duplicated the Paste Color 1 and renamed them accordingly, so I had ten actions: Paste Color 1 to Paste Color 10. Inside each Group, I also changed the pasted variable: Paste Color 2 to %Variable%color2% and so on.
The last part is to clear all variables after the automation finishes. It will prevent Keyboard Maestro from storing variables so our next automation can have a fresh start. I created a new Group and named it Clear variables.
Inside the Group, I used Set Variable to Text action and set it up so the color1 variable will be set to %Delete%. Then I duplicated it ten times and set color2, color3, and so on.
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 colleauges!
Here you can download the macro for Keyboard Maestro I described in this article.
In the next part, you can learn how I move the whole homepage layout built with SystemFlow from Figma to Webflow.
