Responsive layouts part 2: Meet N-Slicing

Hey there! I’m Susan Wang, one of the engineers building the Rive Editor. Before this, I was writing code at Figma and Dropbox, but now I’m thrilled to be here, announcing N-Slicing — a feature that got me thinking about math again. I’ve written most of the code on this one, so if you see some quirky bits, that’s on me.

So, what's N-Slicing?

N-Slicing gives you power over exactly which parts of an image or a group of vectors stay fixed or stretched.

N-Slicing builds on the idea of 9-slicing — a familiar concept for game developers. In 9-slicing, you divide an image into a grid (usually nine parts) so the inner sections can stretch while the corners stay fixed. In UI, it’s common for background images to have customized corners, and this technique lets designers keep those parts undistorted when the whole background fits the dimensions of the UI.

But N-Slicing? We didn’t just want fixed corners. We wanted control over any part of the border. It’s perfect for intricate layouts in game UIs or dynamic product designs where quality scaling is everything. 

And here’s the kicker: N-Slicing works on images and vectors, breaking away from the raster-only limitations. This means resizing vector designs in real time without losing quality or bloating files. 

Why does it matter?

When you resize images with detailed borders, they tend to warp, pixelate, or require messy workarounds. N-slicing tackles that head-on, giving designers an elegant, adaptable solution to keep their work looking sharp and professional. Think adaptive borders, scaling that holds up across devices, and clean, high-quality visuals — all without extra code. 

N-Slicing brings:

• Adaptive scaling: High-quality borders and elements that adjust smoothly across devices and screen orientations. 

• Vector freedom: Scale vectors without losing quality or adding file weight. 

Why settle for nine when you can have n?

Rive’s approach is more than just 9-slicing — we’ve taken it to a level that lets you scale anything. That’s right, any shape, any curve, and any corner, with smooth interpolation that even works in animation. 

We’re scaling shapes in real-time, letting designers create dynamic borders, intricate backgrounds, and components that resize gracefully. You can start defining fixed corners or elements within your design, control which vertices move while the rest don’t, and combine N-Slicing with Rive’s Layouts for truly adaptive UI elements. One design can now morph across different resolutions and aspect ratios — no extra code is needed. 

Cool, how do I use it?

To get started, drag vertical axes from the edges of your image. These axes divide the image into three slices, each with alternating behaviors: the first slice remains fixed when the image scales horizontally, the second stretches, and the third stays fixed again. Adding horizontal axes works the same way, creating a grid of nine slices that alternate between fixed and stretched for precise control over how your image scales.

How'd we come up with something new?

The way N-Slicing works in Rive was an idea from Luigi Rosso, our CTO, who observed that a typical workflow in UI design is to export copies of the same background image to fit a button, modal, HUD, etc. 

This is tedious and bad for performance, as some of these images can be quite large. 9-slicing fixes this problem, but we couldn’t stop there. That one goal made us wonder, “Why not control any part of the image?” Before we knew it, we were neck-deep, figuring out how to make N-Slicing work for raster images and then pushing to take it even further to support vectors. 

Unlike static pixels, vectors are defined by paths and points, making them infinitely scalable. N-Slicing vectors allows users to keep corners and intricate designs intact no matter how they stretch or resize.

What fascinated me was how we started with a single, specific goal — implementing a known solution, 9-slicing — and kept layering on new possibilities. Moving from a static solution to a dynamic one felt like discovering hidden potential.

Why call it "N-Slicing"?

The “n” in N-Slicing means any number. In programming, “n” is often used to signify a variable quantity, hinting at this feature's flexibility and control. And it doesn’t hurt that it’s a playful nod to the “nine” in 9-slicing, showing that we’re taking things to the next level.

Stretch your designs, not your time

Take N-Slicing for a test drive in the Rive Editor. And don't forget to share your designs on our Community Files.