Smashing Newsletter: Issue #302

Editorial

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.

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.

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)

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?

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.

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.

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)

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.

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.

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)

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

May 25, 2021 Smashing Newsletter: Issue #302

Previous Issues