No-code tools are growing like mushrooms after the rain. There are many no-code tools you can use right now. I’ve used WordPress, Webflow, and recently tried Framer. Coming from a SaaS web builder background, I can say Framer has the least learning curve of all these tools.
Framer works almost the same as Figma, aside from its publish button. It offers an on-screen web design experience where what you see on the screen is what you get when you publish it. I’ve significantly cut down my design time using Framer — I’d say it’s about 50–70% faster.
The main difference I noticed is that designing and building in Framer is more simplified than in Figma. As someone with experience in UI/UX, especially working with design systems, I can say we don’t need as much complexity when working with Framer.
The most important thing to consider when designing a Framer template compared to Figma is…
Consider making it easy for your customers to change the styling instead of focusing too much on complexity or technical details.
As a seasoned UI/UX designer, working with a semantic color system can get out of hand and add complexity to our designs. I’ve wasted a lot of time dealing with:
- Generating Semantic Color for my Brand
- Changing the Semantic color variable from color/50 — color/900
The best template is the easiest to manipulate & maintain
So instead of using Semantic like I’ve done in Figma, I use primary color with a percentage color oppacity.
For example instead of color/50, it would be 3.92% of the primary color which result the same color as color/50. Refer the image below
Too hard? not necessarily. Platform like Radix has helped me to generate not just the typical Semantic Color but also the option to use opacity % which result the same color as Semantic
And yes Mr Bruce, it does comes in black — Fox
Get 50–70% faster with Figma to Framer plugin
The most frequently asked question from my clients and followers is
Why do we need to design again the same thing?
The answer I usually answer with is “responsiveness”. Designing responsive website in Figma take so much time.
And after spending all those times, there isn’t Publish Button in Figma. Which means it just design tool, not a development tool.
But now, with Figma to HTML with Framer plugin, I can say it’s worth it to design in Figma IF… if you design using Auto Layout properly.
You need to design your layout as close to the final development as possible and name those layers as a developer would. Once all these steps are done, you will see how closely your layout in Figma matches your layout in Framer.
Copy & Paste Layout, But Ensure The Card is converted into Component
After you’ve done this step, I’m sure you’ll be amazed on how efficient your workflow can be when it comes to Web Development.
Copy & Paste, then all those repeated element, just convert it to component. You can even copy & paste your Typography & Color Styleguide to Framer to speed up the workflow.
Just ensure it is as simplified as possible of a design system.
Thank you for reading!
Let me know what do you think of Framer, No-Code tool or Design System?
Follow for more Framer Design tips