Figma Motion
- Figma design challenge
- Giving myself 24 hrs
Addressing limitations with Figma’s motion editing.
Note: I made this case study in early 2025. Figma has since announced Figma Motion. Check theirs out and compare to my case study.
User Research
To ensure the project would address real pain points, I conducted user interviews and user research from Figma users, designers, and illustrators. Here were their complaints:
- “The moment I tried to do advanced animation on Figma, I got disappointed.” (Reddit user)
- “I use Figma’s prototyping for simple movements, but it’s a whole process. I don’t want to have to make 10 frames just to prototype a cursor moving.” (Iris Leung, Tesla product designer)
- “If you know a decent animation or motion editing software already, I’d stick with that over Figma.” (Reddit user)
Simple Additions
The bulk of complaints from Figma users can be boiled down to 2 main pain points:
- Limitations with editing functionality
- Cluttered interface when prototyping motion graphics
I decided to address these two complaints through adding 2 features: timeline and key framing.
Walkthrough
Multiple prototyping frames can simplify into a single frame, clearing up user space and simplifying workflow.
User flow:
- Enter prototype mode and click on a frame. Open the timeline using the hot key Option + Command + T.
- Select an item you want to edit in timeline. The timeline automatically adds once the user clicks an item.
- Add keyframes using either the hot key Shift + K, or manually from the timeline or side panel. Curves and ease can be added through the keyframes, eliminating unnecessary space and giving users more power in their motion editing.
Reduced Space
Isolated working area to one frame instead of multiple.
Hot Keys
Add keyframe
Shift + K
Open timeline
Option + Command + T
additional exploration: stop motion animating
Along with motion editing, I explored traditional stop motion animating within Figma.
More in depth case study coming soon.
Takeaways and Potential Improvements
Giving myself a 24 hr timeframe pushed me to trust my decision making. Initial challenges included:
- Adding motion editing capabilities without losing sight that Figma is made for product designers
- How can we simplify powerful motion editing tools to be comprehensible for product designers?
- How can we implement new features without breaking workflow?
Overall, I believe the project found success in being able to give users powerful editing tools while being intuitive. However, for future iterations I would experiment with integrating the workflow more seamlessly as to not risk a complicated design flow for strong functionality.
Figma Motion
- Figma design challenge
- Giving myself 24 hrs
Addressing limitations with Figma’s motion editing.
Note: I made this case study in early 2025. Figma has since announced Figma Motion. Check theirs out and compare to my case study.
User Research
To ensure the project would address real pain points, I conducted user interviews and user research from Figma users, designers, and illustrators. Here were their complaints:
- “The moment I tried to do advanced animation on Figma, I got disappointed.” (Reddit user)
- “I use Figma’s prototyping for simple movements, but it’s a whole process. I don’t want to have to make 10 frames just to prototype a cursor moving.” (Iris Leung, Tesla product designer)
- “If you know a decent animation or motion editing software already, I’d stick with that over Figma.” (Reddit user)
Simple Additions
The bulk of complaints from Figma users can be boiled down to 2 main pain points:
- Limitations with editing functionality
- Cluttered interface when prototyping motion graphics
I decided to address these two complaints through adding 2 features: timeline and key framing.
Walkthrough
Multiple prototyping frames can simplify into a single frame, clearing up user space and simplifying workflow.
User flow:
- Enter prototype mode and click on a frame. Open the timeline using the hot key Option + Command + T.
- Select an item you want to edit in timeline. The timeline automatically adds once the user clicks an item.
- Add keyframes using either the hot key Shift + K, or manually from the timeline or side panel. Curves and ease can be added through the keyframes, eliminating unnecessary space and giving users more power in their motion editing.
Reduced Space
Isolated working area to one frame instead of multiple.
Hot Keys
Add keyframe
Shift + K
Open timeline
Option + Command + T
additional exploration: stop motion animating
Along with motion editing, I explored traditional stop motion animating within Figma.
More in depth case study coming soon.
Takeaways and Potential Improvements
Giving myself a 24 hr timeframe pushed me to trust my decision making. Initial challenges included:
- Adding motion editing capabilities without losing sight that Figma is made for product designers
- How can we simplify powerful motion editing tools to be comprehensible for product designers?
- How can we implement new features without breaking workflow?
Overall, I believe the project found success in being able to give users powerful editing tools while being intuitive. However, for future iterations I would experiment with integrating the workflow more seamlessly as to not risk a complicated design flow for strong functionality.
Figma Motion
- Figma design challenge
- Giving myself 24 hrs
Addressing limitations with Figma’s motion editing.
Note: I made this case study in early 2025. Figma has since announced Figma Motion. Check theirs out and compare to my case study.
User Research
To ensure the project would address real pain points, I conducted user interviews and user research from Figma users, designers, and illustrators. Here were their complaints:
- “The moment I tried to do advanced animation on Figma, I got disappointed.” (Reddit user)
- “I use Figma’s prototyping for simple movements, but it’s a whole process. I don’t want to have to make 10 frames just to prototype a cursor moving.” (Iris Leung, Tesla product designer)
- “If you know a decent animation or motion editing software already, I’d stick with that over Figma.” (Reddit user)
Simple Additions
The bulk of complaints from Figma users can be boiled down to 2 main pain points:
- Limitations with editing functionality
- Cluttered interface when prototyping motion graphics
I decided to address these two complaints through adding 2 features: timeline and key framing.
Walkthrough
Multiple prototyping frames can simplify into a single frame, clearing up user space and simplifying workflow.
User flow:
- Enter prototype mode and click on a frame. Open the timeline using the hot key Option + Command + T.
- Select an item you want to edit in timeline. The timeline automatically adds once the user clicks an item.
- Add keyframes using either the hot key Shift + K, or manually from the timeline or side panel. Curves and ease can be added through the keyframes, eliminating unnecessary space and giving users more power in their motion editing.
Reduced Space
Isolated working area to one frame instead of multiple.
Hot Keys
Add keyframe
Shift + K
Open timeline
Option + Command + T
additional exploration: stop motion animating
Along with motion editing, I explored traditional stop motion animating within Figma.
More in depth case study coming soon.
Takeaways and Potential Improvements
Giving myself a 24 hr timeframe pushed me to trust my decision making. Initial challenges included:
- Adding motion editing capabilities without losing sight that Figma is made for product designers
- How can we simplify powerful motion editing tools to be comprehensible for product designers?
- How can we implement new features without breaking workflow?
Overall, I believe the project found success in being able to give users powerful editing tools while being intuitive. However, for future iterations I would experiment with integrating the workflow more seamlessly as to not risk a complicated design flow for strong functionality.