A Maker of Programs
This week I’ve been enthralled with, of all things, the Teenage Mutant Ninja Turtle soundtrack because it doesn’t sound like a bunch of songs you’d slap into a kids film but instead it sounds like a corporeal beast that crawled out of a sewer. It’s a mean and angry thing, grunge in all the best possible ways. As always, my biological father Trent Reznor never fails to disappoint.
Okay so what else happened this week? What have I been up to? Not much on the blog front besides this one piece:
- I asked why websites are embarrassing and made the comparison with books where the baseline of design is pretty good.
- Chris wrote a great follow-up and reply.
(Chris’s reply makes me the miss the ol’ CSS-Tricks newsletter days where I could tell there was a scoop somewhere but once I submitted something Chris would come in at the end and complete my thought and turn it into a fully-fledged thing.)
What else have I been doing? Well, I’ve been working on a redesign of my website in between interviews because of course I have but along the way I’ve been learning about variables and modes in Figma. This stuff opens all sorts of doors for making incredible prototypes and it makes Figma one step closer to being less a maker-of-pictures and more a maker-of-programs. That’s no small thing.
With variables you can now quickly switch your designs from light to dark mode, or you can make mind-boggling animations, or switch from English to Japanese with just the flip of a variable associated with a frame.
Okay, that sounds fine, but why should I care about any of this?
Well, tools like this have a big impact on my work and a good prototype used to take a ton of work. You’d have two choices: make the thing with HTML and CSS or create a million frames in Figma, tie them all together meticulously, and then use Present mode. Because of that finickiness I stayed real clear of Figma prototypes besides making short presentations (Figma is, strangely enough, the best Powerpoint-maker in the world). So I’d always make a prototype of an interaction in Codepen because it felt less fragile to code something up instead of connecting all these .pngs together.
Now with variables and modes, Figma isn’t a place where you draw pictures of interfaces any more though. Want elements to be spaced apart a certain distance everywhere? Set a variable. Want to mimic your design system’s variable names? Easy. Want to create stateful components that remember information, like a checkout flow? Done and done.
It’s hard to describe what these changes feels like. It’s sorta similar to when a new HTML element or CSS feature arrives where, suddenly, you can connect all these puzzle-pieces in the browser in new ways—think the <details> element or scroll-snap in CSS. It’s not a new feature so much as it’s a bedrock improvement, foundational. It connects everything with everything else.
Before variables and modes in Figma I would make sketches of interfaces and be kinda sloppy about things. What’s the point in getting things to align pixel-perfect when an engineer knows that they have to use a certain spacing variable? What’s the point making sure that this animation looks great because it’s so much easier to sit down with an engineer after I show them the designs? But now as I’m using Figma this week to redesign my website I realize I’m treating things more programmatically, as if I was a foot step closer to the codebase.
And that’s kinda neat.