Bringing ideas to life with AI and No-code
Turning a weekend project into reality with AI and No-code
A few years ago, when Figma launched plugins, I had a vision: to build something that could seamlessly help designers like me. But with no coding knowledge, that vision stayed just that—a vision. Fast forward to today, Framer plugins are here, and so is my companion, AI. Together, we built the Framerize plugin, offering 300+ sections for building Framer websites directly in the canvas.
This isn’t just about what I built. It’s about how AI and no-code tools are transforming the way creators bring ideas to life.
The Power of AI: A Designer’s Perspective
Let me start with this: I don’t fear AI; I embrace it. As a designer with little technical knowledge, I’ve learned to see AI not as a competitor but as a collaborator. If you’re not leveraging AI today, you’re falling behind.
For me, AI is the bridge between ideas and execution. It doesn’t just solve problems—it empowers creators like me to turn what was once impossible into reality.
"AI is a tool. The choice about how it gets deployed is ours."
— Oren Etzioni
The Journey of Building Framerize Plugin
Planning the project
When Framer Plugins launched, I knew I had to act. After diving into the documentation, I realized two key needs: authentication and a database. I was already using Lemon Squeezy to products, so it was a choice for managing subscriptions and licenses. However, I wasn’t sure what to use for the database.
Building with ChatGPT
That’s where my AI co-builder, ChatGPT, came in. It suggested several options, including Airtable, Notion, and other headless CMS platforms. Ultimately, I chose Airtable because it was easy to set up and integrate with my workflow. ChatGPT provided me the necessary code to fetch and display the data.
ChatGPT also identified a potential security issue: exposing API keys on the client side. It suggested using Vercel Serverless Functions with a step-by-step guide to set up a proxy server.
With its assistance, I tackled:
Authentication: Setting up user authentication using Lemon Squeezy.
Database: Connecting Airtable to fetch data.
Backend Proxy: Creating proxy APIs and addressing CORS issues.
Every obstacle became a learning opportunity, thanks to AI.
Breaking through challenges
The backend setup, including solving CORS issues, took about three hours. For someone with no backend experience, this was a significant achievement. From start to finish, I completed the plugin in just 12 hours over a weekend.
Why AI and No-Code Tools Matter
AI and no-code tools democratize creation. They eliminate barriers, empowering designers and creators to build things we never thought possible. I urge you to take the leap if you're still hesitant about AI. Learn to use it, understand how systems work, and see what you can achieve.
A Message to Designers and Creators
To my fellow designers: don’t fear AI—embrace it. It’s here to amplify your creativity, not replace it.
To creators everywhere: use these tools to your advantage. The faster you adapt, the quicker you can turn your ideas into reality.
Final Thoughts
Building Framerize wasn’t just a technical achievement but a personal milestone. It reminded me that limitations are temporary when you have the right tools and mindset.
As a designer with little coding knowledge, if I can build a Framer plugin in 12 hours, imagine what you could achieve.