I shared the teaser in issue #132, but last week Builder​.io introduced Visual Copilot, ​“a completely reimagined version of the Builder Figma-to-code plugin that will save developers 50–80% of the time they spend turning Figma designs into clean code.” The major difference between Visual Copilot and previous design-to-code tools is a specialized AI model that was trained to solve this problem. The features include one-click conversion, automatic responsiveness, extensive framework and library support, customizable code structures, and easy integration with the existing codebase.

One of the most exciting parts of this announcement is still in private beta and targeted at teams with well-maintained design systems. This feature in Visual Copilot uses AI to map reusable components in your Figma file to those in your code repository and generates code using your existing components when you have them. This could be genuinely useful to get the first rough version ready in no time.

Organizations can require approval for using plugins and widgets, and now Akbar shows a new way to request it straight from the plugin’s popup. They’ve also made it easier for admins to review the requests. (If you’re a plugin author, consider specifying networkAccess in the manifest.)

In addition to setting the default role, admins can get email notifications to keep track of who has upgraded and what action led to their upgrade.

A new setting for more control over billing in Figma — admins can set the default role for anyone joining their Figma account to be editor, viewer, or viewer-restricted.

“Join this learning session where we will share tips and address questions around how to onboard your engineers to Dev Mode. We’ll cover how to adjust your workflows to get the most of our new features, setting up your files and design system, and onboarding your developers.”

Ridd is back with a video and a thread on choosing the right variable types for updating the state of components.

“Demystify the synergy between Figma Variables, Figma Styles, and Tokens Studio — a trio of ways composed to develop your design token workflow.”

A smart way to utilize line-wrapping in Auto Layout to achieve word highlighting effect.

Alright, so in the last issue, I wrote that ​“plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.” It didn’t take long for a better example! Ben shows a new feature in Sidekick AI (using GPT‑4) for dropping a link to a frame in a Figma file to improve the code generation and even fix visual bugs. This looks freaking amazing.

Last week at Zoomtopia 2023, Figma announced its Figma for Zoom app, enabling teams to collaborate on Figma design files or use a FigJam whiteboard via Zoom. Users will no longer need to share their screens or switch tabs, instead gaining increased interactions and face-to-face collaboration. Zoom users will be able to install the new Figma for Zoom app from the Zoom marketplace on October 16, 2023.

New ways to manipulate colors and glyphs in Figma, coming directly from the team. #18: Two new blend modes that are most applicable to designing for iOS, as explained by Rogie — plus darker (linear burn) and plus lighter (linear dodge). Now we can do a classic dodge and burn! #19: Scrubbable inputs in color pickers. Use your mouse to drag or ​“scrub” individual fields to get precise control over your colors. #20: Alpha values in color inputs will be applied to the color’s opacity. #21: When outlining a stroke within a text node, the text is now converted into a group of vector nodes, one per text glyph.

New frame presets and device frames for iPhone 15, 15 Plus, 15 Pro, and 15 Pro Max. Moreover, Keeyen created vector iPhones for prototyping and shared them with the community.

“In this livestream Hanju Kim and Marvin Messenzehl from RTL+ dive into the file to understand the intricacies of designing for a wide array of platforms while maintaining impeccable structure and facilitating seamless collaboration.”

“Copy as PNG” is a lifesaver. I even use it when moving mockups to FigJam for presentation to keep things simple.

“To replace one icon with another, press and hold Command-Option while dragging a component onto an existing component in your document.”

This result is based on an exported PNG, so plugins for code generation in Dev Mode using GPT‑4 might provide an even better result.

Molly shows how to add real interactions to your prototypes. Variables make this slide show really easy to make.

Luis is rethinking the relationship between variables and styles. The future typography tokens are a great example, but even today this applies to styles with more complicated color fills. TL;DR: ​“Create variables in a private space, feed them into styles, and publish only styles to consumers.”

Jake Albaugh and Emil Sjölander discuss using AI-based code generation (codegen) tools for augmenting your design to development process, not automating it. ​“Codegen isn’t just an automated, hands-off replacement for translating design to code; it’s best as an augmentation for you to more quickly understand design changes, and to keep your team in sync.”

A few small tweaks to the visual experience of designing in Figma. #14: Whoa, now you can see both horizontal and vertical offset when hovering over objects while holding Option! (Used to be only one or another.) #15: Click targets are no longer jumping around when removing effects. (This one was pretty hilarious, but not in a good way.) #16: New red indicator lines show when you’ve reached min and max widths — even when typing or resizing paddings. #17: Arrow ligatures now work in section and frame titles. (FWIW I have a better solution!)