Hey! I'm Mayte CG, a Rive Ambassador and independent designer with 18+ years of experience. Since 2022, Rive has become a key part of my toolkit.
Rive takes design to the next level. It lets you design, build, and run interactive, responsive graphics while choosing between no-code or full-code workflows. With Rive, you have a robust end-to-end pipeline that leads from design to production-ready.
This innovative approach can require a change in mindset compared with traditional design tools. To help ease this transition, I'm excited to share tips and tricks on streamlining workflows and files while working with Rive.
With great power comes great responsibility
Rive gives designers unparalleled control. What you design in the editor reflects exactly in runtimes, putting you in charge of aspects traditionally reserved for engineers.
Sounds like great power? It is! But to unlock its full potential, you need to shift from traditional design to deliver ready-to-ship experiences. Unlike conventional tools like After Effects or Figma, which result in static outputs, in Rive, you’re not just designing anymore; you’re building. Let this be your north star.
Start smart: Pre-editor tips
Optimization starts before you open Rive's editor. Here’s how:
Start with a conversation
Before designing anything, talk to your team and stakeholders. Collect information and ideas. Interactive experiences can have many layers of complexity. Good communication will give you a clear picture of what you must build, saving you design and animation time later.
Embrace a build-oriented mindset
Start with a clear vision. Wireframe your ideas from the user's perspective. Design interactive experiences, not just graphics.
Set up systems and frameworks. As you take on more Rive projects, break them into core components and create templates to streamline your workflow.
Developers: Your partners in design
Rive bridges design and development. Cross over and connect with your developer colleagues! Some ideas to make working together a breeze:
Involve developers early: Bring them into the design process to incorporate their insights from the start.
I usually love kicking off by throwing my ideas onto a FigJam. Then, I huddle up with the developer to bounce ideas around. It's a fantastic moment! Engineers think methodically, which helps me tackle all the technical questions and discover new angles. In my experience, they also appreciate a heads-up about what’s coming next to prepare, as they often miss some early project discussions.
Rive's State Machine is your contract with engineers. Take advantage of it! Set up functionality first, then iterate on design while developers work alongside you.
Understand each other's workflows: Working closely with developers helps you understand how they work and vice versa. It also gives you a bigger picture of Rive runtimes, making you a more skilled designer.
When we decided to give Rive a shot in our workflow in one of the companies I work with, I organized initial workshops so designers could learn to use Rive. We had a developer tag along, which was a game changer. As a designer, you can’t fully grasp Rive without a peek at that dark side known as Runtimes!
Balance functionality and creativity: Channel your inner developer! Prioritizing functionality doesn't squash your design freedom. It just provides you with a solid framework for creativity.
Visual tools to bridge communication gaps: We naturally think visually as designers. Use visual tools for brainstorming and ensure you both share a clear vision.
For me, having creative chats with developers is also great! We usually stick to our corners, sizing each other up like we’re in a standoff, but programming is a creative playground, too!
Document your process
Find a system to track your learning journey that works for you. Do project retrospectives or share your challenges and solutions with other Rive designers. Documenting will reinforce your understanding!
Test and refine
Take the time to find a collaborative process and a common language that fits your team.
Optimize your files: Editor tricks
Your prep work is done. Time to design and animate! Boost your workflow with these tips:
Tame the creative chaos
While chaotic exploration can be fun, staying organized is crucial as your idea takes shape. Rive has excellent tools to help you keep your projects in check. Use folders, tags, groups, and clear naming conventions to quickly find what you need and collaborate better.
💡 Tip: Use groups and tags within your hierarchy to keep everything organized and manageable. This way, it’ll be easier and faster to make revisions or changes down the line.
Unlock design flexibility with the State Machine
The State Machine is the heart and soul of Rive. If you’re coming from traditional animation tools, it might take some time to wrap your head around this less-linear way of working. Once you get the hang of it, you'll realize state machines add a whole new level of flexibility to your workflow.
💡 Tip: You don’t need to animate everything in every timeline. Animation mixing allows you to create rich, layered interactions and easily remix timelines for fresh outcomes. Efficiency? Check!
Less is more: Use as few keys as possible
Want to keep your projects slick and your file sizes small? In Rive, it’s essential to be aware of your keyframe count. Here are some strategies:
Simplified keying: Use bones and constraints to animate multiple parts with fewer keyframes. Move a parent bone to affect its child bones or key a few strategic bones for complex animations. Bind shapes to bones and weigh them to achieve complex deformations without manually animating each vertex.
Automated movements: Constraints can automate movements based on other assets, reducing manual keyframing. Adjust the strength to control the influence of constraints for precise control.
IK (Inverse Kinematics) constraint: Control the end effector of a bone chain while the software calculates intermediate bone positions, minimizing keyframes for complex movements.
Toggle the visibility of your assets with Solos: Solos are perfect for applying different skins or customizations without animating each object’s opacity.
Simplifying curves: Use the graph editor in Rive to simplify keyframe curves by scaling down or smoothing out animation data, reducing keyframes while maintaining movement
💡 Tip: Solos are also great for quick brainstorming! Use them to test ideas and then clean up unused options.
Optimize raster assets
When working with raster assets, optimizing them is key to improving your project's performance:
Use the right size: Resize images to match the display area. If your image will be displayed at 200x200 px, upload a 200x200 px image. Avoid larger images as they only consume extra memory.
Balance quality and file size: Optimize raster assets before uploading them to Rive. Once in Rive, apply WebP compression in the Assets panel to maintain visual quality while reducing file sizes.
💡 Tip: Run .riv file size tests after uploading all assets before animating. If the file size is larger than expected, see if there's anything you can optimize even more
Tidy up before you ship
Time to export your project! Double-check that everything's set first:
Clean up assets: Remove any unused assets and artboards for a tidy and optimized file.
Check timelines: Look for any unnecessary keyframes or timelines.
Test the State Machine: Ensure everything works as it should. Check for unnecessary loops, states, inputs, or listeners. Verify that the blend states transition correctly to other states or exit states. Lastly, ensure that events are reported correctly and at the right moments.
💡 Tip: Add the developers implementing your file as Viewers in the Rive editor so they can inspect the file if needed.
Rive and thrive!
As a designer in the Rive pipeline, you’re the architect of the building, and your choices impact efficiency.
Stay updated on new features and never stop learning: explore Rive’s documentation and engage with the community to keep leveling up your skills. Approach each project with this mindset and unlock Rive’s full potential!
Hey! I'm Mayte CG, a Rive Ambassador and independent designer with 18+ years of experience. Since 2022, Rive has become a key part of my toolkit.
Rive takes design to the next level. It lets you design, build, and run interactive, responsive graphics while choosing between no-code or full-code workflows. With Rive, you have a robust end-to-end pipeline that leads from design to production-ready.
This innovative approach can require a change in mindset compared with traditional design tools. To help ease this transition, I'm excited to share tips and tricks on streamlining workflows and files while working with Rive.
With great power comes great responsibility
Rive gives designers unparalleled control. What you design in the editor reflects exactly in runtimes, putting you in charge of aspects traditionally reserved for engineers.
Sounds like great power? It is! But to unlock its full potential, you need to shift from traditional design to deliver ready-to-ship experiences. Unlike conventional tools like After Effects or Figma, which result in static outputs, in Rive, you’re not just designing anymore; you’re building. Let this be your north star.
Start smart: Pre-editor tips
Optimization starts before you open Rive's editor. Here’s how:
Start with a conversation
Before designing anything, talk to your team and stakeholders. Collect information and ideas. Interactive experiences can have many layers of complexity. Good communication will give you a clear picture of what you must build, saving you design and animation time later.
Embrace a build-oriented mindset
Start with a clear vision. Wireframe your ideas from the user's perspective. Design interactive experiences, not just graphics.
Set up systems and frameworks. As you take on more Rive projects, break them into core components and create templates to streamline your workflow.
Developers: Your partners in design
Rive bridges design and development. Cross over and connect with your developer colleagues! Some ideas to make working together a breeze:
Involve developers early: Bring them into the design process to incorporate their insights from the start.
I usually love kicking off by throwing my ideas onto a FigJam. Then, I huddle up with the developer to bounce ideas around. It's a fantastic moment! Engineers think methodically, which helps me tackle all the technical questions and discover new angles. In my experience, they also appreciate a heads-up about what’s coming next to prepare, as they often miss some early project discussions.
Rive's State Machine is your contract with engineers. Take advantage of it! Set up functionality first, then iterate on design while developers work alongside you.
Understand each other's workflows: Working closely with developers helps you understand how they work and vice versa. It also gives you a bigger picture of Rive runtimes, making you a more skilled designer.
When we decided to give Rive a shot in our workflow in one of the companies I work with, I organized initial workshops so designers could learn to use Rive. We had a developer tag along, which was a game changer. As a designer, you can’t fully grasp Rive without a peek at that dark side known as Runtimes!
Balance functionality and creativity: Channel your inner developer! Prioritizing functionality doesn't squash your design freedom. It just provides you with a solid framework for creativity.
Visual tools to bridge communication gaps: We naturally think visually as designers. Use visual tools for brainstorming and ensure you both share a clear vision.
For me, having creative chats with developers is also great! We usually stick to our corners, sizing each other up like we’re in a standoff, but programming is a creative playground, too!
Document your process
Find a system to track your learning journey that works for you. Do project retrospectives or share your challenges and solutions with other Rive designers. Documenting will reinforce your understanding!
Test and refine
Take the time to find a collaborative process and a common language that fits your team.
Optimize your files: Editor tricks
Your prep work is done. Time to design and animate! Boost your workflow with these tips:
Tame the creative chaos
While chaotic exploration can be fun, staying organized is crucial as your idea takes shape. Rive has excellent tools to help you keep your projects in check. Use folders, tags, groups, and clear naming conventions to quickly find what you need and collaborate better.
💡 Tip: Use groups and tags within your hierarchy to keep everything organized and manageable. This way, it’ll be easier and faster to make revisions or changes down the line.
Unlock design flexibility with the State Machine
The State Machine is the heart and soul of Rive. If you’re coming from traditional animation tools, it might take some time to wrap your head around this less-linear way of working. Once you get the hang of it, you'll realize state machines add a whole new level of flexibility to your workflow.
💡 Tip: You don’t need to animate everything in every timeline. Animation mixing allows you to create rich, layered interactions and easily remix timelines for fresh outcomes. Efficiency? Check!
Less is more: Use as few keys as possible
Want to keep your projects slick and your file sizes small? In Rive, it’s essential to be aware of your keyframe count. Here are some strategies:
Simplified keying: Use bones and constraints to animate multiple parts with fewer keyframes. Move a parent bone to affect its child bones or key a few strategic bones for complex animations. Bind shapes to bones and weigh them to achieve complex deformations without manually animating each vertex.
Automated movements: Constraints can automate movements based on other assets, reducing manual keyframing. Adjust the strength to control the influence of constraints for precise control.
IK (Inverse Kinematics) constraint: Control the end effector of a bone chain while the software calculates intermediate bone positions, minimizing keyframes for complex movements.
Toggle the visibility of your assets with Solos: Solos are perfect for applying different skins or customizations without animating each object’s opacity.
Simplifying curves: Use the graph editor in Rive to simplify keyframe curves by scaling down or smoothing out animation data, reducing keyframes while maintaining movement
💡 Tip: Solos are also great for quick brainstorming! Use them to test ideas and then clean up unused options.
Optimize raster assets
When working with raster assets, optimizing them is key to improving your project's performance:
Use the right size: Resize images to match the display area. If your image will be displayed at 200x200 px, upload a 200x200 px image. Avoid larger images as they only consume extra memory.
Balance quality and file size: Optimize raster assets before uploading them to Rive. Once in Rive, apply WebP compression in the Assets panel to maintain visual quality while reducing file sizes.
💡 Tip: Run .riv file size tests after uploading all assets before animating. If the file size is larger than expected, see if there's anything you can optimize even more
Tidy up before you ship
Time to export your project! Double-check that everything's set first:
Clean up assets: Remove any unused assets and artboards for a tidy and optimized file.
Check timelines: Look for any unnecessary keyframes or timelines.
Test the State Machine: Ensure everything works as it should. Check for unnecessary loops, states, inputs, or listeners. Verify that the blend states transition correctly to other states or exit states. Lastly, ensure that events are reported correctly and at the right moments.
💡 Tip: Add the developers implementing your file as Viewers in the Rive editor so they can inspect the file if needed.
Rive and thrive!
As a designer in the Rive pipeline, you’re the architect of the building, and your choices impact efficiency.
Stay updated on new features and never stop learning: explore Rive’s documentation and engage with the community to keep leveling up your skills. Approach each project with this mindset and unlock Rive’s full potential!
Hey! I'm Mayte CG, a Rive Ambassador and independent designer with 18+ years of experience. Since 2022, Rive has become a key part of my toolkit.
Rive takes design to the next level. It lets you design, build, and run interactive, responsive graphics while choosing between no-code or full-code workflows. With Rive, you have a robust end-to-end pipeline that leads from design to production-ready.
This innovative approach can require a change in mindset compared with traditional design tools. To help ease this transition, I'm excited to share tips and tricks on streamlining workflows and files while working with Rive.
With great power comes great responsibility
Rive gives designers unparalleled control. What you design in the editor reflects exactly in runtimes, putting you in charge of aspects traditionally reserved for engineers.
Sounds like great power? It is! But to unlock its full potential, you need to shift from traditional design to deliver ready-to-ship experiences. Unlike conventional tools like After Effects or Figma, which result in static outputs, in Rive, you’re not just designing anymore; you’re building. Let this be your north star.
Start smart: Pre-editor tips
Optimization starts before you open Rive's editor. Here’s how:
Start with a conversation
Before designing anything, talk to your team and stakeholders. Collect information and ideas. Interactive experiences can have many layers of complexity. Good communication will give you a clear picture of what you must build, saving you design and animation time later.
Embrace a build-oriented mindset
Start with a clear vision. Wireframe your ideas from the user's perspective. Design interactive experiences, not just graphics.
Set up systems and frameworks. As you take on more Rive projects, break them into core components and create templates to streamline your workflow.
Developers: Your partners in design
Rive bridges design and development. Cross over and connect with your developer colleagues! Some ideas to make working together a breeze:
Involve developers early: Bring them into the design process to incorporate their insights from the start.
I usually love kicking off by throwing my ideas onto a FigJam. Then, I huddle up with the developer to bounce ideas around. It's a fantastic moment! Engineers think methodically, which helps me tackle all the technical questions and discover new angles. In my experience, they also appreciate a heads-up about what’s coming next to prepare, as they often miss some early project discussions.
Rive's State Machine is your contract with engineers. Take advantage of it! Set up functionality first, then iterate on design while developers work alongside you.
Understand each other's workflows: Working closely with developers helps you understand how they work and vice versa. It also gives you a bigger picture of Rive runtimes, making you a more skilled designer.
When we decided to give Rive a shot in our workflow in one of the companies I work with, I organized initial workshops so designers could learn to use Rive. We had a developer tag along, which was a game changer. As a designer, you can’t fully grasp Rive without a peek at that dark side known as Runtimes!
Balance functionality and creativity: Channel your inner developer! Prioritizing functionality doesn't squash your design freedom. It just provides you with a solid framework for creativity.
Visual tools to bridge communication gaps: We naturally think visually as designers. Use visual tools for brainstorming and ensure you both share a clear vision.
For me, having creative chats with developers is also great! We usually stick to our corners, sizing each other up like we’re in a standoff, but programming is a creative playground, too!
Document your process
Find a system to track your learning journey that works for you. Do project retrospectives or share your challenges and solutions with other Rive designers. Documenting will reinforce your understanding!
Test and refine
Take the time to find a collaborative process and a common language that fits your team.
Optimize your files: Editor tricks
Your prep work is done. Time to design and animate! Boost your workflow with these tips:
Tame the creative chaos
While chaotic exploration can be fun, staying organized is crucial as your idea takes shape. Rive has excellent tools to help you keep your projects in check. Use folders, tags, groups, and clear naming conventions to quickly find what you need and collaborate better.
💡 Tip: Use groups and tags within your hierarchy to keep everything organized and manageable. This way, it’ll be easier and faster to make revisions or changes down the line.
Unlock design flexibility with the State Machine
The State Machine is the heart and soul of Rive. If you’re coming from traditional animation tools, it might take some time to wrap your head around this less-linear way of working. Once you get the hang of it, you'll realize state machines add a whole new level of flexibility to your workflow.
💡 Tip: You don’t need to animate everything in every timeline. Animation mixing allows you to create rich, layered interactions and easily remix timelines for fresh outcomes. Efficiency? Check!
Less is more: Use as few keys as possible
Want to keep your projects slick and your file sizes small? In Rive, it’s essential to be aware of your keyframe count. Here are some strategies:
Simplified keying: Use bones and constraints to animate multiple parts with fewer keyframes. Move a parent bone to affect its child bones or key a few strategic bones for complex animations. Bind shapes to bones and weigh them to achieve complex deformations without manually animating each vertex.
Automated movements: Constraints can automate movements based on other assets, reducing manual keyframing. Adjust the strength to control the influence of constraints for precise control.
IK (Inverse Kinematics) constraint: Control the end effector of a bone chain while the software calculates intermediate bone positions, minimizing keyframes for complex movements.
Toggle the visibility of your assets with Solos: Solos are perfect for applying different skins or customizations without animating each object’s opacity.
Simplifying curves: Use the graph editor in Rive to simplify keyframe curves by scaling down or smoothing out animation data, reducing keyframes while maintaining movement
💡 Tip: Solos are also great for quick brainstorming! Use them to test ideas and then clean up unused options.
Optimize raster assets
When working with raster assets, optimizing them is key to improving your project's performance:
Use the right size: Resize images to match the display area. If your image will be displayed at 200x200 px, upload a 200x200 px image. Avoid larger images as they only consume extra memory.
Balance quality and file size: Optimize raster assets before uploading them to Rive. Once in Rive, apply WebP compression in the Assets panel to maintain visual quality while reducing file sizes.
💡 Tip: Run .riv file size tests after uploading all assets before animating. If the file size is larger than expected, see if there's anything you can optimize even more
Tidy up before you ship
Time to export your project! Double-check that everything's set first:
Clean up assets: Remove any unused assets and artboards for a tidy and optimized file.
Check timelines: Look for any unnecessary keyframes or timelines.
Test the State Machine: Ensure everything works as it should. Check for unnecessary loops, states, inputs, or listeners. Verify that the blend states transition correctly to other states or exit states. Lastly, ensure that events are reported correctly and at the right moments.
💡 Tip: Add the developers implementing your file as Viewers in the Rive editor so they can inspect the file if needed.
Rive and thrive!
As a designer in the Rive pipeline, you’re the architect of the building, and your choices impact efficiency.
Stay updated on new features and never stop learning: explore Rive’s documentation and engage with the community to keep leveling up your skills. Approach each project with this mindset and unlock Rive’s full potential!
Join our newsletter
Get all the latest Rive news delivered to your inbox.