Figma Launches Markdown Editor to Democratize Design Systems

Figma just dropped a significant update to how teams collaborate on design systems, and it’s hard not to see this as a turning point for the platform. At its first Config event in India, the company unveiled Figma Specs, a markdown-based editor that lets teams define their design language in plain text. It’s a deceptively simple feature that could reshape how design systems work across organizations.

Specs: Simplifying Design Language Definition

Figma Specs acts as both a standalone document and an embedded element within the canvas. Users can write out their design rules, reference other Figma elements like canvas components, embed FigJam diagrams, and even include code layers. Think of it as a single source of truth for your entire design system. The beauty here is accessibility: no complicated interfaces or proprietary formats, just markdown that anyone can understand and maintain.

What makes this particularly interesting is how it positions AI agents. As teams bring in more design libraries, code repositories, and brand guidelines, agents have context to work with. They’re not flying blind anymore. When an AI tool generates a design or writes code based on a design, it can now reference Specs to ensure adherence to brand rules. In a landscape where AI-generated content sometimes feels unpredictable, this is a thoughtful guardrail.

Code Layers Move Beyond Beta

Figma also graduated its code layers feature from private to public beta this week. Announced back in June, this feature embeds actual code directly into designs on canvas, enabling more interactive prototypes. Teams can ask agents to convert designs into code or modify specific sections to iterate faster. The practical advantage is obvious: designers and developers stop living in separate universes.

Loredana Crisan, Figma’s chief design officer, framed this evolution well. “We see Figma as the place where software teams come to decide what they build and ship,” she told TechCrunch. She pointed out a telling statistic: while code production has increased 17-times in recent years, actual releases have only increased 1.3 times. Much of that code is exploratory, built to discover what a product should be rather than ship it. Code layers and agents let teams design and discover faster.

Building Out the Ecosystem

Expanding Partnerships and Market Presence

Figma announced support for over 20 new tools through its model context protocol (MCP), including Open Code, Dia, Grok Bot, and Indian AI startup Sarvam. Last year’s acquisition of Payload, an open-source headless CMS, is now bearing fruit. The company is integrating Payload directly into Figma Make, its website generation product, so teams can generate dynamic websites while managing content centrally. Payload’s downloads have surged sixfold in the last year, suggesting real market appetite.

The India event itself underscores Figma’s strategic priorities. The company opened its first India office late last year and now claims the country as its largest user base outside the United States. Figma reports working with 40% of India’s top 100 Bombay Stock Exchange companies. That’s not just growth; that’s market penetration.

What’s striking about all these moves is coherence. Specs gives teams language to describe design systems. Code layers bridge design and engineering. Integrations like Payload connect design systems to content management. Agents gain context to follow brand rules. It’s a stack being built, methodically, to address how modern software teams actually work.

The non-deterministic nature of AI means uncertainty will persist, but Figma is recognizing that and building steering mechanisms into the platform itself. That’s not avoiding AI’s challenges; it’s designing around them.

Source: TechCrunch

Will design systems defined in markdown become as universal as CSS became for web design?