7 ways to use N-Slicing

Hey there! I'm Mayte CG, a Rive Ambassador, Rive Expert, and independent designer with 18+ years of experience across industries like marketing and edTech. Since discovering Rive in 2022, it's become an indispensable tool in my design arsenal. I'm thrilled to share insights on one of Rive's latest features: N-Slicing.

N-Slicing, inspired by the 9-slicing technique from game development, gives you precise control over which parts of an image or vector stretch or stay fixed. It’s a powerful tool that opens a playground of creative possibilities.

Rive’s N-Slicing feature lets you create responsive UI elements and animations that feel polished and adaptable across different screens and use cases. 

Ready to N-Slice? Here are seven ideas to fuel your designs. 

1. Create a thematic identity

N-Slicing can amplify visual styles for your branded projects. Use it to design complex buttons, interactive panels, or UI containers to reinforce your app’s personality.  

For example, imagine a fitness app with cheerful pixel art or a cyberpunk-themed cybersecurity dashboard. Game-inspired aesthetics in product design can set your brand apart.  

💡 Tip: Pair N-Slicing with animations and interactivity to sharpen your brand’s identity. 

2. Design game-inspired cards

Rive encourages play and exploration. You can discover new ways to design by combining new features with existing ones.  

Take game cards, for example — a hero asset in many video games. With N-Slicing, you can craft eye-catching and responsive cards. Pair this with Solos to create modular borders and components, building a mix-and-match card design system.  

Not in game development? No problem. Apply this approach to product cards on websites or dashboards to showcase features or configurations with a playful twist. Who says product exploration can’t be fun?

3. Score big with gamification

Boost engagement by adding gamified UI elements across many industries with N-Slicing:

• Score bars: Design a health & wellness app with an interactive score bar that fills up as users crush their goals by logging healthy activities like exercise, hydration, and sleep. 

• Badges: Create an educational app where students earn fun, shareable badges for completed lessons — perfect for bragging rights on social media. 

• Trackers: Build a visual tracker so drivers can monitor car maintenance tasks. 

4. Add personality to dialogues

Chat bubbles, dialog boxes, and tooltips are fantastic opportunities to unleash your creativity with N-slicing. Combine them with Rive’s character animation tools, and you have the perfect recipe for jazzing up chatbots, guided tours, or e-learning applications. It's showtime for those branded characters to chat it up with your audience! 

💡 Tip: When designing dialogues, identify fixed and stretchable parts of the design. Use width or height constraints to preserve your design. 

5. Experiment with creative distortions 

N-Slicing isn’t just for UI design; you can also use it for whimsical animations. Since N-Slicing acts as a deformer, you can experiment with deformations and distortions on raster and vector assets. Fold, unfold, grow, or shrink elements while adding interactivity.  

💡 Tip: Mix and remix with other Rive tools to spice things up. Control the N-Slicing animations with joysticks, or take it further by transforming the deformations into a scroll-based animation. 

6. Resize and shine 

N-Slicing adds another layer of adaptability to your designs. Create tileable backgrounds, flexible containers, and layout sections that are striking across screen sizes. 

💡 Tip: Combine N-Slicing with Rive’s Layout feature to craft flexible sections within a bento-box layout. 

7. Bring back skeuomorphic magic

Feeling nostalgic? N-Slicing lets you design modern, high-performance skeuomorphism. Think responsive stickers, post-it notes, or realistic containers for apps and websites. 

With N-Slicing, you can resize assets and fit them seamlessly into any composition. Apply this technique to web or app design to create unique panels, cards, and navigation menus that break the cookie-cutter mold.

Go forth and N-Slice

Whether you’re working in product, motion, or interaction design, N-Slicing opens up new creative possibilities. Sharpen that creative knife and bring your vision to life.

Have fun experimenting with N-Slicing in the Rive Editor, and read Rive’s article announcing N-Slicing for more details.