Figma has entered the AI website builder arena with their new tool, Figma Make.

As a $20 beta product, it's generating buzz in the design community. But does the AI prototype designs that are actually useable?

And with the new publish feature, can it compete against AI builders like like Lovable?

We've taken a deep dive into Figma Make to give you the lowdown on its features, capabilities, and potential impact on AI-powered web design.

Getting Started with Figma Make: Features and Interface

Upon launching Figma Make, users are greeted with a clean, intuitive interface.

The platform offers two primary options: importing existing Figma designs or starting from scratch. For our test run, we opted to create a signup flow from scratch.

The interface is divided into three main sections:

• Left panel: Chat interface for prompts and interactions
• Center: Preview of the generated design
• Right panel: Code view

This layout bears a striking resemblance to other AI website builders, particularly Lovable. It's worth noting that Figma recently sent a cease and desist letter to Lovable over the use of the term "dev mode," which Figma had trademarked. This move makes more sense now, given the similarities between the two platforms.

Figma Make vs Lovable: Key Differences and Similarities

While Figma Make and Lovable share similar interfaces, there are some crucial differences:

• Functionality: Figma Make appears to be more focused on mockup generation, while Lovable offers full website building capabilities including backend functionality.
• Integration: Figma Make naturally integrates with the existing Figma ecosystem, which could be a significant advantage for current Figma users.
• Backend capabilities: At present, Figma Make doesn't seem to offer backend functionality, which is a key feature of Lovable.

Despite these differences, both tools use AI to streamline the web design process, making it more accessible to non-designers.

Exploring Figma Make's AI Mockup Generator Capabilities

One of Figma Make's standout features is its AI-powered mockup generation. The tool uses Claude Sonnet 4, a powerful language model, to interpret user prompts and generate designs. Here's how it works:

1. Enter a prompt describing the desired design
2. The AI generates a comprehensive mockup based on the prompt
3. Use the "point and edit" feature to make real-time modifications
4. Share or publish the created design

The "point and edit" feature is particularly impressive. It allows users to select any element in the preview and request changes directly through the chat interface. This level of interactivity makes the design process more fluid and intuitive.

Figma Make Pricing and Integration with Figma Subscriptions

Currently, Figma Make is available as a beta product for $20.

However, Figma has indicated plans to bundle this tool with their Pro subscriptions in the future. This integration could make Figma Make a highly competitive product, especially for existing Figma users who may not need to subscribe to additional tools like Lovable for mockup creation.

Pros and Cons of Using Figma Make for AI-Powered Web Design

Pros:

• Seamless integration with the Figma ecosystem
• Intuitive interface and easy-to-use features
• Powerful AI-driven mockup generation
• Real-time editing capabilities

Cons:

• Currently lacks backend functionality
• Limited to mockup creation rather than full website building
• Still in beta, so may have some bugs or limitations

Is Figma Make Worth It?

For designers and teams already using Figma, Make could be a valuable addition to their toolkit. Its ability to quickly generate and iterate on mockups could significantly speed up the design process. However, for those needing full website building capabilities, including backend functionality, tools like Lovable might still be the better choice.

Figma Make shows promise in streamlining the mockup creation process, but it's important to consider your specific needs when deciding whether to invest in this tool. As it evolves beyond the beta stage, we may see more features added that could make it an even more compelling option for AI-powered web design.

Want to learn more about no-code tools and how to build apps without coding? Sign up for No Code MBA at https://nocode.mba/sign-up and start your journey to becoming a no-code expert today!

FAQ (Frequently Asked Questions)

What is Figma Make?

Figma Make is an AI-powered website builder and mockup generator created by Figma. It's currently available as a beta product for $20.

How does Figma Make compare to Lovable?

While both tools use AI for web design, Figma Make focuses more on mockup generation, while Lovable offers full website building capabilities including backend functionality.

Can I use Figma Make with my existing Figma designs?

Yes, Figma Make allows you to import existing Figma designs as a starting point for your AI-generated mockups.

Does Figma Make create actual websites or just mockups?

Currently, Figma Make appears to be primarily focused on creating mockups rather than fully functional websites.

Will Figma Make be included in Figma subscriptions?

Figma has indicated plans to bundle Figma Make with their Pro subscriptions in the future, but details are not yet confirmed.

‍