Are you ready for Config Europe? It’s happening next Thursday, and I can’t wait to see if new features will be announced in the opening keynote. Now may be a good moment to review features announced on the first Config earlier this year. The Figma team shipped a lot since then, but it seems like something happened to the Font Picker redesign along the way!
If you haven’t registered yet, there is still time until September 10th. (I assume the video recordings will be shared later.)
— Eugene
App Updates
Figma redesigned admin settings for Figma Organizations. To introduce the changes, they recorded the whole playlist of demo videos.
What’s New
“An appreciation piece on how well-modeled the Figma Community feature is and how it can possibly change the way the world designs digitally.”
A former designer at Lyft makes the case against using Figma in a large organization. Because Abstract uses a real Git repository to store Sketch files, it’s “allowing for a structured approach to file organization at a micro and macro level.” I’m not familiar with permissions on an Organization plan, but that sounds like a nightmare: “…imagine you have thousands of business-critical files shared by 250 designers all of which are editable by the whole team by default!”
Lennon Cheng shares his experience of creating Figma plugins to improve and automate the design process. He is a designer without much development experience, and this makes his take especially interesting.
Jason Jun shares the whole process of building a plugin, from the idea, to developing a data structure, interface design, and writing code. “The process of repeatedly finding relevant documents while using design tools can be cumbersome. This gap between the documentation and design tool seemed to be very suitable for a plugin to fill.”
“I struggled with the Figma Plugin examples to understand how to access data from the canvas and into my app. The Figma Plugin examples have a React application sample which sends data to the canvas, but not the other way around. While this is seemingly straight forward, I didn’t immediately absorb the explanations from Figma Plugin website. In retrospect, the way to do this is quite simple.”
The team members from Shopify, Condé Nast, and Harry’s shared their experiences creating multi-brand design systems in a livestream a few months ago. This post shares some of the highlights from it.
Using Figma
A solid guide to Figma for developers from Smashing Magazine. It’s focused on navigating the app, measuring dimensions, exploring styles, exporting assets, getting CSS from the Code panel, and other parts of the developer handoff.
A branding and digital agency BASIC worked with Herman Miller on redesigning a Design Within Reach (DWR) website to replicate the experience shoppers might have in a showroom. They used Figma prototypes for usability testing and took the redesign as an opportunity to create the first design system for all of Herman Miller brands.
A smart way to export code with syntax highlighting to Figma.
Joey Banks shows a nice use case for combining Layout Grids with Constraints. For a deeper dive, check out my older article on this feature.
A Twitter thread on organizing design files in Figma. The approach includes adding a mini doc and a thumbnail, annotating elements and edge cases, grouping components, marking Work in Progress, and organizing pages.
Miguel Cardona shows how cool and powerful Vector Networks are. The vector editing toolset in Figma is unique and worth getting familiar with.
Tim Benniks looks at how Figma, Zeplin, VS Code, and Storybook can work together to provide a much better experience for developers.
Alex from the Headway team explains how to build a simple data visualization kit in Figma. He also discusses the pros and cons of building a library vs. using a plugin for this kind of work.
Three Figma community resources to get you started on your next web, iOS, or Android design project. Hope Community Spotlight will become regular series!
Rogie and Joey talk about best practices for building cards, dialogs, navigations, forms, and other forms of complex components.
Testing a design system to see if the component library is robust enough in real-world scenarios.
Rogie shows the best practices for documenting your design system using Figma and other tools.
Resources
A gorgeous library of fully customizable icons and illustrations from Meng To. Includes a custom app that lets you change style, stroke width, and size of the assets.
Avocode Write is a tool for copywriters, UX writers, and content editors to seamlessly collaborate with designers and design teams.
Free and fully editable design system built in Figma.
A comprehensive UI Kit containing Material Components and Android 10 system components is designed to be the most faithful recreation of the MDC library for Android.
A toolbox of user research resources from Figma to help you visualize and organize the insights you gain from your research.
“Virtual Figbooks is for everyone who is looking for a title to read or would like to contribute by adding titles and help out the amazing community of figmates.”
Plugins
Create high-quality GIFs from static images and mockups. Make sure to check out a fun demo.
Easily facilitate collaborative design sessions directly in Figma.
Ever wondered what’s the best name for that specific shade of the color? This plugin lets you select any node with a solid fill and see the closest color’s name.
Backstage
Engineer Aashima Garg shares an inside look at Figma’s enterprise team and their work, spotlighting a recent project to improve the Organization admin experience.
Gifmock
Workshops
Color Name