Bonjour Smashing Friends,
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.
Coming up: One Challenge, Three Designers! Mark your calendars and join us on Thursday, September 26, 8–11 am (PT) — tickets are free!
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!
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)
From our sponsor
Stop Coding Forms! SurveyJS Is A Fully-Integrated, Drag-and-Drop Form Builder
Coding forms is rarely a value-add activity. Instead, integrate SurveyJS UI components to build a fully-integrated form management platform with a user-friendly interface. Generate and style dynamic JSON-driven forms of any complexity, right in your JavaScript application — no need for manual coding. Try it yourself with a fully-featured demo.
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.
With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop from wherever you are.
As always, here’s a quick overview:
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)
From our sponsor
Stop Worrying About Servers, Traffic Or Scaling, And Embrace Autonomy
Cloudways Autonomous offers a robust, fully-managed WordPress hosting solution, designed for developers with auto-scaling powered by Kubernetes to effortlessly handle traffic surges. It comes pre-configured with Cloudflare Enterprise and Object Cache Pro Plugin, ensuring top-notch security and performance. Additionally, every plan includes unlimited PHP workers. Try free with $100 credits.
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?
It’s here, and it’s shipping! Success At Scale, a new book by Addy Osmani. Get the book or browse the complete library.
9. Recent Smashing Articles
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 Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).
Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You rock.
Follow us on Twitter • Join us on Facebook
