#416: Figma Tools and Workflow

Figma workflow, variables, design system structure, design specs, file management UI library and a user journey map template. Issue #416 • August 1, 2023 • [View in the browser]( [Smashing Newsletter]( Buongiorno 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 exactly would you use Figma variables? How do you organize a design system? And how do you document our 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 Hour with Asim Hussain]( Coming up: [Smashing Hour on Sustainability]( with Asim Hussain. In the Smashing department, we are taking a bit of rest these weeks while getting ready for new adventures later this year: - [Smashing Hour with Asim Hussain]( on sustainable UX, - [SmashingConf Design & UX]( (October 9–12 in Antwerp, Belgium 🍫), our shiny new conference all around UX, - [Interface Design UX Training]( with Vitaly (Sep 8 – Oct 6), - [Accessibility For Designers]( with Stéph Walter (Nov 6–15) - …and many other [friendly and practical online workshops](. In the meantime though, have a truly smashing week, and let’s get better at Figma! — [Vitaly]( --------------------------------------------------------------- 1. Guide To Figma Variables With variables, Figma introduced a long-awaited feature that gives your design workflow a power boost. They allow designers to create reusable values throughout Figma, such as text strings, colors, or numbers for spacing, size, or corner radius. [A Guide to Variables in Figma]( If you haven’t gotten around to experimenting with variables yet, no worries, Joey Banks [summarized everything you need to know about the new feature]( including what variables are, how to use them, and shortcuts to help make workflow and creation more efficient. (cm) --------------------------------------------------------------- 2. Design System Structure How to structure a design system in Figma? Depending on the Figma plan you’re on, there are different possibilities. Luis Ouriach shares a [design system FigJam file]( with recommendations that suit your work and your team. [Design System Structure]( The file features advice on design system structure for teams, projects, and files. It highlights the structural differences between each paid Figma plan and features example structure setups for each one of them. Examples of file structure, among them one file for everything, multiple component file, splitting styles and components, and one file per component, help you decide which approach works best for you. Non-global component recommendations are also included. (cm) --------------------------------------------------------------- 3. Design Specs Plugins Preparing a design for developer handoff is usually a time-consuming task. Luckily, there are some Figma plugins out there to speed things up. One of them is [EightShapes Specs](. The plugin automatically produces page and component design specifications of selected components, instances, and frames for you. This not only comes in handy for design-dev handoffs but also for auditing work that is still in progress and running design critiques with teammates. [Redlines]( Another plugin that has got your back when preparing a design for handoff is [Redlines](. It helps you create and generate redlines from a selection of objects with ease, while enabling full control over the style and display of each redline element. All you need to do is select one or multiple layers, customize the redline settings if you want to, and choose a redline option to plot. Two fantastic timesavers. (cm) --------------------------------------------------------------- 4. File Management UI Library If you and your team want to capture and communicate thoughts and design changes directly in your Figma files, 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. [File Management UI Library]( Inside the library, you’ll find banners to separate flows in a file, detail blocks to document specifics about individual screens, sticky notes to highlight things that need attention, 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) --------------------------------------------------------------- 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: - [Advanced JavaScript Masterclass]( Dev with Christophe Porteneuve. Aug 16–30 - [Interface Design Patterns UX Training]( UX with Vitaly Friedman. Sep 8 – Oct 6 - [Accessible Components from Design to Development]( Dev with Carie Fisher. Sep 14–22 - [Typography Masterclass]( Design with Elliot Jay Stocks. Oct 16–30 - [Strategizing Products and Customer Experiences (SPACE)]( UX with Debbie Levitt. Oct 18–26 - [Smart Interface Design Patterns Video Course]( UX 9h-video + Live UX Training with Vitaly Friedman - [Jump to all workshops →]( --------------------------------------------------------------- 6. User Journey Map Template Journey maps help us better understand how users interact with our product. We can use them to identify unnecessary complexity but also opportunities in the user experience. The [Journey Map Figma template]( by Notably makes it easy to create journey maps for ideation. It includes an example and an empty journey map to create your own. [How to Use Journey Maps for Ideation]( If you’re new to journey maps, Allison Grayce from the Notably team also wrote a great [introduction to the topic](. It explores when to use a journey map and what to include on it and shares exercises for gaining valuable insights from them. (cm) --------------------------------------------------------------- From our sponsor Northwestern’s Online MS In Information Design And Strategy [Northwestern’s Online MS In Information Design And Strategy]( Prepare for a range of dynamic communication roles and build the skills needed to lead communication strategy, translate complex data, and drive user interactions. Choose from specializations in content strategy, UX/UI, communication with data, and learning design. [Learn more →]( --------------------------------------------------------------- 7. Figma News And Resources Ready for more Figma content? Then [Figmalion]( might be one for your bookmarks. The site is a curated collection of articles, podcasts, videos, plugins, and more design resources to sharpen your Figma skills. [Figmalion]( You can browse the collection by feature (from animation to vectors), topic (from AI to UI kits), or design tool for tips, templates, and resources. Additionally, the weekly Figmalion newsletter keeps you on top of what’s happening in the Figma and design community. You can subscribe to it to get the latest updates delivered right to your inbox or browse all issues in the [online archive](. (cm) --------------------------------------------------------------- 8. News From The Smashing Library 📚 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? - “[Understanding Privacy]( by Heather Burns - “[Touch Design for Mobile Interfaces]( by Steven Hoober - “[Image Optimization]( by Addy Osmani - [Check out all books →]( [Success At Scale]( … and we’re currently working on a new book: [Success At Scale]( shipping in fall. [Pre-order your copy]( or [browse the complete library](. --------------------------------------------------------------- 9. Recent Smashing Articles - [How To Define An Array Of Colors With CSS]( - [Living In The Moment (August 2023 Wallpapers Edition)]( - [How To Use Artificial Intelligence And Machine Learning To Summarize Chat Conversations]( - [Modern Technology And The Future Of Language Translation]( - [Read more on Smashing Magazine →]( --------------------------------------------------------------- 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](