On July 9th, Friends of Figma chapters around the world organize a 24-hour virtual event featuring insights and experiences from makers, thinkers, and builders. Each participating Friends of Figma chapter hosts a one-hour session featuring local speakers and stories — creating a continuous, community-led experience that spans time zones and continents. The event is free and will be recorded; check out the massive agenda in multiple languages!

Ridd shares his new approach for vibe coding a side project. He treats ChatGPT as a CTO and Cursor as an engineer, with the CTO keeping all context about the project and breaking it down into chunks for an engineer to implement. I’ve been using a similar approach for a recent project with lots of moving parts and unknowns and it’s been working well. My only tip is to pick a smarter CTO in the form of an o3 model, maybe even employing Deep Research for the original plan.

“New in Dev Mode MCP Server: Annotations are included as design context. Generated code now benefits from both the structure of your design and your design intent.”

Developer Advocate Akbar Mirza and Product Manager Yarden Katz provide a live update on Figma’s Dev Mode MCP (Model Context Protocol) server, explaining what MCP is, how it works, how to set it up, and how it helps bridge the gap between design and code. They also cover the new support for Annotations, which allows designers to add accessibility, behavior, and content information to their design files, which the AI agent can then use to generate more accurate code. Finally, they discuss the importance of aligning variable names between design and code. Don’t miss the follow-up video where Akbar and Yarden answer viewer questions from the livestream. 

You can now adjust the width of your stroke at any given point along a path with the new variable width stroke vector editing tool. Variable width stroke also makes it possible for users to draw with pressure sensitivity on tablets. Figma will set the stroke width to reflect the amount of pressure applied at each point when drawing with a stylus, which makes freehand drawing in Figma more realistic. (Still no iPad app though.)

Jamayal makes cool atmospheric illustrations in Figma Draw.

Now you can bring an existing design library to Figma Make, so the model can extract color palette and usage guidelines, typography and custom fonts, as well as core styling elements. You can also manually define rules for the model to follow via a guide​line​.md file. Watch the above video from Make PM Holly Li, or read the help article.

Designer Advocate Lauren breaks down how to create code layers in Figma Sites.

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.”