Getting unstuck. Icebreakers. OKLCH color picker.
Sponsor
How to keep your user journeys organized
Building user journeys and flows is an essential part of design file organization. This involves building out happy paths, unhappy paths, edge cases, etc. See how Zeplin can help you build a fully comprehensive user journey.
Using Figma
10 Hacks for Illustrating and Drawing in Figma
Danny Sapio with a few tips on working with paths, anchors, and fills to speed up your drawing workflow in Figma. This article is also available in a video format on YouTube.
Boost your UX Writing process with FigGPT, a ChatGPT Figma Plugin
I mentioned the FigGPT plugin in the last issue, and now Edward Chechique wrote a detailed walkthrough of using this plugin. It requires an OpenAI API key but then provides direct access to ChatGPT prompts and tools for UX writing directly from the Figma document.
What is the single source of truth: Storybook or Figma?
The team at Anima asks a controversial question, and makes a strong case for Storybook being the single source of truth: “Even though products begin with the components in the design, the end-users of those products will actually experience the components from the code. The single source of truth, then, is what users will actually see in the end.”
Getting stuck when building the first design system
Molly Hellmuth shares the top 10 places where her students get stuck when building their first design system in Figma. Many of those involve tactics that once were considered best practices but got depreciated by newer features and approaches. Her answers to the tricky questions come from a ton of knowledge and experience.
Focus rings
Luis with a cool technique for adding focus rings to a button using an absolutely positioned component instead of a shadow hack.
Tips & tricks for developers
Tru Narla, Software Engineer at Discord, shares some quality tips on using Figma as a developer — Inspect panel, copying code snippets, and exporting full-sized assets.
Randomized avatars
I love seeing how teams improve their workflows with internal Figma plugins. Here, Bryan Berger from Discord built a handy plugin to randomize avatar fills from their design system library. The source code is available on GitHub. (I guess something is in the air, as Miguel Solorio is building something similar for his specific use case.)
Icebreakers or games in FigJam
So many great ways to warm up the room in replies to Femke. I’d love to try This or That, play two truths and a lie, draw blind contour portraits, or look for common ground with my team.
Unboxing Design Systems — Atlassian
Livestream from Friends of Figma, Portugal where Bruno, Raquel, and Rita analyze the Atlassian design system through its Figma community files and documentation.
Figma Tips & Tricks: Simplify All Instances
Tutorial Tim shows how the “Simplify all Instances” feature reduces an overwhelming visual overload in the Properties panel.
Study Hall: Adding images and video to Figma
In this Study Hall, Miggi covers several ways to add/edit images in Figma and demonstrates how to upload a video to use when prototyping or presenting.
Resources
Bloo Lo-Fi Wireframe Kit
All-in-one free and open-source wireframe kit for quickly designing and prototyping ideas by Vijay Verma. The library contains more than 250+ components supporting dark mode and 150+ ready-to-use mobile screens.
Design Audit Template
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.”
Backstage
Strengthen relationships between designers and developers
Developer Advocate Jake and Designer Advocate Lauren have an insightful conversation about strengthening relationships between designers and developers. I love Jake’s point that trust is essential and we don’t need to understand every part of each other’s work to collaborate effectively. (Let’s hope Figma Detached is a new series, as I want more!)
The growing pains of database architecture
“In 2020, Figma’s infrastructure hit some growing pains. With database traffic growing ~3x annually, Engineer Tim Liang and the databases team set out to reduce potential instability and pave the way for scale.”
Cool Thing
OKLCH Color Picker & Converter
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.