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 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
rock.

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

✏ Is A Graphic Design Career For You? Create React Custom Hooks, Health Icons, and more...

Monday, June 14, 2021

Is a Graphic Design Career for You? (7 Questions to Ask Yourself) DRIBBBLE.COM COMMENTS When CSS Isn't Enough: JavaScript Requirements for Accessible Components SMASHINGMAGAZINE.COM COMMENTS Health

A Filmmaker's Kubrickian Loft

Monday, June 14, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The living room (that's not really a

This New Tabletop Collection Has Us Falling Back in Love With Formality

Monday, June 14, 2021

Plus, 10 kitchen trends taking TikTok by storm (image) Architectural Digest AD PRO Logo The Expert Taps Former Domino EIC Jessica Romm Perez to Lead Partnerships Read More → CeCe Barfield's New

Accessibility Weekly #244: Looking at WCAG 2.5.5 for Better Target Sizes

Monday, June 14, 2021

Sponsored by Automattic. They're hiring. June 14, 2021 • Issue #244 View this issue online or browse the full issue archive. Featured: Looking at WCAG 2.5.5 for better target sizes Todd Libby talks

Bullet Charts, Tapestry, Group Orders, Media Queries, Health Icons

Monday, June 14, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 14 2021 How bullet charts taught me about the importance

✏ Perfection in Design, 11 Landing Page Design Tips, Scarlet illustrations, and more...

Sunday, June 13, 2021

Adding Shadows to SVG Icons with CSS and SVG Filters CSS-TRICKS.COM COMMENTS Perfection in Design: Why It's a Bad Idea HONGKIAT.COM COMMENTS Scarlet Illustrations - Abstract and Surreal

✏ Web Design Done Well, NoCode Revolution, Akar Icons, and more...

Saturday, June 12, 2021

✨Grab a Free .design Domain Name for your Portfolio✨ [ad] PORKBUN.COM Web Design Done Well: Making Use of Audio SMASHINGMAGAZINE.COM COMMENTS Website Design Mockup: Pitch your Ideas the Best Way

✏ Front-End Auditing Tools, Privacy Analysis of FLoC, Free Tailwind Kit, and more...

Friday, June 11, 2021

✨Grab a Free .design Domain Name for your Portfolio✨ [ad] PORKBUN.COM 13 Inspiring Graphic Design Trends for 2021 VECTORNATOR.IO COMMENTS Link Shorteners: Why You Shouldn't Use Them GCS.

Celebrating High Point, Welcoming Lila Allen

Friday, June 11, 2021

A weekly dispatch from Architectural Digest's Editor in Chief. ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌ ‌

💪 Diverse Fitness App Designs and more

Friday, June 11, 2021

Take A Peek At The Latest UpLabs Freebies 🔭 Check out these fresh high-quality Freebies that have been handpicked for you by the UpLabs team this week. Only $9.99 for UpLabs Premium! Seize the