#468: It’s Figma time!

Communicating thoughts and design changes directly in Figma with useful techniques, strategies and pointers for you to boost your work.Issue #468 • Aug 6, 2024 • [View in the browser]( [Smashing Newsletter]( 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. [Smashing Meets Design Challenge]( 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! - [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. [How we made our Figma workflow 15% more efficient]( 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]( 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. [Paper Wireframe Kit]( 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 [SURVEYJS]( 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. [A11y Annotation Kit]( 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. [Smashing Online Workshops]( 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: - [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. [UKO UI Kit and Dashboard Design System]( 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]( 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. [Enterprise Design System]( 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 →]( [Success At Scale]( 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 - [It’s Time To Talk About “CSS5”]( - [If I Was Starting My Career Today: Thoughts After 15 Years Spent In UX Design (Part 1)]( - [How To Build A Multilingual Website With Nuxt.js]( - [Sweet Nostalgia In August (2024 Wallpapers Edition)]( - [Rethinking The Role Of Your UX Teams And Move Beyond Firefighting]( --------------------------------------------------------------- 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]( Weekly issues with useful tips for web devs. Email: newsletter@smashingmagazine.com. [unsubscribe]( • [update preferences]( • [view in your browser](