Prototyping updates. Gradient tool. Designing for delight.
App Updates
15+ improvements and new features come to prototyping
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.
Gradient tool improvements
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).
Updates to managing team and project access
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.
Approved libraries
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.”
In file videos and images can now be localized to the EU
“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.”
What’s New
What’s the actual difference between Zeplin and Dev Mode?
Get a straight answer from Zeplin’s co-founder Berk Çebi on March 7. Berk is passionate about helping teams achieve harmony and do great things faster, so he’ll be sharing core principles that set your team up for success — no matter what tools you use — plus practical tips and examples for info architecture for devs, organization, and documentation in Zeplin.
Dynaboard is joining Figma
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?”
The art of designing for delight — Jenny Wen
Jenny Wen is the founding designer at FigJam and the person who brought it to market. In this interview with Ridd, she shares invaluable insights about FigJam’s product strategy, adding delight to software, and attacking ambiguity early in the process.
How AI will influence creative tools: A conversation with Replit’s David Hoang
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.”
Meet the maker: Nicole Boettcher’s Figma-designed quilts
A fascinating story of using Figma to design and craft… quilts! “I would say that I design 80% of my quilts in Figma before I even cut the fabric. Other quilters improvise much more than I do, but I think my UX background and experience preparing assets for engineering teams makes me want to go in with a plan. Everything needs to be measured to the quarter inch, and Figma is a great tool for that.”
Config24 Meetups & Events Guide
If you’re hosting or participating in a community event or meetup during Config 2024, please submit it to Kyler Phillips’ unofficial guide!
Using Figma
Advanced Figma tips & tricks 2024: little gems we love
Christine Vallaure with the best Figma tips and tricks of the year! As you’d expect, this year’s edition of her regular roundup has a strong focus on Dev Mode, variables, prototyping, min/max values, and slot components. Thanks to Christine for sharing a friend’s link with Figmalion readers! If you prefer watching to reading, check out her free video with these tips.
Dark and light modes
Ridd with a step-by-step process for nailing dark and light modes in Figma. Love his way of thinking about counterpart colors on the opposite ends of the spectrum for specific use cases — texts, backgrounds, borders, and icons.
Guide: Component naming manifesto
Luis shared a set of recommendations on how to approach naming conventions for components, props, and values within Figma component libraries.
Still not a fan of Auto Layout?
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.”
Figma tutorial: Export from Figma design
Exporting assets might seem easy, but there are a lot of nuances to get it right. “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.”
Office hours: Process and communication, AMA
“Effective product development hinges on a well-defined process and seamless team communication. However, implementing these concepts can be more challenging in practice.” AMA discussion hosted by the team of advocates — Lauren Andres, Akbar Mizra, Mallory Dean, and Anthony DiSpezio.
Made in Figma
Responsive dashboard
The beauty of Auto Layout in action by Dmitriy Bunin.
Resources
Droit UI
“Droit UI is a highly customizable Figma design system with over 7,000 UI components, specifically designed to streamline the workflow of creative professionals, agencies, startups, and SaaS businesses.”
Pattern Texture Pack
36 free hand-crafted textures that can be tiled and recolored. Made by Mark Bennett, who crafts beautiful skeuomorphic interfaces and sells elaborate Figma projects at his community page.
Plugins
Locofy Lightning
“Locofy Lightning converts Figma designs to frontend code in 1‑click, powered by LocoAI’s Large Design Models (LDMs). Get responsive, interactive designs & reusable code components with better class names.” Won 1st Product of the Day at Product Hunt!
Swizzle
“Swizzle is a multimodal, low-code tool for making web apps. Use natural language, visual aids, or just code to build faster than ever before. Deploy to GCP in one click.” Won 2nd Product of the Day at Product Hunt.
Backstage
Figma Caters to Developers with Dev Mode and AI Integrations
An interview with Figma’s CTO Kris Rasmussen about Dev Mode and targeting developers. His take on low-code and no-code tools, like the two featured above: “…we’re actually really supportive of Locofy and also Anima — another example of one of these plugins on the Figma ecosystem. So we’re definitely thinking about their needs as well, as we continue to evolve.“ He added that Figma itself is looking at similar problems, but “at different ends of the spectrum”: “So we’re very much focused on helping to make the actual design process, the act of essentially visualizing what’s in people’s heads and aligning around it, more accessible and easier for the organization to participate in.”