Ando for AI art. Figma at Microsoft. Optimize color styles.
Sponsor
4 ways to overcome Figma handoff challenges
One of the biggest struggles in bringing a product to life is handoff between designers and developers. Here are 4 ways to make handoff clearer, easier, and faster.
App Updates
Figma app for Microsoft Teams
“The Figma app allows your team to riff on ideas together in real-time, present designs to get stakeholder feedback, and share the latest updates with everyone — without ever leaving Microsoft Teams.” See also the conversation with Jon Friedman, Corporate VP of Design & Research at Microsoft, about collaboration, the importance of design systems and toolchains in freeing up time for ambitious work, and why it’s worth it to change a company’s culture — even if it’s hard.
Searching for files
Nice improvement to the search — now you can find files based on page and frame names, in addition to the underlying text.
What’s New
Ando plugin for AI art
This demo of the upcoming Ando plugin blew up over the last few days. Antonio Cao is working on a plugin using Stable Diffusion to generate AI art based on visual and text prompts. The new wave of AI design tools may be the biggest change in our industry after the introduction of multiplayer by Figma in 2016.
Microsoft employees love Figma, and it’s testing the company’s cozy relationship with Adobe
At Microsoft, Figma is winning over Adobe XD as their design tool of choice. Jordan Novet wrote an interesting profile for CNBC showing how several acquisitions and internal demand led to its rise in popularity, even while Microsoft and Adobe have worked together for over 20 years.
Diving Deeper: What Makes Collaboration Click?
In this live stream, Figma’s Cristen Torrey, Director of Product Research, and Andrew Hogan, Insights & Analysis Lead, dive deeper into the recently launched collaboration report. They go behind the scenes of the research, answer questions, and help identify what you can do to make your next meeting, day, or week better.
In the file: The first 90 days of the Head of DesignOps
Salome Mortazavi, Head of DesignOps at SiriusXM Listener, and Adam Fry-Pierce, Chief of Staff at Google, share what the first 90 days can look like for your DesignOps team.
In the file: When inclusive design is your jam
“In this panel, four industry-leading femmes (Anna E. Cook, Shell Little, Alexis Lucio, and Tolu Adegbite) discuss the practice of inclusivity and accessibility in design. They dive into what it means to integrate accessibility into designs, inclusive design thinking, the tools designers can use to empower their work, and the different roles designers take on in inclusivity practices.”
Using Figma
Optimize color styles for your users, the design team
Molly Hellmuth gives a few practical recommendations on creating a bulletproof color system.
Everything Developers Must Know About Figma
Christine Vallaure highlights some of Figma’s features and possibilities to help you build a design that aligns with code as much as needed and improve your teamwork.
10 Commandments in Figma
Danny Sapio shares a few best practices on using Figma for max efficiency: make components, use Auto Layout and don’t use groups, apply consistent spacing and styles, keep files organized and archive old designs, learn shortcuts, leverage community files, and present your work smoothly and cleanly.
7 common Figma design problems (and how to fix them)
Practical ways to overcome seven common Figma design issues caused by Auto Layout, constraints, groups, frames, components, and duplicates.
How to safely upgrade and deprecate components in Figma
A quick look at the process of updating an existing component with Component Properties and releasing an update with minimal friction for the design team.
How to make advanced animations in Figma Motion plugin
Pavel Babkin explains how to use link animation for layer properties in his popular Motion plugin to easily animate complex scenes.
How to choose the timing for UI animation?
The makers of the Aninix plugin explain animation timing in this detailed Twitter thread.
Favorite keyboard shortcuts
Patrick Morgan asked designers about their favorite Figma shortcuts and shares the top 10 recommendations based on 220+ responses.
Zoom and opacity with the number keys
Anthony DiSpezio with a great tip on controlling opacity and zoom level with the number keys.
Building blocks: Diving into documentation
In this episode of Building blocks, Figma Designer Advocate Chad Bergman and Product Manager Jacob Miller will share updates to documentation in Figma and some best practices.
Plugins
Leading Trim
Trim text elements by nesting them within frames to remove space above capital letters and below the baseline. This removes the bounding box and makes text behave as every other element in your layout. See also this thread by Roman Shamin on how font metrics leading to equal space above and below the text can make digital design and development easier.
Backstage
The Chrome Cast 186: Talking web-based collaborative design with Figma’s Noah Levin
The Chrome Cast podcast interviews Noah Levin, the Director of Design at Figma. Besides talking about Figma and FigJam, they discuss Google for Education’s partnership with Figma to bring the collaborative design platform to education Chromebooks across the US and how Figma is leaning into the education space.
Julia Kestner: (In)consistencies in Design Systems
Hatch Design Talks podcast interviews Julia Kestner, Manager Designer Advocate at Figma. With Figma being in the hypergrowth phase and expanding in Europe, her job comes with exciting new challenges. The host spoke with Julia about the role of the Designer Advocate, the dangers of becoming too precious with one’s design system, and what we can expect now that Figma is putting more resources in Europe.
My summer as a Figtern
Jaelyn Brown shares her experience as an Early Career Program Manager Intern with a focus on developing engagement for HBCUs (Historically Black Colleges and Universities) and HSIs (Hispanic Serving Institutions).
Cool Thing
Martian Grotesk font
Speaking of the font metrics, I’ve just bought the Martian Grotesk font family for the upcoming redesign of my personal website. Its author Roman Shamin put a great deal of work into making this font a fantastic choice for web and digital design — equal vertical metrics for perfect positioning inside a bounding box, glyph height sticking to the pixel grid at common sizes, case sensitivity, and a variable version. It’s one of the most thoughtfully made fonts for the UI work and currently it’s 60% off until September 4th. (See also his free open-source font Martian Mono.)