I decided not to send a newsletter last week, as the focus was on more important topics and conversations. While that’s still the case, let’s try to get back to our regular broadcasting.
In this issue, we’ll learn how to use Constraints with Layout Grids, how to control spacing with spacer components and Auto Layout, and see how a component-based approach can be applied to an illustration system. We’ll also look at how Microsoft builds Fluent UI design system, and how Dylan Field pitched Figma to the investors in the early days. Enjoy!
Better integrate Figma with your team’s favorite tools. Trigger actions in tools like Slack and Jira whenever a file or library is updated, commented on, published, and more.
You can now adjust the scale of Figma’s user interface in the Desktop App.
Now you can follow people on Figma Community. In the Community section, you can switch the view from Popular to Following to see updates only from people you follow.
The Increment is a cool magazine published by Stripe, with every issue focused on one topic in how teams build and operate software systems at scale. The topic of the last issue is Frontend, and this article explores how integrated design tools are reshaping the workflows of the UX, UI, and frontend teams.
The article compares three main players — Sketch, Figma, and Adobe XD. Figma is the recommended tool, but Adobe XD has its own market with more complex prototypes.
A good writeup of a complete redesign accomplished in 8 weeks, from branding research to final implementation.
While working on the book, I learned about a powerful way to arrange objects using a combination of Layout Grid and Constraints. I wrote a short article for Prototypr.io explaining how it works.
An interesting approach of using pre-defined spacer components and Auto Layout for managing space in design mockups.
“Auto Layout has been around for a while, but not everyone’s aware of the benefits it brings. It doesn’t replace constraints, they’re still very much needed. The trick is to use the right feature where necessary. I want to show you how to combine components, constraints, and Auto Layout for the best results.”
I wrote about the illustration library and plugin Blush in the last issue. Now, Elsma Ramirez shares how she created The Munchies collection for it using a component-based approach.
Designer advocates Tom Lowry and Rogie King dive deep into some lesser-known capabilities of Figma’s prototyping tools.
Good advice on when to use a fill opacity vs. layer opacity.
When you don’t use an Auto Layout, a Drop Shadow with blur set to zero may be a nice alternative.
A detailed look into how Microsoft is building a cross-platform Fluent Design System. They have an interesting take on building a Figma plugin to move away from fixed values and toward consistent design tokens that later translated into platform-specific code values.
Pavel Laptev shares the experience of using a design system approach in Alteos, including how they use Figma API to share design tokens with code.
Gleb Sabirzyanov shares his starter kit for creating your own design system. It includes inputs, buttons, tags, dropdowns, tabs, type, color, etc. He also wrote a Twitter thread on how he used his Master plugin for building it.
Jules Forrest and Dina Sporer from Credit Karma share how their team converged around a design system workspace to improve their design and delivery process.
Unn Swanström tries and reviews ten popular plugins.
“We sorted Figma’s plug-ins on most downloaded and we took on testing the top 50 in the list. Here is what we found out. “
Varun Vachhar walks readers through the process of building a simple confetti plugin from scratch.
Shorten, edit, and copy all your Figma share links.
Preview your responsive designs inside Figma.
Manage the words across your team’s product with a central source of truth.
A library of 110+ design components, based on a cross-platform mobile development framework Ionic. Use code “launch25” to get 25% off.
Layers is a good-looking design system built with a distinct focus on accessibility.
A beautiful pattern, inspired by African Art.
A description of how Figma calculates font metrics. Useful mostly for font foundries and type designers.
From the Headquarters
Dylan Field shares how he and Evan Wallace came up with the idea for Figma. In the first part, he shares his original pitch in the Thiel Fellowship application from 2011.
Next, Dylan pitches his company to Daniel Gross as if back in 2013. Ten minutes of mind-bending WebGL and JS demos.
“At Early Stage, we’ll talk to Field about staying patient during the product development process and then transitioning into an insane growth sprint. We’ll also chat about the fundraising process, how he built a team from scratch, and how he took the team remote in the midst of a pandemic, as well as chatting about the product development strategy behind Figma.”
“Twice a year, we set aside a week for everyone at the company to explore a project outside of their daily responsibilities. Unlike hackathons — which are largely built for engineering and design — Maker Week is for everyone, across teams and skillsets.”