Illuminating dark mode. Component library. Five tips.
Sponsor
Don’t stress about organizing or explaining your design files
With Zeplin you can quickly organize your design file into consumable bites. Name sections, add descriptions and share simple links to your designs.
App Updates
Improvements to Figma and FigJam
Nice shipment of improvements to the FigJam iPad app, branches review in Figma, and email notifications. You can also import the contents of a Miro board into FigJam now!
What’s New
Illuminating dark mode
Fantastic article by Shirley Miao about the complexities and hidden challenges of building Figma’s dark mode: “We wanted to build a solution that wouldn’t just solve the existing need for a new feature, but would be flexible enough to scale with us as the product evolved. Doing so would make it easier to onboard new engineers, tackle unforeseen challenges, and introduce new themes down the road. The trick was developing an approach that would be easy to implement and maintain, while also ensuring that it was regression proof.”
Why Design Systems are still disconnected
Interesting talk by Zeplin’s co-founder and Head of Product Berk Cebi on the evolution of design systems over the last 10 years, the role that design tools play in this process, and the unfortunate disconnect between our design components, code, and documentation. He suggests design tokens may be one of the potential solutions and shows how they can be used to connect the parts of the design system.
Free Figma Component Library
That’s a really smart idea — browse a library of pre-made UI elements and copy-paste them straight to Figma. Categories make browsing the collections very easy. May be valuable for rapid prototyping at the early stages or for exploring ideas. (Keep in mind it didn’t work for me in Safari, but works perfectly in Chrome.)
Using Figma
5 of My Favorite Figma Tips
Joey Banks is back with five advanced Figma tips — renaming layers in bulk, selecting all objects based on a specific property, Spacebar’s superpower, private components, and using descriptions to improve search.
Building a culture of laughter and learning at Meesho Design
Figma is a natural place for the design team to get together, play, interact, and bond. Love this story about building a culture at Meesho Design: “While we brainstormed multiple ways and ideas to resolve this, we noticed that it was collaboration over Figma and struggles with Auto-Layouts that would create immediate bonds between us designers.”
Capturing feedback
Post-it notes are great for gathering and organizing feedback. (I often use comments as to-do’s, but also copy a post-it note from FigJam to my Figma files for higher visibility and questions.)
Accessible text color
Never noticed this before, but it’s such a nice touch! 👏
Study Hall: FigJam whiteboard basics for education
Miggi shows how to create a FigJam file, maximize the FigJam collaboration features, navigate the FigJam toolbar, add text, images, and stickers to your file, use sections for organization, and finally, how to invite others to your FigJam file.
Plugins & Widgets
Gist
Interesting plugin from Mike Wilson for writing documentation and attaching it to your components.
Ruri – Gradiator
A new gradient generator inspired by Apple’s gradients.
Resources
System 22
A good-looking and totally free UI kit.