On Wednesday, design software startup Figma launches an artificial intelligence feature that streamlines the creation of websites and applications. Named Figma Make, this feature is Figma's answer to the growing trend of "vibe-coding" tools, which convert brief written descriptions into the necessary source code for a website. Explore this guide to know how to use Figma Make and more.

Read Also:- 8 Key UI Design Principles And How To Use Them Figma

What is Vibe-Coding Tools?

Tech giants like Google and Microsoft have already showcased their vibe-coding solutions this year. Openai has also shown interest in the space, reportedly holding acquisition talks with startup Windsurf and reaching out multiple times to another startup called Cursor. Many of today’s “vibe-coding” products offer a free tier for light use before requesting payment. Figma Make will only be available to those with full seats that start at $16 per person per month when purchased annually. The company is beta-testing the feature with those users.

What is Figma Make?

Design software startup Figma launched an AI feature aimed at streamlining the development of websites and applications. This new feature, named Figma Make, responds to the emergence of “vibe-coding” tools that convert brief textual descriptions into the necessary source code for websites. Figma Make can also take Figma design files as input, generating code that closely matches those designs. While similar functionalities exist in third-party products like Vercel’s v0 and StackBlitz’s Bolt, new, they cannot integrate with existing design systems.

Pricing and Availability:- Figma Make will be available exclusively to users with full seats, which are priced at $16 per month per person when billed annually. Unlike some vibe-coding tools that offer free tiers, Figma Make is currently in beta and accessible only to full-seat users.
Powered by Claude 3.7 Sonnet:- The capabilities of Figma Make are driven by Anthropic’s Claude 3.7 Sonnet AI model. Users can start with existing Figma design files to generate code that aligns with those designs.
User Interface and Flexibility:- The tool features a chat box interface that enables users to request and refine code drafts. For simpler tasks, such as font changes, drop-down menus allow for quick edits without needing to engage the AI model again.
Early Use Cases:- A spokesperson from Figma reported that early access customers have utilized Figma Make to create video games, a note-taking app, and a personalized calendar.

How to use 'Vibe-Coding' AI for Building Apps and Websites in Minutes?

Here are the steps to use Vibe-Coding' AI for Building Apps and Websites in Minutes.

Choose Vibe Coding Tool

First step to use 'Vibe-Coding' AI for Building Apps and Websites is to start by selecting a vibe-coding platform that suits your requirements. Figma Make is perfect for design systems, while Vercel’s v0 excels at rapid web frontends. Bolt.New also offers great options.

Describe Your Project

Enter a clear, concise prompt like: “Build a task manager with a minimalist design, dark mode, and calendar view.” The AI interprets your input and starts generating the interface or code accordingly.

Let the AI Generate a Draft

In the next step to use 'Vibe-Coding' AI for Building Apps and Websites, let the AI generate a draft. In just seconds, the tool delivers a preliminary version of your app or website. This could be a design layout, a code snippet, or both, ready for previewing or editing..

Customize and Refine

Adjustments can be made by conversing with the AI or utilizing the built-in controls. You can easily modify fonts, colours, layouts, and features without needing to rewrite the entire prompt.

Export or Deploy

When you're happy with the result, export the design or code, or deploy it directly through the platform’s integration. Your app or site is now either live or ready for developers.

How to use Figma Make for Beginners?

Figma Make is an AI-powered feature that helps you build apps and websites from simple text prompts. Here's how beginners can get started in five easy steps:

1. Access Figma Make

To use Figma Make, you’ll need a full-seat Figma account, which starts at $16 per month on an annual basis. After logging in, find the Figma Make feature in your workspace

2. Write a Prompt

Another step to use Figma Make is to start by typing a clear description of your intended project. For instance: “A mobile app for tracking workouts featuring a clean interface and dark mode.” Figma Make will leverage this input to create a layout.

3. Review the Draft Design

The AI will generate a working draft based on your description. This draft may contain buttons, text fields, and layouts that align with your style preferences or design system.

4. Make Edits

The next step to use Figma Make is to utilize the integrated chat box or dropdown menus to enhance the design, whether it's changing fonts, modifying spacing, or adding elements, without the need for coding.

5. Export or Generate Code

Once you're satisfied with the design, you can either export it directly or allow Figma Make to generate the code that reflects your layout, which you can then incorporate into your development project.

Conclusion

Figma Draw is a new vector design tool built directly into the Figma platform, offering a streamlined alternative to apps like Adobe Illustrator. Designed for creatives, it allows users to create custom visuals, scalable images, and logos without switching tools. Figma Draw comes with a variety of brushes, texture effects, and vector editing features—perfect for enhancing product design work. The tool is now generally available to full-seat users and can be enabled as a toggle within Figma Design. Some features are also integrated into other parts of the Figma ecosystem, including Sites, Slides, and Buzz.

Figma Launches 'Vibe-Coding' AI for Building Apps and Websites in Minutes

Table of contents

Tags

Share Your Thought