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.


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 Events
Check out our summer bundles and spend the summer learning with us! 🏖

For the next workshops, we have coming up:

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

Work at the Intersection of Data, Design and Technology. Earn your master’s degree online at Northwestern 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

9. Our Popular Recent 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

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

Smashing Newsletter #301: Front-End Boilerplates

Tuesday, May 18, 2021

With front-end boilerplates: global CSS reset, favicons, HTML email template and VS code snippets for React, Vue, Angular and TypeScript.Issue #301 • May 18, 2021 • View in the browser 💨 Smashing

Next Online Workshops on CSS, Design Systems and UX

Friday, May 14, 2021

Boost your skills online, with workshops on everything from front-end to design. Meet our new live workshops on front-end & design. • View in the browser 💨 SmashingConf Newsletter Howdy Smashing

Smashing Newsletter #299: UX Edition

Tuesday, May 4, 2021

On web forms, opening menus on hover/click, UX tooling, maps and UX training exercises. Issue #299 • May 4, 2021 • View in the browser 💨 Smashing Newsletter Hej Smashing Friends, Everyone on the team

Meet "Image Optimization", a Brand New Smashing Book

Wednesday, April 28, 2021

Meet “Image Optimization”, our brand-new practical guide to optimizing and delivering high-quality images on the web. Written by Addy Osmani. Let's get images on the web right. Meet “Image

Smashing Newsletter #298: Web Typography

Tuesday, April 27, 2021

Web type tools, from little CSS helpers to open-sourced typefaces and some helpful guides to choose great type pairings. Issue #298 • Tue, April 27, 2021 • View in the browser 💨 Smashing Newsletter

Bamboo, Blow-Ups, and 3 Other Trends from Milan Design Week 2021

Thursday, September 16, 2021

Plus, the new Laura Gonzalez-designed Saint James Hotel is a Parisian oasis (image) Architectural Digest AD PRO Logo Saint James Paris The New Laura Gonzalez-Designed Saint James Hotel Is a Parisian

✏ WordPress vs Blogger, Creative Hamburger Menus, CSS Mirror Editing in Edge, and more...

Thursday, September 16, 2021

WordPress Vs Blogger: Which is Better for your Website? KINSTA.COM COMMENTS 20 Extremely Creative Web Layouts AWWWARDS.COM COMMENTS 10 Creative Hamburger Menus + Tips & Tricks 1STWEBDESIGNER.COM

✏ Issue #504: Typography for Data, Google Search Redesign, 8 Freelance Project Management Apps, Doodle Ipsum, and more…

Thursday, September 16, 2021

View this newsletter online Unsubscribe NEWSLETTER ISSUE #504 SEPTEMBER 15, 2021 Typography for Data In this in-depth investigation of typography for design systems, Michael Yom breaks down the

Now Hiring: Senior Interior Designer at Morgan Harrison Home (and More!)

Thursday, September 16, 2021

Visit our job board to view more opportunities. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

Photomicrography, Hoefler&Co & Monotype, Fintech Design, Cascade Layers, Doodle Ipsum

Thursday, September 16, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 16 2021 The Winners of the 2021 Small World

Running effective remote meetings

Wednesday, September 15, 2021

We're all dialling in, now what? ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

6 Timeless Alexander Girard Patterns Are Being Reintroduced

Wednesday, September 15, 2021

Plus, the unbelievable story behind this Elsie de Wolfe portrait (image) Architectural Digest AD PRO Logo The Mexidot pattern by Alexander Girard These 6 Timeless Alexander Girard Patterns Are Being

✏ 10 Iconography Rules, Core Web Vitals For WordPress, Why Creativity Matters, and more…

Wednesday, September 15, 2021

Say buh-bye to PAID page builders. Design Faster & Smarter with BeTheme's Live Builder & 600+ Pre-Built Sites [ad] MUFFINGROUP.COM 10 Iconography Rules to Follow in UI Design DRIBBBLE.COM

Issue 320

Wednesday, September 15, 2021

CSS mix-blend-mode and clip-path, the W3C design system, flexible components, and my job news! CSS Layout News Issue 320 By Rachel Andrew – 15 Sep 2021 – View online → I'll start this week with

Human-Computer Interactions, Jargon, Data Vis Dispatch, Bonsai, Jamstack Conf

Wednesday, September 15, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar September 15 2021 A comprehensive list of human-computer