In this article I will show you how to use Framer AI and if it's really worth the hype that this tool has created within the design community.

Let's face it, creating a beautiful website by writing a single sentence just felt like science fiction a few years ago, but today you can use an AI site generator like Framer to create a working site within seconds.

We will use a free Framer account for this, so you can follow along without spending a dime.

Sign Up for Framer AI

‍

‍

The very first step will be signing up for a free Framer account to access it's AI features.

It is quick and easy to sign up, just follow this link: login.framer.com

Writing the Perfect Prompt 👌

After you login or sign up, you will see this screen with a magical button that will show you a prompt field.

As you may know, AI tools can do wonders but you still need to give them the right input to start with.

‍

‍

So, once you are in the main dashboard, Framer will ask you to describe what type of website you are trying to create: you will need to describe it in minute detail in order to get as close as you can to the result that you are looking for.

For example, you can add a prompt with a structure like this:

You are a professional web designer.
Design a [website type] website for [who]. Take into consideration their [context] and convey it with the design of the website.

Website type = [Insert here]

Who = [Insert here]

Context = [Insert here]

The more specific and clear you are in your prompt, the better the output will be.

So, take your time to think through what you are trying to accomplish to perform this step correctly.

Once you added your prompt, you are now ready to move on to the next step, which is..

Hit the Start Button

Once your prompt is ready and you've hit the start button, Framer will take a few minutes to create your website.

‍

‍

While it's being created, you can go to the right sidebar and choose between different color schemes and font combinations, so that you can set a style for the overall theme.

‍

‍

This is how my site looks while generating: as you can see, within the blink of an eye we were able to create a website using Framer sites in a fast and easy way.

But what if we don't like what Framer AI came up with? Well, that's not a problem, since we can simply click on the Regenerate button and Framer will come up with new alternative concepts for us to evaluate.

Customise Your Framer Site

Once you're happy with the AI base, it's time to customize your new site.

In this example I switched the template theme to a dark UI with big and bold headings.

You can easily add UI components to your Framer site by simply using the drag and drop editor on the side of the tools panel.

‍

‍

You can add Pages, Sections and Navigation items, as well as elements such as Media, Forms, Icons, Interactive components, Social and Utility items.

And remember that you can easily change the colors and typography of your AI template site at any time, and the changes will apply throughout the site in an instant.

This is very useful because it can literally save you hours during the design phase, giving you plenty of options for you and your clients to evaluate.

Adding Images and Fonts

At this point let's add some images to our Framer site: I am going to create a library by dragging images (from the computer drive, or from the desktop) into my framer dock panel. This will add more personalization to my Framer site.

Adding other assets, such as fonts, also works in a similar way: simply choose the fonts or font icons from the earlier screens and add them to your framer site project.

There you go, your new Framer site is now completed and ready to be published!

‍

‍

Once you have a website that you like and you feel like it's ready, just click the Publish button and it will redirect you to the domain settings screen. At this point just make the required tweaks and your website will be live.

Congratulations, you just made your first website with Framer AI!

To learn more about this tool check out our videos on Youtube or go to Framer University's, where you will find plenty of Free tutorials on the topic.

‍

What does framer AI do?

‍

Framer AI is a design tool which allows you to craft no-code websites in a matter of minutes. The user-friendly interface makes the process of building a custom site easy and fast, especially if you are a designer with previous experience with either Framer or Figma (which works in a similar way).

‍

Is Framer AI free to use?

‍

Yes, Framer AI (also referred to as Framer Sites) is free to use for the very most part. You can even publish a site with framer sub-domain for free, while if you want to have a custom domain (together with other features) you will need to upgrade to their paid plans.

‍

Can you make a website with Framer?

‍

Yes, Framer gives you an easy-to-use web platform to create websites in minutes with it's AI workflow. You can easily design wireframes, prototypes, and even a full and working site.

We hope that this article was helpful if you want to learn more about this tool feel free to check ut our other blog posts or YT video tutorials.