Resources

Big day for the Figma community! After years of making official design resources only for Sketch, Adobe XD, and Photoshop (!), Apple finally launched a Figma community page and published a UI kit for iOS 17 and iPadOS 17. (Interestingly, this seems to be the first community resource requiring accepting Terms of Service before opening.)

Let’s use this opportunity to thank Joey Banks for his community service in building many iOS kits over the years, starting with iOS 13!

A different kind of plugin — Chrome extension that lets you export Figma library or component analytics to CSV and enable several CSS overrides to adjust the UI.

Vijay Verma is killing it with another movie-inspired artwork. Don’t miss the closeup details.

Kyler Phillips launched a really useful unofficial guide to events and meetups taking place during Config 2023 in San Francisco. I’ll be there for a few days and try to join some of them, depending on jet lag and energy level.

Luis Ouriach made a starter kit for documenting your components and tokens on the Figma canvas. ​“With this method, we take a set of core styles (primitive tokens), and then ​“alias” them into tokens specific to components. It’s worth noting that aliasing is not technically happening, we are using the hyperlink feature within Figma to link from our semantic, component tokens back to the primitive styles within the same file.” Love seeing a Designer Advocate publishing a token starter kit a few weeks before Config 👀

A highly customizable component library of onboarding and activation components. ​“This template takes the most commonly used onboarding patterns in modern software products (checklists, cards, etc) and makes them super easy to customize for your next feature launch or app refresh.”

FigJam now got a dedicated iPad app. I hope they’re setting the ground for a full-featured Figma for iPad app? Anyway, the new icon is dope!

A useful freebie from Luis Ouriach — 360 badges, pills, and tags in the full-color palette range.

A new set of beautiful SVG icons crafted in Figma. The free preview includes 100 basic icons.

600 icons in 17 categories designed on a 24px grid by Daniel Wodziczka ($7).

Brad Frost published a sample design system governance process based on his old blog post.

Love this new app’s approach — instead of keeping your design system in one place and documentation in another, FigMayo lets you create and publish docs directly from Figma. Any change made in Figma to naming, structure, components, or notes can be published automatically, drastically simplifying and speeding up your workflow.

A set of social widgets for Bento with a little extra depth from Double Glitch.

Designer Lynx is a resource hub for all things Figma and product design.

A simple FigJam widget to easily visualize upcoming events and deadlines from the Figma team.

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.

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.

A cool realistic illustration by floguo of the Braun SK2 radio designed by Dieter Rams.

So happy to see that this geeky tool hit 2nd place as a Product of the Day at ProductHunt last week! Its author Roman Shamin collaborated with me on Accessible Palette in the past and built a few other projects featured in this newsletter. While the UI of the color picker may seem complicated at first, its guiding principle was educating and demonstrating new concepts underlying the OKLCH and LCH color spaces. It’s my go-to tool for working with these color spaces and wide-gamut P3 colors.

For additional context, see an in-depth article OKLCH in CSS: why we moved from RGB and HSL by Roman’s co-author on using OKLCH color space in code, as well as my article Accessible Palette: stop using HSL for color systems on using perceptually uniform color spaces as a foundation for design systems.

This template provides simple, functional, and customizable tools for simplifying the developer handoff process and streamlining design documentation. Learn more about the design audit process in this guide: ​“A design and UX audit is a comprehensive evaluation of a product’s user interface, functionality, and overall design.”