Articles

Software engineers Darragh Burke and Alex Kern share the story behind the creation of code layers to bring design and code together. ​“Building code layers in Figma required us to reconcile two different models of thinking about software: design and code. Today, Figma’s visual canvas is an open-ended, flexible environment that enables users to rapidly iterate on designs. Code unlocks further capabilities, but it’s more structured — it requires hierarchical organization and precise syntax. To reconcile these two models, we needed to create a hybrid approach that honored the rapid, exploratory nature of design while unlocking the full capabilities of code.”

“We built code layers—interactive elements backed by custom React code—in Figma Sites to help you experiment with interaction and motion without additional technical knowledge or outside help. Whether you’re creating an element from scratch or riffing on an existing design, code layers allow you to add dynamic functionality to your site—from flyouts and dropdowns to shaders and maps—by converting components to code layers, chatting with AI to build and tweak them, or editing directly in Figma’s code composer. And, you can generate multiple code layer variations to compare your ideas side-by-side and experiment freely—all in the Figma canvas.”

Hardik Pandya with a thoughtful critique: ​“When Apple places interface elements behind a glassy refractive layer and claims this brings content closer, it contradicts our lived experience with glass as a material. The iPhone’s most powerful feature has always been direct manipulation — the sense that you are touching your photos, sliding your messages, and tapping your apps directly. There is no separation layer. There is no glass between you and your content, because the screen itself disappears during interaction.”

Figma acquired Payload, an open-source Next.js CMS. James Mikrut, founder of Payload: ​“Figma and Payload together can and will solve a problem that’s been bugging me (and probably all of you) for years. The gap between design and code still exists. Designers create in Figma, then devs recreate in code, then content teams struggle to maintain it all. It’s inefficient and frustrating. And historically, the CMS tends to make it worse. With Figma, we can (and will) solve these problems in new ways without compromising.”

Kris Rasmussen, CTO of Figma: ​“When we announced Figma Sites at Config, we shared that we’ll be rolling out a CMS for it in the months ahead. Figma CMS will make life easier for marketers and designers who need to update website content, and Payload brings all the stuff developers love—a powerful, customizable backend for building scalable websites and apps, plus an intuitive admin panel for editors. By teaming up with Payload, we’re creating something special.”

This is huge! A few months ago, I wanted to use Framer for a marketing website but ended up recommending building a custom website only because its CMS was so lacking. When Figma announced that Figma Sites CMS is ​“coming soon”, I expected something just as barebones in the beginning. Getting a proper CMS in addition to code layers and Figma Make components makes Sites insanely customizable and powerful.

Apple updated HIG with all the latest design techniques.

Designer Advocate Alexia Danton shares the team’s favorite prompts, pro tips, and best practices for using Figma Make to help you get the most out of the recently launched prompt-to-code feature.

Elie Majorel shares the playbook of prototyping with AI tools, allowing other designers to spend less time on appearance and more time on impact. ​“One Sunday I opened Miro, sketched a few boxes for a new agent search, and copied the flow into Claude. Claude wrote a clear spec. I pasted that prompt into Lovable, pressed generate, and two hours later a working React repo ran in a sandbox. Engineers forked the code the week after. Leaders clicked the demo and said keep going. Two hours from idea to running product. No Figma layers. No endless handoff.”

Ruxandra Duru works with Google designers focusing on the intersection of color, emotion, and UX design. ​“After years of what we could call a color fixation, I’ve developed a three-step approach to color theory. My secret to making color more pleasurable and intentional — and much less scary — has to do with balancing, relating, and completing your colors.”

Robert Bye keeps sharing lessons he learned at Figma. In part 3, he talks about autonomy, creativity, collaboration, communication, and camaraderie which he saw at Figma’s most inspiring teams daily. ​“Before joining Figma, I experienced far too many teams riddled with people playing politics, jockeying for credit, and optimising for performance reviews. Thankfully, that culture was refreshingly rare at Figma. Instead, most folks genuinely enjoyed collaborating, celebrated each other’s wins, and championed each other’s successes. Whether it was PMs ensuring designers presented their own work to leadership or team leads publicly praising IC engineers for fixing gnarly bugs, ego-free collaboration was consistently modelled.”

Figma announced the beta release of the Dev Mode MCP server, which brings it directly into the developer workflow to help LLMs achieve design-informed code generation. Jake Albaugh shared a sneak peek at the GitHub × Figma Dev community event during Config, and I’m excited to finally give it a try.

“[MCP server] allows developers to bring context from Figma into agentic coding tools like Copilot in VS Code, Cursor, Windsurf, and Claude Code. Whether it’s creating new atomic components with the proper variables and stylings or building out multi-layer application flows, we believe this server will provide a more efficient and accurate design-to-code workflow.”

“If you’ve already invested in a design system and leverage patterns like components, variables, and styles that are aligned between design and code, the Dev Mode MCP server is a multiplier — we want to make sure that the LLM can benefit from these patterns, too. Agentic search techniques can take quite a bit of time to locate the right patterns, especially in large codebases. They may also find valid patterns that stray from those referenced in a design. By providing references to specific variables, components, and styles, the Dev Mode MCP server can make generated code more precise, efficient, and reduce LLM token usage. […] If Figma knows which components you’re using, it can share the exact path to the code file the agent needs with Code Connect.”

Investor Sarah Guo wrote a beautiful post on building organizational taste: ​“Start with the founder edit. Early on, every user-facing decision flows through one person — not for control, but for consistency. This only works with respect, explanation, and velocity. You’re not a bottleneck; you’re a tuning fork.

Then hire multipliers. A designer who codes. An engineer who notices typography. These people collapse the gap between vision and execution. They don’t just build what you describe — they build what you meant.

Dogfood religiously. Use your product the way customers will. Feel the sharp edges. Most teams test features; taste-driven teams test feelings. When something hurts, fix it. When something delights, double down.

Track delight debt alongside technical debt. Monitor the small things you’re not doing — the loading animation, the empty state, the error message personality. These compound into brand equity. Every rough edge you leave unfixed teaches your team that craft is optional.

Make quality a principle, not ​“quality” as bug-free, but quality as craft. The best engineers aren’t drawn to easy problems or high valuations. They’re drawn to teams that give a shit about the work itself. They want to build things that matter and feel pride in what they ship.

Create user exposure to cultivate this instinct. Engineers naturally optimize for efficiency. How do you get them to do something 10x harder for 10% better UX? Let them watch a user struggle with their ​“efficient” solution. Let them hear the confusion in a customer’s voice. User feedback is the best teacher — not because it tells you what to build, but because it shows you why craft matters.”

Speaking of Apple, the latest winners of the Design Award were announced. Congrats to Play for winning the Innovation award!

Sebastiaan de With is the co-founder and designer of the award-winning apps Halide and Kino for photography and video. In this article, he imagines what could be next for the UI design at Apple: ​“What would I do if I were Apple’s design team? What changes would I like to see, and what do I think is likely? Considering where technology is going, how do I think interface design should change to accommodate?”

(Reminder that WWDC25 is happening this week, with a keynote on Monday at 10 AM PT. That’s when we’ll find out how close his predictions are to what Apple designers have in mind.)

My friend Christine Vallaure shares a few lessons learned building her educational platform as a company of one. Christine’s approach to running a business is truly inspiring, and she masterfully told her story at this year’s Config and in her new book Solo. (Which I genuinely recommend and she offers a coupon to my readers in the Friendly Promo above, which is not an ad.)

Lenny Rachitsky’s survey was all over Design Twitter this week. Next are a few interesting takeaways. 1) ​“Workers at smaller companies report significantly lower burnout levels than those at larger companies.” 2) Designers are the most burnt-out tech workers, closely followed only by Research and Growth — I wonder if it’s because these roles constantly deal with ambiguity and limited autonomy. 3) Optimism about career and current role is on the decline, with designers having the largest negative sentiment change. 4) ​“Fewer than 1 in 3 tech workers (26.6%) rate their managers as highly effective, while more than 4 in 10 (42.3%) rate their managers as ineffective. […] People in product and design roles have the most negative leadership perceptions.” 5) Startup founders are the happiest people in tech.

As Christine Vallaure writes, ​“if you want to master Figma’s new Grid, you need to know how CSS Grid works.” In this in-depth guide, she explains how both of them work and shows where Figma ends and the browser takes over to do the heavy lifting, so you don’t miss out on the flexibility, responsiveness, and layout power that only the browser can fully deliver.

“The State of AI in Design report, created by Foundation Capital and Designer Fund, is based on a survey of 400+ designers and conversations with leaders at Stripe, Notion, Anthropic, and more. It explores the real impact of AI on design today, in 2025.”

Bloomberg: ​“Design software business Figma Inc. hired Morgan Stanley to lead what could be one of the year’s biggest initial public offerings, according to people familiar with the matter. Figma, backed by Index Ventures and Kleiner Perkins, has also brought on Goldman Sachs Group Inc. and Allen & Co. for the listing, said the people, who asked not to be identified because the information wasn’t public. Figma, which said in April that it had filed confidentially for an IPO, could go public as soon as this year, the people said.”

(Read without a paywall.) The Verge interviews Dylan Field about ​“how he sees AI fitting into Figma after a rough start to integrating the technology last year, the new areas he’s targeting to grow the platform, and more.”