thoughtbot Design Link Pack: February 2022

thoughtbot February 2022 design links

Ever wonder what the thoughbot designers share on Slack? Enter the Monthly Design Link Pack Newsletter™. Enclosed, you’ll find our monthly roundup of what we’ve been reading, seeing, playing with, and ooh-ahh-ing.

Just Figma Things ✨

Figma magic: Building a fire icon in Figma.

Beautiful Shadows: A Figma plugin that allows you to create beautiful shadows by simply dragging a ‘light source’ which casts a shadow on selected elements.

Untitled UI: The largest Figma UI kit and design system in the world.

Highlighter: Insert syntax-highlighted text into your designs.

HTML & CSS

CSS Cascade Layers: This is your complete guide to CSS cascade layers, a CSS feature that allows us to define explicit contained layers of specificity.

Resizing in CSS: You can use a single line of CSS to create a resizable element

Aspect Ratio is Great: An introduction to aspect-ratio property.

Fancy 3D Button CSS: Button Deluxe is a further development/refinement/SASS-integration of Josh Comeau’s whimsical 3D Button.

CSS waterdrop: CSS for a realistic waterdrop.

Introducing Dialog Element: An introduction to the new and improved <dialog> element.

Preloading responsive images: Responsive image preloading is available Chromium and Firefox.

New viewport units: Hey, look at this diagram that explains three of the new Viewport Units — svh, lvh and dvh.

Good reads

Good things: A compilation of good sensory things in life by Melanie Richards.

The Black Experience in Design: Identity, Expression & Reflection: An anthology of essays from over 60 Black designers, design educators, artists, and creatives!

Google Slides is Actually Hilarious: Google Slides, but it’s everything wrong about it.

Comic Sans is a good typeface, actually: Perception of Comic Sans as an inferior typeface is a bit of a self-reinforcing phenomenon in the design community, and that’s a problem.

Make Free Stuff: The commodification of the internet.

Today, the distant future: 2022 was once unimaginable to some web folks.

Listening

Sabrina Hall: How to give feedback that reduces harm: A podcast episode about the impact and nuances of giving and receiving feedback.

Code and Pixels: A podcast about turning pixels into code with Adekunle Oduye and Kelly Harrop.

Fun stuff

Paint with diagram: Modern MacPaint made with tldraw.

Open source, Open hearts: Show your love for the OSS community and send a token of appreciation to your favorite open source developers and projects.

Iconographic Encyclopædia of Science, Literature, and Art: An enhanced digital edition of J. G. Heck’s collection of illustrations from 1851 including more than 13,000 illustrations from 500 engraved steel plates and more than 1.6 million words of descriptions with new interactivity.

General Resources

Interplay: The design systems platform that connects design and code.

Tabler icons: Over 1500 pixel-perfect icons for web design.

Edit Photo: Free online photo editor in your browser.

GSAP Flip Plugin for Animation: Greensock made the GSAP Flip plugin free. FLIP is an animation concept that helps make super performance state-change animations.

Design better web: Get help from thousands of web illustrations, UX/UI kits, fonts, and graphic templates to raise your design experience.

Guide to Build Context Menus: A comprehensive guide to creating intuitive context menus.

Random MDN: A bot that shares random articles on MDN.

This month’s newsletter is brought to you by…