Articles

Anima has been working on design-to-code tools since before the recent AI craze. A few months ago, they added support for shadcn/​ui components, which I tried last week on my current project designed with this library.

Unlike v0, they parse the Figma file and get a lot of details right. I was impressed with how accurately it selected shadcn/​ui components, even if layers weren’t explicitly named or instances were detached in the mockup. It becomes obvious that parsing a file is the right approach when different components look the same on the surface. For example, the trigger for opening a dropdown or date picker uses the same button, but they are different Figma components under the hood, and Anima chose their counterparts in code correctly.

Exporting custom colors and typography variables to a Tailwind config is also a nice touch. I ran into a few issues with excessive Tailwind styling and newer shadcn/​ui components like the Sidebar not being recognized, but overall, this clearly feels like the right direction.

Vercel shares best practices on importing your designs from Figma to v0 and working with shadcn/​ui. I was excited about this integration until I realized it simply exports the Figma frame as an image and passes it to v0’s AI vision. Information about Auto Layout, spacing, color tokens, and typography is not preserved from Figma but inferred from the image. That’s fine for rough prototypes, but there is a better way.

Adobe brings multiplayer to Photoshop desktop and web apps. Now, multiple creators can simultaneously access and edit documents from different computers. It’s about time!

The new Lovable and Builder​.io integration lets you turn Figma designs into full applications. Lovable is a full-stack AI software engineer and editing environment. It’s designed to let you quickly create and iterate on your projects so you can move from an idea to a real application, deployed live, without wrangling complex tools or environments. AI-Powered Figma to Code is Builder​.io​’s toolchain that leverages AI models to convert Figma designs into React, Vue, Svelte, Angular, HTML, etc code in real-time. It can even reuse your existing components in the output and use any styling library or system you need.

So, by using the integration, you can convert Figma mockups into code with Builder​.io and then open them in Lovable, where you can add new functionality or connect it to the real data from Supabase. Soon, you’ll be able to update your app in Lovable whenever designs change in Figma. AI will merge the design changes while keeping all your custom code intact. (Unrelated, this combo was most recommended in answers to this question about the best AI tool for turning designs into a website.)

If you’ve been waiting for more details to start planning your trip to Config 2025, now is the time. Azra Daniels, Director of Events at Figma, gives a first look at what the team is building for the community on both sides of the Atlantic. The conference will kick off on May 6 at Config Commons near Moscone Center in San Francisco, where you can grab the badge and meet other attendees. To avoid long registration lines, partner hotels will offer multiple check-in locations. 50+ sessions will take place in multiple tracks on May 7 and 8. The Maker Space will feature a dedicated stage where community leaders showcase their latest work. Config will continue in London the following week for a one-day event with 10 sessions.

After being at Figma from 2019 to early 2024 and seeing the company grow from less than 100 to over 1,500 employees, Software Engineer Andrew Chan wrote down some notes on what brought him to Figma and why he thinks it succeeded. He highlights two factors that created Figma’s ultimate moat — browser-first link sharing brought non-designers into the product, and their multiplayer technology was hard to copy for existing products like Adobe XD and Sketch: ​“I would guess that this was less of a ​“collaborative algorithms are really hard to implement” and more of a ​“existing products are really hard to make collaborative” problem: Framer moved to browser-based collaboration pretty successfully, but it did so by completely ditching its old product, while Figma-like design collaborative design tools created from scratch are pretty common these days.”

Another great point is on forming strong product opinions early on and crunching on them until they’re right: ​“One clear thing to me is that Figma’s astounding success in design was due in large part to the company identifying a gap in the design space and working on it essentially in secret for years. Folks like Rasmus and Sho formed strong opinions on nearly every aspect of the product-to-be, which we would spend the next few years realizing in fairly recognizable form. I will make this claim mostly without evidence, but suffice to say that many features like auto-layout and component variants had their bones laid out years in advance (although most newer features like variables were designed later AFAIK).”

First Round’s deep dive into how Figma Slides founding PM Mihika Kapoor transformed a hackathon project into one of Figma’s most anticipated launches.

Jake Albaugh talks about how modern browsers have evolved beyond what most design tools can do: ​“While many designers and developers have been working within familiar constraints, browsers have undergone a quiet revolution. The web now supports features like container queries, advanced scoping and inheritance, and responsiveness to user preference. It’s gotten much more sophisticated in terms of color, typography, dynamic units, layouts, and animation. Yet so many young designers and developers I talk to as a Developer Advocate at Figma aren’t aware of these possibilities. We’re still operating within old paradigms instead of pushing the boundaries of what the browser can do.”

Did you know that Figma’s cofounder Evan Wallace created a custom programming language Skew for their mobile rendering architecture? This story slipped my attention, but Andrew Chan wrote a fascinating look at some of its interesting features.

Jacob Miller from Figma ran a poll and discovered that ¹⁄₃ of designers misunderstand DPI. In this post, he explains the relationship between pixel count, DPI, and physical size.

Carly Ayres on the value of combining skills: ​“A design engineer can not only take an idea to a working prototype with little lost in translation, but can spot opportunities and constraints that might otherwise be missed. The emergence of roles like ​“design engineer” illustrates how intentional (or unintentional) skill-building can create rare resumes for roles that might not exist yet. Few design engineers likely trod that path because they saw a lucrative career opportunity on the horizon—rather, chasing curiosity and a desire to see their ideas to fruition, they gradually skilled up in the areas missing from their stack. Those gaps in their abilities mirrored the needs in the industry at large.”

Moty Weiss shares his experience capturing and preserving brand consistency with AI illustrations. The idea of analyzing existing brand illustrations with ChatGPT to create a foundational prompt for Midjourney really stood out to me. The resulting illustrations adhere to the brand style and have a unique voice, looking very different from the AI-generated images flooding the internet. While they still need some work, the new tools are truly empowering: ​“While Midjourney’s results may still require final touches — such as vector conversion, line refinement, detail enhancement, and final polish from a professional illustrator — it represents a significant step toward independence for designers who struggle with illustration.”

Yann-Edern Gillet reflects on his first year designing at Linear: ​“Experiencing imposter syndrome has taught me to accept feedback—both positive and constructive—with openness and to lean on my teammates for perspective and support. It’s uncomfortable, but it’s also a reminder that the work you’re doing matters. Over time, I’ve learned to reframe it as a driver for growth, reflection, and improvement, and that’s been one of the most rewarding parts of this journey.”

Molly Hellmuth had Brad Frost, author of Atomic Design, as a special guest at one of the recent cohorts of her Design System Bootcamp course. Molly’s students asked him so many great questions that after the Q&A, he recorded a video answering them again for a wider audience. Topics include design systems, workflow, atomic design, the future of design systems, buy-in, designer-developer collaboration, personal development, and global design system stuff. 

The next cohort of Molly’s 5‑week course starts on January 13th, which is the last scheduled cohort for now. Molly generously offers Figmalion readers $100 off with the coupon code FIGMALION100.

The official announcement and walkthrough of changes.

Justin Jay Wang experimented with different methods for generating random gradient images, including those used by OpenAI visual identity. He explains the difference between heightmaps, layered radials, and AI-generated gradients. Loved this part: ​“In early 2019, OpenAI’s home page displayed a vibrant, full-screen gradient. The implementation was simple: a tiny, 2×3 pixel image of six color stops, which produced a smooth gradient when scaled up by web browsers. It weighed just 85 bytes (about the size of a brief text snippet) and loaded virtually instantly.”

An overview of everything shipped this year. It’s a long list!

Luis measures and compares the performance of a complex component built as a single mega-variant vs. nested and bubbled instances. While the nested instance approach is faster and more maintainable, he shares a few alternatives that are worth considering.

Designer Advocate Ana Boyer: ​“UI3 prompted us to rebuild our own design system from the ground up. Here’s how designers and engineers came together to create a new foundation for building consistent, accessible products.”

Erez Reznikov argues that in the next generation of design tools, designing and building digital products will have to abide by the constraints of the platform in which they are coded and tested. ​“The right tool will have to be built for a collaboration. A true collaboration, not a handoff. With developers, because complex products (which will be the vast majority) need them. There’s no avoiding that with dreams of magic AI fairy dust and no-code, no-dev narrow builders, empowering as they may seem.”