We have lots to cover in this issue. Kevin Kwok wrote a popular post on “Why Figma Wins” from a VC perspective that I highly recommend reading. Apple held their Worldwide Developers Conference online for the first time and presented major visual updates to both macOS and iOS. Figma community already built kits for iOS 14 UI and Widgets, and jumped on a challenge to recreate Big Sur icons. The team at Evil Martians shared tips on using Auto Layout, while a few other teams shared their experience of switching to Figma and how it compares to other tools. Enjoy!
“Hold the Option or Alt key while in Vector Edit mode to see precise measurements between points.” The team at Figma is on fire lately — there was at least one app update in every issue since March!
That blog post made the rounds lately, and for a good reason. If you’re curious about a bigger picture of why Figma is so important, it’s a must-read. Also, see the discussion on HackerNews.
David Hoang is a Director of Design at Webflow and teaches UX Design at General Assembly. He provides an interesting look at how COVID-19 forced him to lean on Figma to be the core foundation of how they’d approach learning.
Apple WWDC, macOS Big Sur, and iOS 14
Official design resources with all the new stuff announced at WWDC, including files for all platforms and in multiple formats, except for Figma. This is a big omission on Apple’s part, but luckily we have a thriving community that quickly rose to a challenge.
Joey Banks built this whole kit before some people even watched a keynote! Awesome work and incredibly useful for anyone designing for iOS.
The team at Doist recreated the just announced Apple Widgets from iOS 14.
A template provides a foundation for designing your Big Sur app icon.
Mike Rundle brought a good point, but I liked the most how soon it became a friendly challenge, and lots of talented designers proved that it’s possible. See some examples of recreations below.
See also his Figma file.
See also his Figma file.
See also his Figma file.
In case you missed some textures lately.
Beautiful adaptations of popular apps icons for Big Sur.
The team at Evil Martians shares how designers and engineers can speak the same language by using dynamic components built with Auto Layout. The article presents multiple techniques with good animated examples.
“Join Designer Advocates Joey and Rogie as they dive into components: see them leverage constraints, apply auto-layout, explore negative frame spacing, styles, and more.”
A small timesaver if you’re designing in the browser.
Useful keyboard shortcut to keep in mind!
“Especially useful when designing icons, illustrations, and when you just wanna select that layer that is below tons of other layers.”
There are some great examples in replies. Make sure not to miss charts shared by Rasmus Andersson.
The 3rd and final part of Rogie’s series on designing a book app.
Nine things that team at Si digital learned while collaborating on projects in Figma. “If it’s a small project, two can be a crowd for side by side designing. Bring in a large project with a ton of pages and a tight deadline, two becomes the only way to deliver.”
A recap from a presentation that product designer Helena Jaramillo from Coda recently gave. “In my experience, knowing how and when to collaborate with others plays a large factor in a project’s success. Here’s a look at how I’ve worked to bring engineers into the design process as early as possible.”
What makes this switch story interesting is their previous setup with the design system source of truth in React components and automatic generation of Sketch symbols from them. While switching to Figma, they ended up manually recreating components, and that resulted in a higher quality comparing to auto-generated Sketch symbols.
While the title mentions only Adobe XD, I liked how they also tried Sketch for Teams and Framer X before settling on Figma. Their final scoresheet is very detailed and seems quite accurate.
After leading two migrations from Sketch, Abstract, and Zeplin to Figma in the past two years, Iougo Huan shares what he learned to help your team in the migration process.
A framework for evaluating design tools from the team at Figma. “To find the right fit, it’s not just about reading countless articles and reviews to identify the ‘best in class‘ option. Rather, there are a number of considerations — team size, distribution, workflow — that should inform the decision.”
No idea who needs this, but worth bookmarking just in case.
Plugin to get a little more out of the pencil tool. Seems like an essential tool for people using Figurative app on an iPad Pro — see an impressive demo from Pablo Stanley.
Lots of great recommendations in the replies.
Design & Documentation kit of Card framework components used for building G Suite Add Ons.
Salesforce published multiple parts of their Lighting Design System.
Can’t imaging a better place for GitHub to share their design system.
The project provides 700+ open-source vector icons in multiple formats. Make sure to check out their website as well.
“Figma charts library made of components. Contains most common data visualization patterns from simple bar charts to complicated heatmaps and financial candlesticks.”
Beautiful recreation by Rahul Chakraborty. Also on this topic, see the article ”How I recreated the SpaceX dashboard UI” by Ulises Siriczman.
It’s a simple design, but the idea is brilliant.