Smashing Newsletter: Issue #501

Editorial

There is no shortage of useful tools out there, but some of such tools are wonderful little time-savers. They help us avoid repetitive tasks and provide helpful starter kits upon which we can build. In this newsletter, we’ll cover a few of them!

Later today, we are running Smashing Meets CSS, a friendly, free online get-together all around CSS with sessions by Miriam Suzanne, Julia Miocene, Adam Argyle, and your shining host, Geoff Graham. We’ll dive into the wonderful world of CSS, CSS animations, and where CSS is heading. Get your free ticket.

We are looking forward to seeing you there — and seeing you later in the year with our upcoming workshops and SmashingConfs 2025, of course!

— Vitaly

1. Figma Linter

Is your design ready for handoff? Marcin Ukleja created a handy little Figma plugin that uncovers design issues in your Figma files so you can fix them ahead of time — without having to check each layer manually to find them.

FigLint scans for common issues, categorizes them into a list, and lets you navigate to each one layer-by-layer for more in-depth insights. The free version of the plugin verifies if styles (text, color, grid, effects) are applied correctly to each layer.

Advanced features to identify variable-related issues, such as missing colors, padding, or radius variables, are available as an in-app purchase. (cm)

2. The Micropedia Of Microaggressions

Words matter. They can make people feel included and respected, but they can also uphold stereotypes and biases when we choose them poorly. So how can we ensure that our words don’t cause any harm?

The Micropedia of Microaggressions raises awareness for everyday snubs and insults and offers practical advice for choosing words more carefully. It highlights comments and actions that are based on stereotypes, assumptions, and a lack of empathy across age, disability, class, ethnicity, race, gender, Indigenous Peoples, religion, and 2SLGBTQ+.

With plenty of examples to keep in mind, this is a wonderful resource to unlearn and prevent bias. (cm)

3. Notion Templates For Designers

It’s always fantastic to see people in the web community sharing the things that have helped them in their day-to-day work so that others can benefit from them, too. One such goodie we recently came across comes from Bec Thexton: She published a set of Notion templates she created to help her in her career as a content design lead, content strategist, and product manager, but also in her personal life.

In the free template library, you’ll find a Content Design Workflow template, a UX Writing Inspiration template, and a template with Figma shortcuts for content designers. Useful templates for reflection and intentional living are also included. (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.

Smashing Online Events — 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:

Cognitive Biases 101: How They Impact Users, Research, and Teams free
with Stéphanie Walter. Apr 10
Theming Design Systems workflow
with Samantha Gordashko. Apr 8–23
The Secrets of Web Performance dev
with Ryan Townsend. May 7–21
How To Measure UX and Design Impact UX
with Vitaly Friedman. May 12–20
Enterprise UX Masterclass UX
with Marko Dugonjić. May 14–21
Design Patterns For AI Interfaces UX
with Vitaly Friedman. Jun 4–18
Accessibility for Designers UX
with Stéphanie Walter. Jun 16–24
Jump to all workshops →

5. Easing Wizard

Are you struggling with CSS easing functions? No worries; you are not alone. Matthias Martin created a neat little tool to help you make sense of them: Easing Wizard.

Easing Wizard makes it easy to visualize and test how CSS easing functions behave as certain parameters change. It supports Bézier, spring, bounce, wiggle, and overshoot and offers plenty of presets, customization options, and preview modes to see an easing function in action. A fantastic playground for tinkering with easing functions, and once you’re happy with the result, you can copy the CSS or Tailwind CSS to your clipboard with just one click. (cm)

6. Low-Fidelity Wireframing Toolkits

When we want to communicate an idea or a concept, low-fidelity is just the right level of fidelity that is both fast and easy to understand. In fact, drawing on paper is usually the fastest and the most effective. But if we want to share a mock-up or work on the concept together, we need a digital alternative.

Blocks is a neat little Figma plugin with 50 wireframing components that you can drag and drop from the plugin toolbar to bring your concepts quickly to life. You can also swap icons, change sizes, and manage states.

Alternatively, you can find plenty of low-fidelity wireframing toolkits (Miro, Figma) as well in a little post we’ve put together. Fast, efficient, and sometimes exactly what’s needed to bring that idea to life! (vf)

7. Measure UX and Smart Interface Design Patterns

You might have seen it, but perhaps it felt like just another video course: Smart Interface Design Patterns, a shiny video library with design patterns on everything from complex navigation, data tables and filters to sorting UX, FAQs and Cancel UX. With plenty of practical examples, best practices, and useful pointers to keep close.

Plus, it’s not just a video course — but a growing video library, with 5 new video chapters added every year. Also, we run live UX training twice a year, and super-duper-early birds are now available as well. Use the coupon code SMASHING to save 15% off the bundle.

And if you’re looking for something slightly more strategic, How To Measure UX and Design Impact has got your back as well. With a friendly bundle pricing for friendly teams. Happy exploring, everyone! (vf)

8. Reviewing Mock-Ups Faster

You’ve just received an almost perfect mock-up or concept — marketing material, PDFs, images, or even live websites. How do you provide feedback, assign tasks, and have a well-structured conversation about it? Well, that’s where Pastel can help.

The little tool helps you import any image or PDF and leave comments on it, and you can also browse the website, switch between mobile and desktop view, and the page takes notes of your context and where you leave a comment.

Of course, you can also share the URL, keep track of the various versions of the same file, assign tasks, and track status. Helpful, fas,t and reliable — and highly recommended! (vf)

9. Recently Published Books 📚

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?

Success at Scale by Addy Osmani
Understanding Privacy by Heather Burns
Touch Design for Mobile Interfaces by Steven Hoober
Check out all books →

Meet our newest book: Success At Scale by Addy Osmani. Get the book or browse the complete library.

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 Geoff Graham (gg), Cosima Mielke (cm), Vitaly Friedman (vf), and Iris Lješnjanin (il).

April 1, 2025 Smashing Newsletter: Issue #501

Previous Issues