Skate's UI designer: nine-slice lets gritty texture live in a design system
Gnarly by design: building systems with grit ft. Beau Wingfield | Config 2026 · Amy
23 min total·Actually worth watching closely: ~11 min·3 must-watch clips
- 0:11 – 7:15Skim
From sketchbooks to EA: who the speaker is
After Amy from Figma opens, Beau covers 17-plus years designing across industries, most recently as a senior UI designer at EA in the gaming industry and now independently under his own studio, Coastal Co. Studio, plus the moment his love of design systems really took hold in the early Figma beta on the web in 2016, with an origin story going back to the late 1990s and early 2000s.
His taste for texture isn't a style choice made later on: creating and adding texture to art and design was home to him as a kid, which explains the preferences behind every decision that follows.
Mostly personal work and old photos, and it moves fast. Glance at the hand-drawn pieces for the tone and you can take the narrative at speed.▶ Jump to 0:11Speaker · Amy、Beau Wingfield - 7:16 – 9:20Listen
The problem: clean frameworks can't hold grit
He covers the scale of the design system he managed on Skate, with over 100 components, countless variants and multiple extended libraries, and the communication wheel, missions, an in-game music playlist manager and about 17 other features that went live in the game. Then he lays out the core tension: Material Design, Apple and Polaris are all built on a clean, flat premise.
When the aesthetic calls for an edgy marker font, punk rock references and rough-edged iconography, the problem isn't a missing component: the framework's underlying assumptions don't hold, so you build your own.
This stretch is mostly stating the tension, and the slides are just ordinary screenshots of mainstream design systems. Nothing is lost if you don't watch.▶ Jump to 7:16Speaker · Beau Wingfield - 9:20 – 11:46Skim
How the style got found
To set Skate's style guide, the team used a mix of Figma brushes, Photoshop on a tablet and Procreate brushes on an iPad to sketch out piles of shapes, arrows and textures, then went through a process of concepting splash screens from the textures, elements and styles already created, including a pass in Spline 3D, to see which tone would hold up in the game.
Draw a lot before asking what it's for, then fit it repeatedly onto one high-visibility screen. The passes that get rejected aren't waste; they're a necessary output of the process.
The screen fills with walls of assets and one splash screen concept after another. What you're taking in is the volume and the range, so scan through rather than study each one.▶ Jump to 9:20Speaker · Beau Wingfield - 11:49 – 15:03Watch
Building character into the components themselves
Using Skate's top navigation, tooltip, selectors and communication wheel, he shows how to drop generic shapes, traditional layouts and flat styles in favor of stylized icons, texture over the icons and outlines that aren't perfectly square. It closes with the four-pass build from a solid layout to texture-rich.
Character goes in at the component level, and it has to stay restrained: don't overdo it, balance it, and hold the line on accessibility requirements like colorblindness and contrast.
The whole section runs on real interface screenshots, especially that final comparison where the texture is barely there around the edges with something subtle behind it. Differences that fine only register on screen.▶ Jump to 11:49Speaker · Beau Wingfield - 15:06 – 18:08Watch
Nine-slice: making texture scale
He explains the 2D image resizing technique that prevents visual distortion: an efficient way to break up a component used for elements like background containers, ideal when you want unique images such as textured edges or other shapes on the corners and sides. Then come the rules for building one.
The corners must be one-to-one square in ratio, and the nine sections must be numbered from the top left across each row. Get the order wrong and it won't be mapped correctly in the game engine.
Where the guidelines land, which section is which, and where the texture carries the emphasis in Skate's skater customization screen are all marked up on screen. Listening alone leaves you with no spatial reference.▶ Jump to 15:06Speaker · Beau Wingfield - 18:11 – 21:24Watch
Building it in Figma
The full production pass: use the slice tool along the four guidelines you drew, export the slices, select and group them into a main component, then position the corners and sides with constraints and give the center a flat shape with a solid background. Going further, make each slice an atomic component with three variants and change each slice individually with props for varied texture. He also notes the slice tool only breaks things into images like PNGs, so keeping it all vector means slicing manually.
Raster versus vector is an explicit trade-off: slicing by hand takes a little longer but is well worth it for scaling, and if raster is fine a nine-slice plugin speeds the whole thing up.
The only software demo in the talk. The hotkey, the constraint settings, filling in the extra background space on the slices so nothing shows a seam when it scales: every step happens on screen, and following along is the point.▶ Jump to 18:11Speaker · Beau Wingfield - 21:27 – 22:56Watch
Proof in gameplay, and the close
Back into the game to check the result: the mission notification, the mission info panel that pops down below it, the music toolbar, album and playlist tiles and their hover states all use the same nine-slice component, just variations of it, with textured edges that scale seamlessly both within Figma and within the game engine.
One component carrying every rectangular container in the game is what proves it works at system level. Running into a technical constraint doesn't mean you took the wrong line; it's the cue to create something new within it.
The close is live gameplay where the same textured edges hold up across containers of wildly different sizes. That result has to be seen, and it's where the whole argument lands.▶ Jump to 21:27Speaker · Beau Wingfield