🐴 How To Use Framer AI To Generate UI
Create UI with AI | Part 1
Good morning from NYC!
Today, I’ll talk about what I discovered using Framer AI to generate UI.
Framer AI lets you type in a prompt and the AI feature will generate a website based on the description. It automatically picks the right layouts, colors, and content that matches the prompt.
It was launched in June 2023. It is still in its early stage, but I’m already impressed by what AI can do to help build a website much faster.
Overall impression
Pros:
Rapid generation (around 15 seconds).
The ability to take a longer prompt.
The ability to rewrite text instantly with AI.
The ability to customize different details after generation.
Cons:
Randomly generated results (images, styles, etc).
Limitation to export the file out of Framer for editing.
Here is a step-by-step walkthrough of how I created a landing page with the Framer’s AI feature.
Step 1: Provide a specific design prompt
With the help of ChatGPT, I was able to create a prompt under a minute.
For the purpose of testing, it was a detailed prompt that even covers the company vision and the structure of the website.
Create a landing page of an online grocery website. The name of the company is FreshMart. It aims to revolutionize the way families shop for groceries by providing a wide range of high-quality, fresh food items directly to their doorsteps. The vision is to become the go-to online grocery platform, where convenience, variety, and quality meet.
1. Hero Section
A captivating hero image or slider showcasing featured products, deals, or seasonal items.
A clear and concise value proposition or welcome message.
A prominent search bar with auto-suggestions for products, categories, or brands.
2. Navigation Bar
Easy-to-understand categories (e.g., Fruits & Vegetables, Dairy, Meats, Pantry Items).
Links to other important pages: About Us, FAQs, Contact Us, Delivery Information.
Account management options (Login/Sign up, My Account, Order History).
3. Special Offers and Deals Section
Highlighted section for current deals, discounts, and promotions.
Time-sensitive offers to create a sense of urgency (e.g., Flash Sales).
4. Popular Products Section
Display of best-selling or popular items with high-quality images.
Quick add-to-cart option for streamlined purchasing.
5. Search and Filter Functionality
Advanced search options to filter by price, brand, dietary preferences (e.g., organic, gluten-free), and ratings.
Sort features to organize products by relevance, price, popularity, or new arrivals.
6. Product Recommendations
Personalized product recommendations based on browsing history, cart contents, or user preferences.
7. Customer Reviews and Ratings
User-generated reviews and ratings for products to build trust and guide purchasing decisions.
9. Blog or Recipe Section
Engaging content related to food tips, recipes, or how-to guides for using certain products.
10. Footer Section
Quick links to essential pages (Privacy Policy, Terms of Service, Careers).
Social media icons linking to the brand's profiles.
Newsletter signup form to collect email addresses for marketing.
Step 2: Copy and paste the prompt into Framer AI
Click on “Actions” in the main navigation bar.
Click on “Generate Page” in the dropdown panel.
Copy and paste the requirement into the prompt.
After 20 seconds of generation, this is what the website landing page looked like.
It automatically generated three breakpoints—large, medium, and small.
Step 3: Edit or regenerate the whole site
For editing, there is some flexibility around what you can do:
Move the position of text/image with precision.
Change all the images that were generated.
Regenerate the copy with AI’s help.
Regenerate the color scheme of a section with AI’s help.
If you don’t like the landing page at all, you can choose to regenerate with one click.
And yes, the style is random—it can be drastically different from the previous design. You never know what you will get and you may want to keep generating new ones until you are satisfied.
*Note that you may use up the limit if you try multiple regeneration attempts. If so, you have to wait for over an hour for a new attempt.
Takeaways
The process was pleasant in general. The speed and quality of generation were both better than all the other platforms that I had tried.
However, similar with other platforms, the result can be random and it requires a good amount of work for you to edit and revise.
Framer is meant to be a platform for the production stage, so it expects you to make all the edits in Framer vs. exporting to other design tools such as Figma. That said, there are two not-so-effective ways to get around:
Framer app allows you to export assets to png/jpg. You can then use them in Figma for reference.
Use html.to.design chrome extension.
That’s it for today.
In the next issue, I’ll continue introducing another exciting AI tool. Stay tuned.
—Xinran
P.S. Questions? Thoughts? Just reply to this newsletter. I’d love to hear from you.