Figma announced a host of new AI-powered features this week at their annual conference, and they have been received by designers with both cheer and dismay.

Tools like the ones that were announced are showing up across the industry, but as the most popular tool for modern product design, Figma will make them commonplace, and we’ll soon be taking them for granted just like any other advancement in design tools over the past several decades.

Some folks are panicked, some are excited, and some are indifferent. I’m somewhere in the middle, but I do have concerns that are exacerbated by these new tools and capabilities.

To explain those concerns, I’ll draw a distinction between two types of AI-powered features that Figma announced this week:

1. Using AI to eliminate or reduce the time spent on constructing designs and prototypes in Figma.
2. Generating UI designs from scratch, based on a text prompt, using models trained on common product interfaces (and, in the future, the work created by Figma users, unless they opt out).

I’m excited for and have very few concerns about type #1, because the job of product designers is not to create Figma mockups—it’s to solve problems and ship software.

To the degree that new features allow us to spend less time creating ephemeral artifacts that are merely a stop on the way to a final destination, I’m sold.

Those features involve things like automatically wiring up prototypes, filling in a mockup with fake data, translating strings into other languages, automatic layer naming, generating placeholder images, etc. These are all good and helpful, and are geared towards saving designers time to spend on things that they are uniquely positioned poised to do.

But what about type #2, the feature that Figma labels in its UI as “Make designs”? This allows anyone to enter a prompt and have Figma create a mockup from scratch. In the future, the company plans to train their models on designs created by users.

Some are concerned that this type of feature might take jobs away from product designers, and some see it as simply another way to automate away the tedious parts of a designer’s job in order to give them more time to do what they do best.

I think it’s both, and/but I don’t think it’s because of AI.

There are many companies, and the number seems to be increasing, that are more than happy to turn the jobs of designers over to folks who are able to wield tools to produce a facsimile of what a designer is actually capable of.

For those that see the primary value of designers as producing interface mockups, the advent of new AI tools in the vein of Figma’s “make designs” button will absolutely seem like a viable replacement for the work of a designer. And this isn’t limited to AI—as design tools become more accessible and approachable to everyone (which I consider a net positive on the whole), the barrier to creating something that looks, on the surface, like the work of a designer is lowered.

Canva is an excellent example of how this is not strictly because of AI, but might certainly be accelerated by it. The commodification of design as a practice began long before the widespread availability of generative AI.

Product managers, engineers, and others are now able to produce designerly artifacts easier than ever before, and too many companies are willing to accept the sub-par solutions that result in order to cut costs and move faster.

Machines will not make our jobs obsolete, but corporations will, and they’ll use smarter and smarter machines as an excuse to do so.

I’ve remarked before on my gratefulness for CSS as the ubiquitous and expressive visual language of our times, a sort of design Esperanto (that is actually widely spoken).

One would struggle to find a more perfect example of this than Scribe, by Stephen Band. Scribe is a custom element (<scribe-music>) which renders responsive music notation in HTML and CSS grid.

Here’s an example, rendered inline via Scribe:

To really understand the magic happening here, you must read Stephen’s excellent blog post about how it all works.

It’s remarkable that this is possible using CSS, and even more remarkable that the language itself morphs to become a syntax not for describing elements on a web page, but to describe pitch over time. CSS as interface for the natural world.

Under the hood, Scribe uses markup like this to represent music in time:

<div class="stave bar">
  <svg class="clef" data-pitch="B4">…</svg>
  <svg class="flat" data-beat="1" data-pitch="Bb4">…</svg>
  <svg class="head" data-beat="1" data-pitch="Bb4">…</svg>
  <svg class="head" data-beat="2" data-pitch="D4">…</svg>
  <svg class="head" data-beat="3" data-pitch="G5">…</svg>
  <svg class="rest" data-beat="4" data-pitch="B4">…</svg>
</div>

Elegant, useful, and thanks to the hard-won stability of the web platform: durable for generations to come.

One might wonder, what other natural or mathematical systems might we be able to represent in CSS? Another example that crossed my feeds recently is time-based CSS animations by Yuan Chuan.

Yuan creates a variable in CSS representing time, and uses keyframe animations to increment the value of the variable by 1 every millisecond. Suddenly CSS has a timer, something powerful for generative art and animation where time itself is used as an input variable.

Need to adjust the frame rate? Easy:

/* 8 fps */
animation-timing-function: step(calc(86400000 / (1000 / 8)));

Yuan has some great examples of how this can be combined with functions in CSS like min(), round(), and newly added trigonometric functioned like sin(), cos(), etc. to create all sorts of useful effects. My favorite example is using all of this to create a clock with a perfectly ticking second hand.

In terms of representing natural systems in CSS, this reminds me of how often I’ve wanted to be able to generate and use random numbers in CSS at runtime. To my delight, it looks like that’s in the works.

There are two new features coming to CSS that will make it much easier to further avoid JavaScript when implementing animations:

1. Animating to and from display: none; for the sake of enter/exit animations.
2. Animating to and from the intrinsic size of an element (such as height: auto;).

Traditionally, animating something into or out of the screen (as opposed to just hiding it visually) required JavaScript to remove the element from the page after waiting for the animation or transition to complete. No longer!

When these new features land in browsers, you’ll be able to animate to display: none like any other property using a keyframe animation:

.item {
  animation: fade-out 0.5s forwards;
}

@keyframes fade-out {
  100% {
    opacity: 0;
    display: none;
  }
}

Neat!

You can also do the same thing with a CSS transition, but you’ll need to set the new transition-behavior property to allow-discrete for that to work. I can see something like * {transition-behavior: allow-discrete} becoming a part of my CSS reset in the future to enable this behavior by default.

But what about the opposite case? You have an element that’s currently not displayed and you want to animate it as it appears. Again, we typically use JavaScript for this today to ensure the initial styles are set properly and our element doesn’t display visually on the page before it has animated.

Now, we can specify the starting style like this:

.item {
	@starting-style {
    opacity: 0;
	}
	
	opacity: 1;
  transition: opacity 0.5s;
}

Elegant and useful. If you want to learn more about these new powers, I recommend checking out this post on the Chrome for Developers blog.

The second new feature coming to CSS is the ability to animate to and from an element’s intrinsic size. The most common use case for this is collapsible areas: we want them to be height: 0px when closed, and when opened their height should be automatic based on the contents.

Because CSS has historically not allowed for animating to height: auto;, we’ve had to use JavaScript to measure the height of the contents and animate to that pixel value.

When this feature lands in browsers, we’ll instead be able achieve this like so:

.item { 
  height: 0; 
}

.item.open { 
  height: calc-size(auto);
}

The magic comes from the calc-size function, which is a curious API choice—why not just use the existing calc() function? Here’s a comment on the CSS working group’s draft for this feature that explains why.

These features are just a few of the many ways that CSS is growing and becoming more powerful and expressive. To learn about all of the other great new things coming, check out this excellent video by Una Kravets from Google I/O.

Una says that we’re in the golden era for web UI, and I couldn’t agree more.

Many of my online acquaintances know that I live in Chicago, but I suspect they might not know that I’m from a small university town in Mississippi called Starkville.

Starkville is home to Mississippi State University, where I attended college and studied Computer Science. In 2017 I graduated and moved to Chicago to start my career.

At the time I was excited to escape the place where I spent so many of my formative years, a place which was the symbol of mundanity for me and my youthful ambitions.

Seven years later and I’m having coffee and catching up on my inbox when I happened to find the latest issue of Claire Evans’ newsletter: a delightful story about moon trees—that is, trees grown from seeds that traveled to space and around the moon 34 times during the Apollo 14 mission.

Claire traces the history of the seeds, which were germinated into seedlings and given out to foresters across the country before being largely forgotten about and then eventually rediscovered and catalogued by NASA.

(By the way, don’t miss out on the wonderful website created to track the trees by a NASA archivist.)

Today less than 100 moon trees remain, but as Claire goes on to describe, there is a second generation of moon trees (so called “half-moons”) grown from the seeds of original trees that remain today.

The location of one of these mother-trees, though, is what caught my attention: it’s on the campus of Mississippi State University, my campus. All the times I walked past this humble tree I had no idea it had been to space.

It’s such a pleasant surprise to have this story appear in my inbox and show me something new about a place where I spent so much time.

While I lived there, I often felt suffocated by the mundanity of my home town. This has reminded me that there are things to appreciate and interesting stories (of perhaps cosmic proportion!) to discover in even the most mundane of places. We just have to keep our eyes open and remember not to take anything for granted.

If you’d like, you can buy a seedling Sycamore moon tree online descended from the one on the MSU campus.

Hearty congrats to Robin Rendle who has turned his wonderful CSS-focused newsletter into a good, old fashioned blog. The Cascade is beautiful, and is already full of great content for CSS nerds like me.

The site is, generously, free to read, but member supported for $10/year. Subscribing, for me, was an absolute no brainer.

I liked this bit from an issue of Robin’s personal newsletter that he sent after the launch:

There’s not enough words in the English language to describe how cool it is to build a little publishing machine. That rare, lightning-in-a-bottle feeling of throwing a few services together and building something greater than the sum of its parts.

It’s never been easier to create a website (a publishing machine!) for yourself or your interests. The feeling of ownership you’ll have compared to publishing on someone else’s platform is a powerful force in and of itself.

Several months ago, in an issue of Spencer Chang’s newsletter, I discovered the 6 hour video review of a game called Boku no Natsuyasumi by Tim Rogers (known as Action Button).

To call this a review is surely stretching the limits of the word’s meaning as we know it.

Boku no Natsuyasumi, henceforth shortened as Bokunatsu, is a game for the original PlayStation released 24 years ago in Japan. And only in Japan. It centers on a young boy, Boku, spending a month of his summer vacation with his aunt, uncle, and their family in the countryside of Japan in August of 1975.

Players can explore the countryside as Boku, collect bugs, fish, fly kites, and other low-stakes activities you might expect from a child on summer break.

Slowly, you learn about the people around you and their stories.

Sounds simple, but watch Tim’s review and you’ll see that the game is a subtle masterclass in storytelling, menu design, cinematography, typography, skeuomorphism, Japanese culture, sound design, memory, and even mortality.

I became determined to experience the game myself, which is easier said than done given that it was never released outside of Japan. I managed to find an English patch, translated by a fan, for the game’s sequel Boku no Natsuyasumi 2: Umi no Bouken-hen (My Summer Vacation 2: Sea Adventure Chapter). The sequel, released two years after the original, also follows a boy named Boku vacationing in the countryside in August of 1975.

Armed with the patch file, I needed 3 more items to complete my quest: a PS2 emulator, a PS2 BIOS (the software pre-installed on the console’s chipset), and a copy of Boku no Natsuyasumi 2.

Luckily, the emulator is easy to come by. I downloaded the excellent PCSX2, which is an open source PS2 emulator that works quite well on my MacBook Air.

Unfortunately, for Legal Reasons™ I cannot provide a link to the PS2 BIOS or the the game itself, but a cursory Google search should turn up the files you need without too much trouble.

With these 4 talismans in hand I was able to perform the necessary ritual of resurrection: apply the English patch to the game, boot up the PS2 emulator, load the game.

After a few clicks… paydirt.

An experienced gamer might find this process mundane, but to me it feels like the internet equivalent of breaking open an ancient, hidden tomb. At this point I could only imagine what treasures may lie within.

What I discovered is undoubtedly a work of art, made clear by my time playing this iteration and from Tim’s review of the original. The games also happen to be an example of the billions of bytes of lost media that are just waiting to be rediscovered by someone who will appreciate them.

Here is a game, published 22 years ago, that has managed to evoke feelings of nostalgia and wistfulness in me today, in 2024. This must be the closest thing to time travel I’ll ever experience.

I knew lots about the game before playing due to Tim’s review (which, again, is a 6 hour masterpiece), but there are two aspects I couldn’t fully appreciate until playing: the game’s backgrounds and soundscapes.

First, the backgrounds. Bokunatsu makes use of a fixed perspective, where the camera only changes angles when the character moves to another scene. Each area that the user can move through is set upon a gorgeous hand-painted background. If you’ve ever seen a Miyazaki film you have a sense for the feelings that these backdrops create. A 3D modeled scene would never have evoked such a strong sense of place, time, and character, and the creative decision to use hand drawn backgrounds makes all the difference.

There’s a narrative purpose to the backgrounds as well, signaling the time of day as they change throughout between different paintings for day, afternoon, and night.

The backgrounds were done by artists at an animation studio called Kusanagi. Here are the backgrounds they made for Bokunatsu 2, but I heartily encourage you to browse through all of the art on their site.

Kazuo Oga is a famous background painter and the person responsible for many of the backgrounds in your favorite Miyazaki films. Animation Obsessive had this to say about him:

That’s really the heart of it. Oga notices things — little things. He gets a feel for them. When he sits down to work, he brings with him all the unimportant details that matter the most. Then, with his paint, he creates an artwork that centers those details, elevates them. It’s more a way of seeing and feeling than it is a technique.

All the unimportant details that matter the most—paying attention to these details are precisely what make Bokunatsu, from its backgrounds to the narrative itself, so plainly striking.

The backgrounds are complimented by the soundscapes. These are, in my opinion, the best part of the game.

Of all the characteristics of summer, it may be the sounds which I most associate with the season. I grew up in the rural south, and Bokunatsu manages to capture the droning sounds of summer in a way I’ve never experienced before in media.

At times, I’ve let the game run in the background just to listen to the soundscapes.

According to an interview with the creator and director Bokunatsu, Kaz Ayabe, Sony sent a team into the mountains to capture sounds for the game.

Dear reader, I’m here to tell you that the effort paid off.

The game’s environment is alive with the sounds of insects chirping, the wind blowing through a nearby chime, the trickling of a nearby stream. As Boku explores the countryside time advances and, like the background art, the sounds change to evoke the feeling of morning, afternoon, and night.

Animal Crossing, which debuted the year after the original Boku no Natsuyasumi game, is held up as the shining example of cozy, relaxing video games. I am a true fan of the Animal Crossing franchise, but with its gameplay literally focused on grinding in order to pay your landlord they stand in stark comparison to a game like Bokunatsu. Animal Crossing rewards completionism, and in doing so makes the game about grinding instead of actually relaxing.

In comparison, the only thing you’ll get for collecting all of the bugs or catching all of the fish in Boku is a diary entry written by the boy at night before bed. And, like in real life, maybe that’s enough?

Discovering and playing Bokunatsu (and watching Tim’s 6 hour magnum opus of a review) has given me a deep appreciation for the timelessness of art and media.

A game from 24 years ago, deeply steeped in a culture that isn’t my own, has managed to create in me a sense of warm nostalgia. Its soundscapes remind me of home, but also make me long for a place I’ve never been.

It’s also worth appreciating the meta aspect of the journey I went on to discover and experience this game, all because of a link in a newsletter. This is why the web is so special, and it’s what an AI will never do: unearth a lost gem.

When writing in his diary at the end of each in-game day, Boku reflects on “the most wonderful day in which nothing happened.” Let this be a reminder that there is magic waiting to be found in the mundane.