Another week, another topic for designers to argue about (even Figma had to chip in)! 100% agree with Yasir: “Designers skeptical about Figma’s Auto Layout probably haven’t tried coding their designs. Once you do, you’ll see everything in code is about stacks and Auto Layouts. It’s a basic principle, not a style choice.”
Still not a fan of auto layout? pic.twitter.com/6QUlfuiZBG
— Yasir (●ᴗ●) (@yasirbugra) February 28, 2024
Replit Vice President of Marketing and Design David Hoang talks about how AI is reshaping the future of product design and development, and the role it’s playing in the company’s team and products. On synergy between design, engineering, and AI: “Whether you currently work more in engineering or design, AI offers augmentation for you to do both. Engineering and design are on a course to become one tightly woven discipline.”
On hiring with regards to their Artificial Developer Intelligence (ADI) strategy: “At Replit, we’ve always leaned towards hiring multidisciplinary designers who understand the technical depth it takes to create software and bring it into the world. Each designer has the output of three to five designers that you’d ordinarily work with. They code, prototype, review pull requests, do unit testing, facilitate research sessions, and run workshops, too.”
Figma acquired Dynaboard, a collaborative low-code IDE for developers building full-stack web apps.
Here is what stood out to me in one of the interviews with Dylan Field I shared last week: “Dylan considers using this fee to do more strategic mergers and acquisitions in the future, and has an insightful way of thinking about what kind of products that could be: “Let’s figure out the value chain of what it takes to think about, get buy-in for, design, code, ship, and measure software. How do we complete that value chain?”
Org and Workspace admins on the Enterprise plan can now mark libraries as approved for the organization or workspaces they manage. “Approved libraries are badged with a checkmark and pinned to the top wherever they appear — be it in the assets panel, the properties panel, the admin console, etc. Approved libraries help users know which libraries are sanctioned by their admins and help them find them more easily.”
“We’ve expanded our EU file hosting capabilities to support localization of videos and images in addition to previously supported assets. For Figma Enterprise accounts that are configured for EU file hosting, this upgrade will be applied to your account automatically with no action required on your part.”
A few updates to granting or managing access to teams and projects (currently being rolled out). These include improved UI for the teams and projects share dialog, roles for team members on a project, and audience setting on teams and users will have the ability to directly control the audience setting on projects.
A big release of “squeaky stairs” fixes to the prototyping! First, the inline preview now shows mobile prototypes in draggable and resizable device frames. For a deep dive on this, see the article Behind the feature: Inline device frames.
Second, there are multiple improvements to the editing speed — copy and paste noodles and interactions to a different element; delete noodles and associated interactions; delete a starting point by dragging the “flow label” outside of the frame; disable all shortcuts on a prototype; enable multiple “After Delay” events on every node; use the “Change to” interaction on a nested variant; auto-exit the Scale tool when switching to the Prototype tab; copy a link to the selected flow; resize the inline preview to the actual size of the prototype, and auto-focus on the input when creating a new flow.
Third, improvements to prototyping with variables — when copying and pasting an element with a local variable bound to it, Figma will create a new collection with the copied variable; overlays now inherit the mode of the frame linking to them; negative numbers support in the expression builder; support for !
or not
in a boolean conditional check (yay!), and string values “true” or “false” can be bound to instance visibility in addition to booleans. Prototyping performance has also improved, cutting down loading spinners by 22%.
Finally, the width and height values can now be set to zero, so we don’t need to rely on the 0.001 hack anymore! For a nice roundup of the above improvements, see threads by prototyping PM Garrett Miller and designer Niko Klein.
Creating beautiful gradients in Figma just got easier! New controls for flipping and rotating gradients (see why they’re separate controls), displaying the gradient stop position in percentage (another yay from me!), and even better-looking defaults (although they’re bringing back the old behavior if you add a gradient on top of another fill).
Working with gradients in @figma just got a little easier!
— Jackie Chui (@jackiechuichui) February 28, 2024
Here are some highlights from this little big update:
1. Default gradients now look better and adapt to your layer's shape pic.twitter.com/uhhQbNQiNO
More Figma-to-code solutions: “Trace helps you convert your Figma designs to live SwiftUI prototypes within minutes. You can also preview, view code, edit, export, etc. on the fly. Trace uses AI to write SwiftUI code and compile the entire project within minutes.”
Replit launched an experimental Figma plugin that converts designs into runnable React code. “Generate a Repl directly from Figma, and instantly share a static React app with your team. Then, use Replit AI to add functionality and get your code production-ready.” Read more about this experiment in their blog post.
A new plugin by Lichin Lin to bend your text into a circle, square, or even arch shape.
Tom Biskup shares practical tips on improving typography in your project — learning from others with a Chrome plugin, setting your type in Figma, keeping it simple by limiting choices, thinking in systems and setting a type scale, using ChatGPT for filler copy instead of “lorem ipsum”, and picking fonts from great foundries.
“Figma Shortcut Master Game is a cool prototype made in Figma. It’s a fun way to learn Figma keyboard shortcuts or test what you already know.” There is a total of 11 levels but they’re pretty challenging! Impressive what you can achieve with just a Figma prototype.
Designer Advocate Lauren Andres shares tips on how to streamline handoff when it’s a constant stream of WIP designs, communication, and collaboration. Her advice involves using annotations in Dev Mode, adopting a shared language, organizing your files with sections and “Ready for dev” statuses, archiving old designs, and leaning on components.
Dualite converts Figma designs and prototypes to React and HTML/CSS. “Create reusable code components with semantic naming from Figma variants in a single-click. Use tagging for turning static layers to external links, input fields, buttons and embeds.”
“You can export content to share designs with others, move content between tools, or save copies of your work outside of Figma. In this video, we’ll walk through how to export content and go over ways to troubleshoot common export issues.”
A set of benchmarks to level up the quality of your Figma components and define what constitutes a good component. The content is divided into two sections: “Design”, featuring items that can aid in crafting a component; and “Testing”, containing considerations for testing your component before final publication.
Anthony DiSpezio shows how merge reviews now ignore top-level sections, allowing you to review changes at the frame or component level.
🎁NEW @figma UPDATE: Better compatibility with sections when reviewing branch merges!
— Anthony DiSpezio (@adispezio) February 15, 2024
Merge reviews will now ignore top-level sections, allowing you to review changes at the frame or component level. pic.twitter.com/SmRgD6a7yH
Stumbled upon this old blog post from 2019 by Alex Harri, one of the engineers behind Figma’s Vector Networks. Fascinatingly deep dive! “This post can be thought of as an introduction to a really interesting problem space, and as a resource for people interested in making use of some aspects of Vector Networks for future applications. I hope it succeeds in providing value to both developers being introduced to new concepts and ideas, and to designers interested in learning more about the tool they know and love.”
A promising new app providing the presentation interface for Figma. Design your deck templates in Figma, instantly sync the template to deckd, and start building your presentations. Deckd lets you edit all text elements, present directly or share via link, and decide who can see what with access control.