I don’t know how to code.
If you’re here, you probably don’t know how to code.
Let’s face it, most people don’t even have a clue what coding is. They think developers whizz across a digital highway, fight actual cyber criminals like a real-life robocop, and live in cyberspace. They don’t. It’s all text editors and monospaced fonts and a gazillion bugs.
That’s why I love the no-code revolution.
Because even though I don’t know code snippets from a grocery list, I love to be able to create whatever I dream up. With no-code builders popping up for everything from websites to mobile apps, that’s now possible — and easier than ever.
And today, we’re looking at my favorite no-code builder: Framer.
Framer is just right for designers
Let’s zoom in on history.
Because if you’re looking at the big picture — dinosaurs and steam trains and everything — no-code builders are a true revolution. To be able to create without really understanding the technology that goes into the tool you’re using? That’s future-stuff.
In internet years, however, no-code has been around for a while. I won’t go so far as to say it’s old news, but you’ve definitely heard about them before.
So, why should you care about Framer?
If you’re like me you care because it’s easy, but not too easy. If you want to create custom websites with Framer, you still have to get your hands dirty.
Let’s take Webflow. It says it’s the best no-code builder because it’s so versatile, and it is. But it also has a learning curve so steep you’ll hurt your neck looking at it. For a designer like me, the fact that with Webflow I can do everything, means I’m unable to do anything — it’s too much (for me).
That’s why Framer is a real Goldilock-type solution: it’s just right, for a designer like me.
What does Framer offer?
Now, let’s zoom in on Framer.
What is it, what does it do and what’s on offer?
Framer has evolved into a robust no-code builder, that blends the worlds of design and development seamlessly. At it’s core, Framer is built for designers looking to break free from the constraints of traditional web design tools.
Framer helps a designer create interactive, dynamic websites with a great user experience.
It achieves this with a few key features:
Frames: A-ha! Framer takes it’s name from this key feature, how clever. You can imagine a frame as a blank canvas you create within your website. It’s a place ready for freeform design, making it easy to design with in the same way as tools such as Figma.
Stacks: Framer one-ups Figma with stacks, which turn freeform design into responsive elements with relative positions — in short, this turns your design into a useable website.
Interactive components: To make your no-code life easy, without making it less dynamic, Framer offers interactive components. With them, you can create complex UI elements with dynamic content, and animations.
High AF-fidelity prototyping: Framer takes prototyping to the next level. Because they’ve made creating websites so easy, you can quickly make a prototype look and feel almost as good as the real thing.
No-code: I know, this is what I’ve been talking about the whole time: Framer is a no-code superhero! But let’s be honest, some of you really don’t read this and I want to make it super duper clear :)
With these features and loads more, Framer empowers designers to build next-level user experience without all the hoo-ha that turns no-code into a no-go.
Why Framer is valuable for designers
When you’re a designer, you want the whole world around you to bend to your vision.
That makes the life of a web designer so very, very hard.
Every new screen size and media type means another thing we have to take into consideration while designing. It can honestly limit your creativity, but what can we do?
Well, using Framer as a designer feels like a best case scenario.
It gives you the tools and freedom to design the way you want, without being blind to the fact that at some point you’ll have to think about responsiveness, interactivity, and what have you.
Here’s some ways Framer helps you, as a designer:
Intuitive user interface: Framer maintains a delicate balance between powerful and simple, in their approach to user interface. It gives you what you need, when you need it. The UI works the same way most design tools does, but gives you more power under the hood.
Empowering creativity: With its advanced animation capabilities and interactive components, Framer doesn’t confine you to simple, static design. It helps you craft engaging, dynamic user experiences that stand out.
Seamless collaboration: Though Framer offers you all the tools to create great websites on your own, everything is better together. Framer helps you make feedback loops shorter, comments instantaneous, and helps you and your team align products to your vision.
Flexibility and control: No two designers work the same. That’s why Framer always gives you options. From working with Frames or Stacks, to starting from a blank canvas or with a template to boost your workflow. With Framer’s code injection, they still allow you to have granular control of your product when you need it.
In these ways, Framer does more than streamline the web design process; it elevates it. Framer allows you to make your most ambitious design ideas a reality.
Framer vs. the rest (Webflow, WordPress)
You get it, I like Framer. But how does it stack up to the competition, which include: the original no-code web builder, a easy-to-use powerhouse and the most installed CMS in the world?
I’m adding that last one, WordPress, even thought it’s not a no-code builder, because it’s so well known. At some point, it’ll probably be an option for most people to create something with WordPress, and I want to see if Framer’s worth the money in comparison.
Let’s have a look.
Framer vs. the rest — Ease of use
Framer: Framer is designed to be both powerful and intuitive. It definitely has a bit of a learning curve if you don’t know design, but if you already use design tools such as Figma there’s a lot you have seen before.
Squarespace: There’s no denying Squarespace is easy to use. It’s learning curve is intentionally kept as light as possible, making it accessible to loads of people.
WordPress: It all depends what you want to use it for. If you’re building a blog, you’ll be done in a few minutes. Especially as there are so many tools to help you get started. To build anything beyond a static site though, will require some coding skill.
Webflow: Hats off to Webflow for creating such a powerful tool with non-developers in mind, but the learning curve is pretty steep here. If you don’t at least grasp the basics of web development, you’ll have a hard time keeping everything working properly.
Framer vs. the rest — Customisation
Framer: Framer offers amazing customisation options on so many levels. Components are a powerful feature; they make it possible to reuse parts of your design without letting go of the possibilities to edit text, images, and more. There’s also customisation capabilities for the CMS, for animation, and code injection means you keep control on every level.
Webflow: Webflow offers the same strong customisation options, and might even go a step beyond Framer when you talk about visual CSS styling. The difference between Framer and Webflow is that the first one has a more intuitive interface, IMO.
I could go on and talk about the ways in which Squarespace and WordPress offer customisation options, but I’m not. The first one just has too few real ways for you to really design the things you want, and the latter has endless customisation … if you can code.
Framer vs. the rest — Integration and compatibility
Framer: For designers, especially those of you who use Figma, this is where Framer shines. With near perfect copy-past between the two tools, you can easily transform your Figma designs into reality with Framer. Framer also offers ‘copy from HTML’ functionality, which is pretty cool: Select an element, copy it with the Framer Chrome-extension and paste it onto your Framer canvas.
Webflow: With Webflow Apps you can connect powerful tools to your website. Honestly, the amount of integrations Webflow offers is pretty amazing. If you’re working with a lot of other apps in your organisations, there’s a big chance Webflow works well with it.
Squarespace: Squarespace offers a few cool ways to extend the functionality of your website, but it’s nothing too fancy. There are some code block-integrations, some ways to connect to payment services and social accounts, but in this day and age I would consider all of it pretty standard stuff.
WordPress: I mean, you gotta recognize the OG; the first to do it. One thing that made WordPress so popular is all the ways you can connect any tool and every data source to WordPress. It made it versatile, while staying light weight. However, getting some of this stuff to work takes this from no-code to coding territory faster than you can say ‘Framer rules!’
How to get started with Framer
Enough with the horn-tootin’, by now you’ll understand I’m pretty excited by Framer.
And if I’ve made you curious to start your own Framer project, I want to help you.
Step 1: Create a Framer account
You know I know you don’t need no explanation to create an account, but … you know, just in case — okay? To get started with Framer just click the link below to create an account.
Step 2: Click around, have some fun
I wasn’t born yesterday.
If you’re like me, there’s no way you will start learning Framer by diving into tutorials or, god forbid, the official Framer documentation.
You’re gonna open a new project and mess around.
And I want to encourage you. Don’t even think about tutorials — go to town, take Framer for a spin. I’ll be here when you’re done.
Step 3: Dive into some Framer tutorials
Okay, so you’ve clicked and dragged and poked and pinched around Framer for a bit. How was it?
If you didn’t have a clue what you were doing, go check out the original Framer Acadamy. You get a straightforward understanding about the inner workings of Framer.
When you feel you’ve seen most of this before, good for you!
Step 4: Grab yourself some sweet Framer templates
Rome wasn’t build in a day, but your new website could be.
With Framer templates you’ll save yourself some time and trouble by kickstarting your next project. There’s a ton to choose from, both free and paid.
Framer offers a diverse range of styles and functionalities, catering to various industries and website types. Whether you’re building an e-commerce site, a portfolio, or an online ode to your guinea pig, there’ll be something to fit your needs.
Heck, I even have a portfolio template you can check out for yourself. With this Framer template, you can showcase your design, photography, writing, or any other creative project that you've been working on in a sleek and professional way.
No-code, no problem with Framer
I don’t know how to code, and with Framer that’s not a problem.
In the year since I’ve started using it, I have been able to create some truly great online experiences from scratch. All while staying away from lines and lines of commands and brackets I don’t understand, and it’s been great.
I’m looking forward to creating many more websites with Framer, but mostly: I’m excited to see what you come up with.
If you like, you can always send me all the cool stuff you’ve made.
