Step-by-Step Guide to Building Framer Components with AI
For me, AI isn’t just helpful, it’s essential.
I’ve been using AI for years (since 2019!) to improve my English writing. I always hoped it would someday let me build applications without knowing code.
I’m not a developer (HTML and CSS don’t count), so code feels like a foreign tongue I don’t understand.
Today AI helps bridge the gap, but creating a fully functional app and publishing it still requires technical skills to fine-tune the code.
However, smaller projects, like creating individual components, are possible with AI.
In this article, I’ll share how I built an interactive Framer component using only AI (no coding skills required).
At the end, I will share a link to the component so you can use it for yourself.
Why I did this project
I wanted to make the portfolio I built on Framer more engaging.
A static page felt too plain, so I decided to add interactive elements to encourage visitors to stay longer and explore.
Small interactions can create curiosity and make the experience more interesting.
Why Framer is a Non-Coder’s Dream Tool
Framer is an excellent tool for me. It’s easy to use and feels similar to Figma, which I’ve already mastered. More importantly, Framer allows me to add code without complicated steps.
For this project, I created the first component using AI. Once it was set up, I used Framer’s built-in functionality to let users customize the component directly from the interface.
All the options, like changing colors or typography, appear in the right panel, making it simple to tweak. It’s like creating a Figma plugin, but easier.
How I Built It: AI, YouTube, and a Ready-Made Prompt
The idea to create a Framer component came to me out of nowhere. I had previously used AI to build Chrome extensions, so I thought, why not use AI for Framer components too?
To get started, I searched YouTube for guidance and found several helpful videos.
One video from Framer University was really helpful. Not only did it explain the process step-by-step, but it also shared a ready-made prompt to use.
This saved me from writing a prompt from scratch, and it worked perfectly for my project.
Let’s Collaborate
With over a decade of experience, I design products that are simple, effective, and loved by users.
Whether starting fresh, improving existing designs, or turning ideas into reality, I’m ready to help.
Design in Figma, Code in Framer: My AI Handoff
After sending the prompt to ChatGPT, I explained exactly what I wanted to create.
I built the design in Figma, uploaded an image to the chat, and described it in detail with text. This helped the chat understand what I want.
ChatGPT generated the code, which I copied into Framer. In the Assets panel, I added a new component, pasted the code, and the component was ready.
It worked, but it wasn’t exactly what I wanted. Since AI doesn’t always get everything right on the first try, I made a few iterations to refine it.
Trial, Error, and ChatGPT: Why Iteration is the key
The iteration process was the most critical part of creating the component.
In the beginning, the right panel didn’t include all the options I needed, like changing typography and color.
I asked ChatGPT to add those features, pasted the updated code, and tested it again.
While the updates worked, the typography settings weren’t accurate. For example, the font displayed extra weights that didn’t exist. I repeated this back-and-forth process with ChatGPT until I got the exact solution I wanted.
For non-developers like me, iterative testing is must. Unlike developers who can read and understand the code directly, I had to rely on repeated testing and adjustments to ensure everything worked perfectly.
The Cursor Crisis (and How I Finally Fixed It)
One problem gave me trouble: the cursor was positioned higher than the text. This caused the cursor line to have a taller line height than the other lines, which looked unbalanced.
I ran through many iterations trying to fix this issue.
In the end, the solution was to remove the circle at the bottom of the cursor. Once I did that, everything aligned properly.
The experience I will gain in the future will enable me to fix it too, but some things take time.
My AI Toolkit: ChatGPT, Claude, and the Free Tool.
I used three chatbot tools to write the code: ChatGPT, Claude, and Deepseek.
While ChatGPT and Claude are popular, I highly recommend Deepseek. It’s free and includes a reasoning feature similar to OpenAI’s, making it especially helpful for solving complex coding problems.
Steal My Component: Download the Component + Quick Demo Video
If you’d like to use the component yourself, you can download it here.
Watch the short video for a quick explanation on how to use it.
Let’s build something amazing together!
I’ve spent over 10 years designing products and creating simple, helpful solutions. My goal is to make things easier to use and improve business results.
Let’s team up to make your product better, solve tricky problems, and create something people will love.
If you need help starting a new project, fixing an old one, or turning your ideas into reality, I’m ready to help.
Build a Framer Component in 1 Hour. 3 Free AI Tools, No Code. was originally published in UX Planet on Medium, where people are continuing the conversation by highlighting and responding to this story.