Bom dia Smashing Friends,

It’s Figma time! Many of us design in Figma every day, but there are always those little tools, plugins and templates that can make our work just a little bit more efficient. In this newsetter, we highlight some of them.

You’ll find a few neat little Figma helpers for design specs, customer journey maps, skeleton screens and design systems. Happy browsing!

Coming in a few weeks: SmashingConf SF (May 23–26), all around cutting-edge front-end.

As it’s already late April, we are getting ready for our very first SmashingConf this year, and get ready for our upcoming Smashing Meets all around JavaScript that’s happening today:

• New Front-End Adventures 2023 (April 25 – May 9)
  The state of front-end, from CSS and JavaScript to web performance and workflow, with Vitaly Friedman.
• Smashing Meets JavaScript (April 25)
  A free community event on JavaScript performance, security and the Canvas API. Tickets are free for everyone!
• Smashing Hour with Chris Ferdinandi 🏴‍☠️ (April 26)
  A free 1h-session all around JavaScript, with Chris who also loves pirates, puppies, and Pixar movies.
• SmashingConf SF 🇺🇸 (May 23–26)
  All around front-end, web performance, CSS, JavaScript, Next.js and accessibility with over 10 confirmed speakers.
• Figma Workflow Masterclass (June 15–23)
  An online workshop with Christine Vallaure on how to optimize your Figma workflow.

In the meantime, happy learning and we hope to see you soon in-person and online, everyone!

Vitaly (@vitalyf)

1. Figma Design Specs Made Easy

Creating component design specs is often a tedious task. If you don’t want to spend a lot of time on manually itemizing elements, outlining props and options, and mapping tokens, the EightShapes Specs Figma plugin that Nathan Curtis created is for you.

The plugin automates Anatomy, Props, and Layout and spacing, turning a task that would usually take you two hours into just a matter of seconds. It is not only useful for preparing handoff to developers but also for auditing the quality and completeness of in-progress components and critiquing a component build approach with teammates. (cm)

2. Skeleton Screens With One Click

While traditional loaders and spinners have long been the go-to solution for designers to indicate that content is loading, skeleton screens offer an even user-friendlier way to show that something is going on. Essentially a grayed-out placeholder layout of what a content-heavy page will look like once it finishes loading, a skeleton screen creates the illusion that information will be progressively displayed.

If you want to create a skeleton page from an existing high-fidelity mockup, Christopher Kark built a handy little Figma plugin: Ghost. Ghost detects all text and shape layers selected in your mockup, measures their dimensions, and replaces them with rectangles. All you need to do is select the shape, text box, or an entire screen, choose a color, and run the plugin. (cm)

3. Handoff Helpers

Communication is key to building great products. To simplify asynchronous collaboration in remote teams and ensure that everyone is on the same page, Michael Riddering created Handoff Helpers. The free component library for Figma helps you effectively communicate your designs, even when your teammates are timezones apart.

“Stop limiting components to UI elements and start thinking of them as powerful workflow enhancers” is the credo of Handoff Helpers. The library includes components for organizers, status cards, table of contents, checklists, and to-do lists. To tailor the components to your brand’s style, you can easily customize their look and feel. (cm)

4. 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:

• New Front-End Adventures in 2023 Dev
  with Vitaly Friedman. Apr 25 – May 9
• Architecting Design Systems Workflow
  with Nathan Curtis. May 11–19
• Data Visualization Masterclass Dev
  with Amelia Wattenberger. May 4–18
• SmashingConf SF — May 23–26
• The Power of Storytelling UX
  with Chiara Aliotta. May 30 – June 14
• Deep Dive On Accessibility Testing Dev
  with Manuel Matuzović. June 12–26
• Figma Workflow Masterclass UX
  with Christine Vallaure. June 15–23
• The React Performance Masterclass Dev
  with Ivan Akulov. June 29 – July 13
• Smart Interface Design Patterns Video Course UX
  9h-video + Live UX Training with Vitaly Friedman
• Jump to all workshops →

5. Icons In Design Systems

Icon libraries must be easy to update and to extend. In the case of design systems, it is also critical to have a smooth process for updating icons in the code — and that can bring along quite some pitfalls. Sepeda Rafael’s post “Maintaining Icon Libraries In Design Systems” shares practical tips that help you prevent problems with icon libraries in Figma.

In the post, Sepeda breaks down how to set up and maintain an icon library that fits your team’s needs and plays well with your design system. You’ll learn how to decide if icon fonts or SVG fonts are the best fit for your project and how to deal with icon sizes. Sepeda also takes you through the most common setup for organizing icon components and explains how to ensure everything runs smoothly. (cm)

6. ChatGPT In Figma

Currently, there is hardly any getting around ChatGPT, and AI is about to change your design workflow, too. If you want to leverage the power of AI when working with Figma, FigGPT has got your back. The tiny Figma plugin connects ChatGPT to Figma to take care of your copy.

FigGPT summarizes, edits, and composes text in just one click. You can use it to come up with a tagline, improve the writing, change the style, turn your text into bullet points, and more. It also composes text using the contents from your design and populates your components with sample data that is much more meaningful than some “lorem ipsum” placeholder. The plugin requires an Open AI account to get started. (cm)

From our sponsor

What We Can All Learn From Web Performance Leaders

Case studies from companies like Airbnb, Pinterest, BBC, Zillow, Casper, Shopify, and Leroy Merlin. Learn how they speed up their sites, use performance budgets, create a culture of performance, and measure the impact of site speed on their business.

7. End-To-End User Experience Map

A user journey map is an effective way to better understand a user’s or customer’s experience with your product. It tells the story of what they do, feel, and think in every step of the way — from the moment they first learn about your product to accomplishing their task and planning the next steps. The team at Turtle Design shares a Figma template for mapping out a user’s end-to-end experience.

The template helps you identify and prioritize opportunities for improvement, align stakeholders, and ideate a future state for your experience. It comes with a how-to-use guide, the template itself, ready to be used and edited as you wish, and an example of an experience map from one of Turtle Design’s client projects. (cm)

8. Behavioral Design System

Behavioral science helps you take the guesswork out of your design decisions and backs them up with scientific findings about how people act and react. If you plan to reference behavioral science in your design work, the Figma Behavioral Design System by Coglode is for you. It’s a fantastic tool to help you turn hunches into more objective, evidence-based decisions.

At the heart of the system is a suite of over 50 “nugget badges.” Each nugget badge distills a behavioral science concept down into just a few words or, if you prefer, into an image you’ll easily recognize once you’ve become familiar with the concepts. To aid memory, the nuggets are color-coded by use, e.g., branding, product development, pricing, or conversion. Perfect for teams who want to use a common behavioral language to ease communication. (cm)

9. New On Smashing Job Board

• Visual Designer
  at UCLA (Los Angeles / New York / Remote)
• Wordpress/PHP Developer
  at Razorbraille (Toronto)
• Design System Specialist
  at InVision AG (Düsseldorf, Germany)

10. Recent Smashing Articles

• Exploring The Potential Of Web Workers For Multithreading On The Web
• Building And Dockerizing A Node.js App With Stateless Architecture With Help From Kinsta
• Color Mechanics In UI Kits
• Smashing Podcast Episode 59 With Chiara Aliotta: What Is Design Storytelling?
• What Is Design Thinking?
• 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