August 6, 2024 Smashing Newsletter: Issue #468
This newsletter issue was sent out to 198,321 subscribers on Tuesday, August 6, 2024.
Editorial
It’s Figma time! Indeed, many design teams these days use Figma, yet sometimes, it’s difficult to figure out just the right way to use it for your needs. How well do you organize a design system? And how do you document your design decisions and specs (if at all)?
That’s what this newsletter is all about — workflow in Figma, with useful techniques, strategies, and pointers for you to boost the work in Figma, for you and for your team.
We’ve been busy and made sure to have your backs covered with a good number of friendly events coming up soon. Perhaps you’d like to join in as well? We’d love to see you there!
- Inclusive Design Patterns For 2025 (Sept 24)
Free (3h) workshop with Vitaly Friedman - Figma Deep Dive (Oct 28, full-day workshop)
with Christine Vallaure (@ SmashingConf Antwerp) - Figma Workflow Masterclass (Nov 14–22)
with Christine Vallaure (online)
That’s all for now. I hope you have a truly smashing rest of the week, and let’s get better at Figma!
—Iris Lješnjanin
1. Figma Handoff And Spec Helper
If you and your team want to capture and communicate thoughts and design changes directly in Figma, the File Management UI Library might be just what you’ve been looking for. Created by the Experience team at Deliveroo, it includes file management goodies that help you bring more context to your designs — with banners, detail blocks, sticky notes, and more.
Compared to making a similar annotation from scratch, the library not only saves you precious time but, as the folks at Deliveroo found out in their team, it also encourages people to be more diligent about annotating their work, which, in effect, impacts how they collaborate with engineers, PMs, and one another. (cm)
2. Figma To Notion
You love Notion? Then FigNotion might be for you: The plugin exports your FigJam sticky notes to Notion — along with tags and groups. No need to switch between tabs or copy-paste data between apps.
FigNotion comes in particularly handy if you want to sync your team’s actions or tasks from meetings or retrospectives into a Notion task database. You can also use it to add user research insights into a research repository database or to plan your roadmaps visually in FigJam and sync them back into a structured Notion database. A great little timesaver to give your workflow a productivity boost. (cm)
3. Low-Fidelity Wireframing Toolkits
Wireframes aren’t as advanced as mockups, and that’s what makes them a wonderful option to visualize ideas and guide a conversation in the right direction. Especially for conversations about structure, IA, and priorities, where focusing on too much detail can easily make the discussion grow out of hand.
If you need to create a low-fidelity wireframe, be sure to check out Blocks. The Figma plugin includes wireframing components for every product situation so that teams can quickly iterate ideas without becoming too attached to any one style.
A similar tool is the Paper Wireframe Kit. As the name implies, it was inspired by the analog process of paper prototyping. The components have been crafted to take a backseat to give full focus and attention to the overall experience you’re trying to create.
Another plugin you might want to check out is WireFramer. Focusing on flexibility and speed to get your ideas down quickly, it keeps the main components to a minimum to make them easy to find while giving you just enough customization options.
You already have a hi-fi design and want to convert it back into a lo-fi wireframe so your team can focus on the UX rather than the UI? For those instances, Wire Box is here to help. Happy wireframing! (cm)
4. Accessibility Annotation Toolkits
Accessibility considerations rarely get documented, and too often they slip through somewhere between Slack messages and hallway talks. That’s where annotations can help — and resolve potential issues before they even emerge.
To improve communication and help designers and developers fix accessibility issues before they make it into production, the accessibility and design teams at eBay created a handy Figma plugin: Include.
The A11y Annotation Kit by the team at Indeed is another useful helper: It makes it easy to add callouts for elements, indicate focus order, or specify keyboard interactions.
Last but not least, the Inclusive Design team at CVS Health open-sourced their Web Accessibility Annotation Kit. Made specifically for web-based experiences, the kit includes multiple formats of annotation components. (cm)
5. Upcoming Workshops and Conferences
That’s right! We run online workshops on frontend and design, be it accessibility, performance, or design patterns. In fact, we have a couple of workshops coming up soon, and we thought that, you know, you might want to join in as well.
As always, here’s a quick overview:
- Behavioral Design Workshop UX
with Susan and Guthrie Weinschenk. Aug 22 – Sept 5 - Creating and Maintaining Successful Design Systems workflow
with Brad Frost. Aug 27 – Sept 10 - Deep Dive On Accessibility Testing dev
with Manuel Matuzović. Sep 23 – Oct 7 - Inclusive Design Patterns For 2025 free
with Vitaly Friedman. Sep 24 - Accessible Typography for Web & UI Design Masterclass design
with Oliver Schöndorfer. Oct 10 – 18 - Cascading Style Systems: Resilient & Maintainable CSS dev
with Miriam Suzanne. Oct 14 – 18 - Interface Design Patterns UX Training (Autumn 2024) ux
with Vitaly Friedman. Nov 1 – Dec 2 - Jump to all workshops →
6. Dashboard Figma Kits
A dashboard isn’t merely a grid to organize data widgets. Good dashboards drive meaningful and accurate insights — and more often than not, this will require way more attention to data and how it’s organized and visualized than the layout itself.
To find out what makes a great dashboard UX, the team at Creative Navy analyzed several data visualization tools. Interesting insights into dashboard design patterns that work well and common UX challenges to watch out for.
If you’re looking for some useful Figma kits for designing dashboards, be sure to check out Semrush’s Charts Library with easy-to-use chart components, the UKO UI Kit and Dashboard Design System, and the simple but powerful WebbyFrames wireframing kit. (cm)
7. Enterprise Design Systems
UX work often goes unnoticed, but it has a tremendous impact in critical domains. Take healthcare, education, or employees’ internal systems, for example. These are products that people can’t choose, but they need to be able to rely on them day in and day out.
The enterprise design system by the team at ServiceNow is an example of what a comprehensive design system for enterprise products for employees and IT operations can look like. It includes Figma kits for data visualization, workspace templates, conversational interfaces, and more.
If you want to dive deeper into the world of enterprise design systems, Vitaly summarized enterprise design systems and Figma kits from higher education, healthcare, insurance, finance, and much more. The collection also includes many useful resources, enterprise UX folks to follow, as well as related books and articles. (cm)
8. Recently Published Books 📚
Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been at the core of everything we do at Smashing.
In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as printed books. Have you checked them out already?
- Success at Scale by Addy Osmani
- Understanding Privacy by Heather Burns
- Touch Design for Mobile Interfaces by Steven Hoober
- Check out all books →
That’s All, Folks!
Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!
This newsletter issue was written and edited by Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).
Smashing Newsletter
Front-end, design and UX. Sent out 1× a week.You can always unsubscribe with just one click.