Smashing Newsletter #302: Figma Plugins and Tools

With new features in Figma, useful Figma plugins, a template for Figma wayfinding, simpler annotations and integration with Vue.js, and how to manage design systems in Figma. Issue #302 • May 25, 2021 • [View in the browser]( 💨 [Smashing Newsletter]( Kon’nichiwa Smashing Friends, How are you designing websites these days? How do you share your assets with your colleagues and clients? And how do you collaborate with each other in the world of design systems and component-driven UI development? Chances are high that you are using Figma. That’s why we’ve collected a couple of useful tools and articles all around Figma, to help you boost your productivity when designing digital interfaces. [Redacted font]( One of many: we can use [Redacted font]( on generated text for a more abstract approach to placeholder content. (From “[Speed Up Workflow With Figma Plugins]( We’ll cover new features in Figma, useful Figma plugins, a template for Figma wayfinding, simpler annotations and integration with Vue.js, and how to manage design systems in Figma. We hope you’ll find them useful. We’ve also collected [useful Figma plugins]( in a separate article a while back, so you might find them useful, too. [Image Optimization Book by Addy Osmani]( [Image Optimization Book]( by Addy Osmani: everything on image optimization, from start to finish. On our end, we are getting ready for the batch of printed copies of Addy Osmani’s new book on [image optimization]( arriving next week. And we are also busy preparing [a new series of articles around UX]( (and, of course, [many other articles]( and running a few friendly online workshops. One of the new online workshops is starting today: Lea Verou will be workshopping on [Dynamic CSS]( — and yours truly workshopping on [new front-end adventures in 2021]( in early June. We’d love to see you there! In the meantime though, have a truly smashing week, and let’s get better at Figma! — Vitaly ([@smashingmag]( --------------------------------------------------------------- #1. Mastering Interactive Components And Variants A few weeks ago, Figma launched a beta version of their Interactive Components feature that allows you to create interactive elements that automatically switch between variants (a button changing from hover to a pressed state, for example). What might seem like a little detail, turns out to reduce the amount of frames and connections you usually need to prototype input fields like checkboxes or toggles tremendously. [Interactive Components]( To dive in deeper into the new feature, Steve Ruiz summarized [what it is capable of]( and what can be achieved with it if you think outside the box (a Minesweeper or Battleship game running in Figma, anyone?). Another great read: Rodrigo Osornio [explored the advantages and possibilities]( which Interactive Components brings along for micro interactions such as input fields, loaders, different kinds of buttons, dropdowns, and subscribe components. Speaking of components: Luke Cardoni shows how he managed to create a single, content-adaptable, fully customizable, and easily maintainable [component with 3,360 variants]( that serves every possible combination of settings for text input. A mammoth project that illustrates the benefits of Figma’s Variants feature. (cm) --------------------------------------------------------------- #2. Use Figma Designs Directly In Vue.js Applications If you want to remove some of the friction that turning a Figma prototype into a working application can bring along, Klaus Schaefer’s open-source plugin [Figma-Low-Code]( is for you. It lets you use Figma designs directly in Vue.js applications. [Figma-Low-Code]( This low-code approach does not only reduce the hand-off time between designers and developers as well as the amount of front-end code, but also ensures that the Figma design stays the single source of truth. The idea is that you design the prototype in Figma, then use the plugin to add data and method binding. Once you’ve done that, you can use your favorite code editor to implement business logic, and — ta-daa! — your application is ready for deployment. Changes you make to the Figma file are automatically propagated to the web app. (cm) --------------------------------------------------------------- From our sponsor 6 Psychological Principles To Boost Your Clients’ Conversion Rates [6 Psychological Principles To Boost Your Clients’ Conversion Rates]( Increase conversion rates by as much as 266% by applying psychology to your clients’ websites. Discover the 6 most essential principles of landing page design, get real-world examples, learn the science behind user behavior and start delivering real results. [Get your free article](. --------------------------------------------------------------- #3. A Template For Figma Wayfinding First, there’s only one person on the Figma project board, then another one joins in, and soon you’ll see the cursors of designers, developers, project managers, content designers, researchers, and many others spread across the screen. You’ve probably experienced this scenario before. But did all of these people actually find the information they needed? Did they have to dig around or was it easily discoverable? [A Template For Figma Wayfinding]( The team at Shopify took these questions as an occasion to [rethink the structure of their Figma playground]( and ensure it meets the diverse needs of teams across the company. Apart from sharing the process in an article, they distilled their findings into a [project index template]( that you can download and use right away. A handy little helper to give everyone involved in your project the context they need, when they need it. (cm) --------------------------------------------------------------- #4. Upcoming Smashing Online Workshops Design is pretty much at the heart of the [online workshops that we run]( — be it around accessibility, UX or front-end. In our workshops, we invite you to join live, share your screen, get feedback from people all over the world, online. We’d love to have you joining us as well. [Smashing Online Workshops]( Check out our [summer bundles]( and spend the summer learning with us! 🏖 For the next workshops, we have coming up: - [New Adventures In Front-End 2021]( Dev with Vitaly Friedman. June 9–23. - [Successful Design Systems]( Dev with Brad Frost. June 29 – July 13. - [Level-Up With Modern CSS]( Dev with Stephanie Eckles. July 8–22. - [Designing Websites That Convert]( UX with Paul Boag. July 22–30. - [The TypeScript Masterclass]( Dev with Stefan Baumgartner. August 5–19. - [Designing The Perfect Navigation]( UX with Vitaly Friedman. August 26–27. - [Vue.js: The Practical Guide]( Dev with Natalia Tepluhina. September 14–28. - [Building Modern HTML Emails]( Dev with Rémi Parmentier. September 16–24. - [Accessible Front-End Patterns Masterclass]( Dev with Carie Fisher. Sept. 30 – Oct. 14. --------------------------------------------------------------- #5. Annotations Made Easy How do you usually handle annotations when working with Figma? We came across two annotation kits that make communication on a design a lot smoother and less prone to misunderstandings. [Accessibility Annotation Kit]( One of them is [Annotation Kit 2.0]( A variety of sticky notes and measuring lines and tools make it easy to add context and annotations for your team members as you’re working. The [A11y Annotation Kit]( focuses on accessibility considerations that designers might want to share with developers when handing off a design. Whether it’s adding callouts for elements, indicating focus order, or specifying keyboard interactions, the kit translates some of the often cryptic WCAG wording into easy-to-use stickers that you can use to highlight key parts of the page. All components are pre-filled with the correct CSS or HTML elements. (cm) --------------------------------------------------------------- From our sponsor Build In-Demand Skills In Northwestern’s Online MS In Information Design And Strategy [Northwestern: Online Master’s in Information Design and Strategy]( Earn your master’s degree [online](. --------------------------------------------------------------- #6. Manage Design Systems With Figma Imagine you’re making a change in your project’s design system, and it’s immediately cascading through your Figma project. The [Design System Manager]( plugin for Figma makes it possible. [Design System Manager]( The plugin lets you define or update themeable design tokens in one single panel, manage selected layers grouped by style, and populate a design with real text or image content. To bring your project to life, you can programatically access the design tokens from the GraphQL API or you export them in the format of your choice (CSS, Less, Sass, JSON, YAML, Js, Swift, and Android are supported). A smart solution that makes dealing with design systems a lot more practical. (cm) --------------------------------------------------------------- #7. Useful Plugins To Solve Common Issues Have you ever lost resolution when bringing a large image into Figma? Or been frustrated at not being able to input a spacing value for your layers? Or maybe you’ve been unable to resize a frame independently of its contents? Yuan Qing Lim, product designer at Shopify, developed [nine useful plugins]( that solve issues like these. [Figma Design Tokens]( Another Figma plugin you might want to add to your toolkit comes from Lukas Oppermann. If you’re tired of the hassle that working with design tokens usually brings along, the [Design Token]( plugin does the job for you: styles and tokens are exported and sent to a GitHub repository and tokens are automatically converted using style dictionary. No need for you to leave Figma. A real timesaver. (cm) --------------------------------------------------------------- #8. New On Smashing Job Board - [Design Technologist]( at Upstate Interactive (Syracuse, NY (Remote)) - [Lead Developer]( at Komensky (Utrecht, NL) - [Senior UX Engineer]( at JobRad GmbH (Freiburg, DE) --------------------------------------------------------------- #9. Our Popular Recent Articles - [A New Way To Reduce Font Loading Impact: CSS Font Descriptors]( - [How To Create, Edit And Animate SVGs All In One Place With SVGator 3.0]( - [Frustrating Design Patterns: Mega-Dropdown Hover Menus]( - [How To Implement Authentication In Next.js With Auth0]( - [CSS Container Queries: Use-Cases And Migration Strategies]( - [Building A Rich Text Editor (WYSIWYG) From Scratch]( - [The Conference Platform We Use For Our Online Events: Hopin]( --------------------------------------------------------------- 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](