Figma: Claude quickly converts concepts into code, building a website in a day

Figma engineers stated that before Anthropic appeared, AI models clearly lacked design taste and personality. When you let them generate designs, the results are often monotonous. Claude gives Figma an AI model with design sensibility, simplifying a large amount of communication and revision processes. As Jensen Huang said, SaaS software and AI are not adversaries but work together to enable work teams to complete tasks more efficiently.

Figma’s Natural Language Application Generation

Figma product manager Alex Mullans pointed out that in traditional design workflows, after design delivery, there are often deviations from the original concept due to implementation limitations. By integrating design and code generation into the same platform, teams can continuously maintain control over design intent during development, reducing the costs associated with repeated communication. Figma uses Claude’s natural language capabilities to save designers a significant amount of implementation time, transforming static designs into prototypes or applications with interactive behaviors, shortening the distance from concept to validation.

Claude supports Figma Make, allowing platform users to quickly create functional interactive prototypes or applications without writing code. Designers, developers, and product managers can complete tasks that previously took a lot of time within minutes, automating repetitive and complex processes. Figma states that this approach allows teams to spend more time exploring different design directions and product ideas, while also enabling members without design backgrounds to express ideas visually, expanding participation in the design process.

Build a Website in One Day Using Claude

When choosing AI models, Figma emphasizes a balance between code quality, understanding of design intent, and execution speed. Mullans said that Claude has demonstrated stable performance in multiple evaluations, balancing accuracy and user needs. The Figma team also noted that Claude’s sense of design makes generated results not only functional but also more aligned with aesthetic principles. Figma Make product manager Holly Li shared that she once spent about 30 hours self-learning React to build a website, but with Claude’s help, she completed code refactoring and feature expansion in just one day.

Holly Li said that each update of Claude brings significant improvements. Now, with just one prompt, it can generate beautiful designs with gradients, diverse fonts, and clever animations. Designers within the Figma team even said: “Claude is amazing, I’m so moved I want to cry.”

Claude Brings a Design Revolution Driven by Natural Language

Figma has integrated Claude into two products: “Figma Sites” and “Figma Make,” enabling code-driven creative concepts to quickly become designs. Designers can add interactive effects to existing designs in Figma Sites using natural language, such as “add a hover tilt effect,” and Claude can quickly generate high-quality code while preserving the original design details.

Figma Make allows creating interactive prototypes or applications based on descriptions of existing Figma designs. It can turn ideas into real software, starting from scratch or based on existing designs created in Figma. Users input prompts describing their needs or copy pixel-perfect models from Figma designs, and Claude converts them into complete prototypes with complex logic and animations.

AI is changing how art designers work. With simple prompts, interactive experiences can be generated, and design and development teams no longer need to manually build prototypes or write大量代码, enabling rapid validation of design directions. This development solves the tedious communication issues between designers and developers.

This article, “Figma: Claude Quickly Converts Concepts into Code, Building a Website in One Day,” first appeared on Lian News ABMedia.