Alice Packard's Journal Entries

mostly boring, unsexy features and capabilities for Figma Design

It's time to retire that icon wrapper component

SVGs are the way

and what to do instead

Let's look at the tradeoffs between file performance and component management and maintence that come with this method of building components

Chrome, Safari, and Firefox, for both Windows and Mac, all utilizing Figma's auto-layout feature

Variables, variants, component swapping, and component properties all offer different advantages.

Designers strive to make usable products.

tired: light/dark, wired: density

"it works fine on the canvas, but not when it's nested inside another component?!"

It doesn't matter!

one component per page is not the only (or best) solution

Collapsing SVGs into one layer is expensive, risky, and makes for a more fragile icon collection

reject the allure of the crystal ball, embrace not knowing, and know peace

And thumbs, chevrons, trend lines...

Why swapping arrow-right for arrow-down still shows an arrow pointing to the right

there's two different workarounds!

Let's get your file memory back.

alt title: how to make sense of variable collections in Figma

A workaround for managing prototype-ready materials in your library

It turns out layers and large variant sets aren't the only things eating up file memeory

According to Figma’s documentation this isn’t possible, but I’ve found a way to get around it.

Here's a hint: space between is an overrideable attribute...

Because "just practice" and "learn flexbox" aren't good enough.

Just because they've fallen out of favor with design system folks, doesn't mean they're not useful!

For when the default 800x450 just doesn't cut it

Spice up your FigJam communication game

The concept is useful, but I have beef with the execution.

How the new features and enhancements affect my past blog posts

Checkboxes, yes.

reduce memory usage, improve component usability, and a third thing!

wish me luck!

And understanding how they relate to the other 6 types will unlock a whole new level of workflow precision

You're already use first type... but what about the other 6?

Confidently choose a building method that will benefit you in the future

The techniques are: "basic", "starter-kit", and "slot"

If Bon Appetit asked me to do a "Making Perfect" for job searching.

No matter how much time you're spending on a wireframe, you need it to effectively communicate an idea.

Upgrading from willy-nilly class names to B-E-M naming conventions

Spoiler: almost everything you make should be a component... almost...