Quick replies. Sections for docs. Shape Move.
Hey there! I skipped the first in-person Config in 2020, assuming there always will be another one to attend in the future, and then Covid happened and shut everyone indoors for a couple years. The conference is back in San Francisco this summer, and I’m so excited to attend in person! Thanks for the ticket, Figma friends <3
Let me know if you’re attending, as I’d love to meet readers and folks in the community. (Also, let Rogie know as he maintains a Twitter list of attendees.) Counting days till June!
— Eugene
Sponsor
The Future of Design Systems – Leading Online Conference
June 8-9 – 2-days Design Systems conference. Insights from experts LIVE, demos, Q&As & more. Main topics: Automation of Design Systems, Headless Design Systems, Design Tokens & more. Ready to take your Design System skills to the next level? Join us!
App Updates
Quick replies in the mobile app
Amazing intro video of the 5x faster comment replies in the updated mobile apps. See also the comparison of performance before and after this release.
Stamp a teammate’s face in FigJam
Now in FigJam, you can access face stamps from anyone in your organization and add them to your FigJam file. Browse available face stamps in the More menu and easily change an existing face stamp to another teammate’s face. (Available on teams on the Organization and Enterprise plans.)
What’s New
Speaking at Config 2023
I didn’t realize how competitive the speaker selection is at Config 2023. This year the Figma team received over 950 session proposals, and during previous years they’ve had enough time for only about 25.
Creator Micro and iPad
That Creator Micro keyboard and FigJam on iPad combo is pretty slick.
How to build ground-breaking products: A manager’s guide
“In this three-part series, we’re talking to leaders and managers from teams at Shopify, Ironclad, Twitch, Uber, and more to learn about how they’re rethinking the way they work to keep pace with the outsized change in work right now.”
Using Figma
Using sections for component documentation
Sections are great for organizing components, documenting states, grouping elements in external embeds, and better visibility of component and frame names.
What I wish I knew about Figma UX/UI Handoffs
A solid round-up of recommendations from Pedro Morais on organizing Figma mockups and communicating important details to your team.
Advanced Figma Prototyping Tips & Tricks
Christine Vallaure shares a few practical prototyping techniques and advanced tips & tricks. They include using Auto Layout with Smart Animate, stateful transitions with sections, nesting prototypes, interactive components, and more. This video is also available as an article.
Advanced Figma Components Tips & Tricks
One more video by Christine, this time about components — covering everything from simple shortcuts to powerful plugins. Some of the topics include selecting matching layers across all variants, reviewing library updates, linking Figma components to a code base, using the EightShapes Specs plugin, moving components between files, swapping libraries, and using real data in instances.
Made in Figma
Sunset Drive
Cool animation by Double Glitch using a smart technique from Vijay Verma (see Figma file).
SK 2 Table Radio
A cool realistic illustration by floguo of the Braun SK2 radio designed by Dieter Rams.
Resources
NewsKit
NewsKit is the design system of News UK and is designed for helping build experiences across web products. It includes a Web Component Library and supporting themes. Check out the full website as well.
Advanced text effects for Figma
A pack from Double Glitch with a collection of pre-made text effects that you can apply to your designs with just a few clicks. Reminds me of the good ol’ days of downloadable Photoshop actions. While the pack is commercial, I suggest checking out a free demo in the Community and watching a screencast.
Week Planner
A simple FigJam widget to easily visualize upcoming events and deadlines from the Figma team.
Plugins
Shape Move
“The plugin Shape Move is specifically designed to allow you to create more dynamic and engaging animations within designs by animating the anchor points of vector shapes. An anchor point is a fixed point on a graphic object that serves as a reference for scaling, rotating, and positioning. You are able to customize the timing and easing of the animations, as well as the duration and delay of each animation.” See an impressive demo video.
Figma Export to Video
One-click export of Figma prototypes and animations to GIF, WebM, or MP4.
Include — Accessibility Annotations
A new plugin from the accessibility and design teams at eBay: “Include is a tool built to make annotating for accessibility easier — easier for designers to spec and easier for developers to understand what is required. The intent is to have accessibility considerations included during the design phase of any project, and to help with the designer-developer collaboration.”
Backstage
Building a Product People Love: Q&A with Figma’s Jenny Wen
Jenny Wen, Product Design Manager at Figma, had a virtual AMA with the Designer Fund community, where she answered questions about leadership, the value of a “riffing” culture, designing for moments of delight, and where she goes for product design inspiration, news, and updates.