Slots are finally here! This hands-on tutorial explains building flexible components with Slots and covers the practical workflow, from setting up a slot inside a component to configuring preferred instances so designers know exactly what content belongs there.

It’s time to pay respect to the original ​“slot component” technique, shared by Ridd back in 2021. Thanks for your service, you’ve served us well.

Designer Advocate Brett McMillin covers the fundamentals: what slots are, how to add them to components, and the mental model for thinking about content-structure separation in design.

Five practical strategies for integrating Slots into a design system, sourced from teams who’ve been testing the feature since Schema 2025. The most actionable tip is to start with the components people detach the most — that’s where Slots will deliver the fastest payoff. I also liked the tip of using pre-filled slots where content is predictable, and empty slots where designers need to add something on their own.

Code Connect keeps getting more ​“real-world design system” friendly: you can now attach multiple code files to a single Figma component, preview code across frameworks (with GitHub connected), and set framework-specific MCP instructions so agents implement the right thing. This is one of those unsexy updates that makes Code Connect actually usable across multi-framework orgs (or even just ​“web + native + marketing site”).

Patrick Morgan makes a clean distinction that vibe-coding discourse keeps blurring: prototype code is for exploration, production code is for endurance. He is building a protected prototyping environment using Claude Code, a place where his team can move fast and then deliberately port the right assets across the boundary into production.

There is a clear parallel with how the design team at Notion works. In the recent episode of How I AI, Brian Lovin showed their collaborative ​“prototype playground,” where the entire team can create, share, and iterate on functional prototypes.

That also reminded me of how my team worked a decade ago, back when front-end development was a tad simpler. We had a separate ​“mockups” directory inside the Rails monorepo, where designers prepared static HTML mockups with production-ready CSS and JS. By the time designs were handed off to engineers in a feature branch, all polish and design details were already baked in. The design team must be fairly technical, but there is no going back to handing off Figma files after working this way.

Cole Derochie from Shopify made a plugin for simulating an LLM streaming experience — make sure to check out the demo.

You can now type directly in the hex code input to access your color variables and styles. Lots of smart details: enter a hex value and see all variables and styles using it, colors are surfaced based on the context, and related terms are baked into the new algorithm (i.e., finding your ​“danger” variable when searching for ​“error”).

A live walkthrough of all February launches across Figma products, plus a Q&A with CPO Yuhki Yamashita on where design and software are headed this year. Don’t miss an early preview of Slots, launching in open beta this Thursday.

Mallory breaks down how brand designers can use variables to scale brand expression in Figma. Learn what variables are, how they differ from styles, and how they support real brand use cases — from multi-brand systems to scalable templates.

The new tab menu replaces the three dot menu to make it easier to find and manage open files when your tab bar fills up.

You can now bulk share resources like files and projects with user groups.

A cool plugin by Daniel Petho simulating traditional CMYK halftone printing by generating and overlaying separate cyan, magenta, yellow, and black halftone dot screens, with adjustable colors, dot size, frequency, and imperfections.

Miggi presents the new vector point box transform controls, letting you resize selections of vector points as a box instead of nudging each point manually. This makes symmetry tweaks and proportional adjustments much faster and fills a gap in Figma’s otherwise excellent vector tooling. It’s the kind of unsexy but high‑leverage improvement that will matter more the deeper you are in vector-heavy files.

Rogie King introduces Vectorize, a new AI-powered action in Figma Design and Draw that converts any raster image into fully editable vectors in one click. This feature finally removes the need to use 3rd-party plugins or to redraw assets, while still letting you tweak paths, use color variables, and turn ​“messy” starting points into reusable components.

In this interview, Jay Dalal chats with Laura Dunn, Head of Design Research for the GM Human Interface Design Team. You will learn how Laura uses Figma Make as a UX researcher to communicate visually with designers.

New device frames are now available for the latest iPhone 17 and Air models.

The Glass effect is now generally available, and Miggi introduces a few updates: add Glass to any object, shape, or text; design Glass with non-uniform corners and precisely round each corner radius; use the Splay property to control how light bends around an object’s edges; and apply variables to Glass properties to easily connect to your design system.

“These updates give you more precision and control when bringing ideas to life in Figma Make: preview a to-do list for your more complex prompts so you can see, verify, and even edit the plan before it runs; manually edit text or delete specific elements to quickly fine-tune your prototypes; and a new navigation bar where you can route to a specific screen of your prototype.”

Doruk: ​“Photoshop to Sketch was a productivity jump. Sketch to Figma was a collaboration jump. This next jump will be the same type of collaboration leap, but for coded prototypes. This is not ​“designers can code now”. It is about keeping design work shareable and close to production. The teams that win will not be the ones with the fanciest local setups. They will be the ones who keep making, testing, and reviewing work in the same shared space.”

Joey Banks shares a simple way to get started with variables structure when he is not sure where to begin: ​“One very simple approach that’s worked well for me is separating variables into non-interactive and interactive buckets. […] Non-interactive variables describe the environment. Things like background surfaces, text, icons, and borders that don’t change based on input. Interactive variables describe behavior, such as actions, states, and feedback that do respond to input.”