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.

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.

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.

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.

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.

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.

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.

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

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.

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 →

… 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