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!)

Molly Hellmuth with tips on the best ways to name, organize, use, and theme color variables.

This one is a more practical and hands-on guide to Figma variables, with detailed instructions on implementing, organizing, applying modes, publishing to the library, and transferring them to code.

New research from the Figma’s Insights team: ​“In a recent study we commissioned from Forrester Consulting, researchers found almost 9 out of 10 respondents experienced some type of barrier in the product development process, with 60% reporting either a lack of alignment across teams, difficulty making decisions, or lengthy development cycles. These barriers aren’t necessarily new, but have been amplified by three major forces at work: 1) More people involved, 2) More distributed work, and 3) More work in progress.”

On collaboration: ​“One striking finding from Forrester’s study was that the most successful teams collaborate more and also see improving this collaboration as critical. According to the study, successful teams want to improve feedback on work in progress, get more people involved earlier, and increase cross-team collaboration.” On that note, see upcoming events by Friends of Figma for anyone who regularly facilitates meetings and cross-functional collaborations.

You can now collaborate on Figma and FigJam files directly in Google Meet.

A cool bunch of improvements to Figma this week! #10: Select and copy items on the canvas while viewing version history. #11: Copy the URL of a file via Quick Actions. #12: When pasting links over existing selected text, you can now paste and match style so the text you’ve selected will be replaced by the URL or email address you want to paste in, rather than auto-link-ifying the selected text. #13: Exporting objects with a multiplier applied no longer occasionally adds an extra pixel to width and/​or height.

Export icons from Figma straight to React, Vue, or Svelte components.

Something new is coming up in October 👀 The landing page is a smart way to give a peek! ​“Builder​.io is the only headless CMS that gives developers, marketers, and product managers the freedom they need to ship fast, flexible, multi-channel experiences without overwhelming your backlog.”

Rad product and home page! ​“ShaderGradient is a design tool to create beautiful moving gradients. Make stunning visuals by adding natural movements and effects to the gradient. It’s available on your favorite tools, like Framer, Figma, and React.”

In this video, Sam walks through the features in the Tokens Studio plugin for Figma that allow the creation of variables that are synced to design tokens.

Mini-series showing how to use variables for advanced prototyping on a few example projects by the Design Pilot YouTube channel.

A new video from Lauren with a deep dive on when to use variants vs. variables with modes.