Sketch to Origami Tutorial | Interactive UX Prototyping
8476 次观看 · 2019-05-13
交互设计
If you are new to Origami, learn the basics here: https://www.youtube.com/watch?v=rPpjk9PbkCE&t=469s
In this video I go over how to make your Sketch designs interactive with Origami Studio. Origami Studio is a software that you can use to create mobile, web and tablet prototypes. I use Origami to create interactive prototypes for user testing and for creating animation documentation. I show you how to get started by importing designs and adding tap and swipe interactivity.
In this lesson I go over how to make a delete icon appear when a list item is swiped towards the left. I also show you how to make the remaining list items animate upwards.
I show you:
- 1:02 How to import Sketch designs into Origami
- 3:24 How to add a swipe interaction
- 4:32 How to add an icon from Sketch
- 5:05 How to add multiple transitions to one switch patch
- 5:42 How to add a tap interaction
- 6:04 How to change the position and opacity of one layer
- 7:12 How to add a transition of the y position of multiple layers
- 8:05 How to add a wait patch
Get Started with Origami here: https://www.youtube.com/watch?v=rPpjk...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise
In this video I go over how to make your Sketch designs interactive with Origami Studio. Origami Studio is a software that you can use to create mobile, web and tablet prototypes. I use Origami to create interactive prototypes for user testing and for creating animation documentation. I show you how to get started by importing designs and adding tap and swipe interactivity.
In this lesson I go over how to make a delete icon appear when a list item is swiped towards the left. I also show you how to make the remaining list items animate upwards.
I show you:
- 1:02 How to import Sketch designs into Origami
- 3:24 How to add a swipe interaction
- 4:32 How to add an icon from Sketch
- 5:05 How to add multiple transitions to one switch patch
- 5:42 How to add a tap interaction
- 6:04 How to change the position and opacity of one layer
- 7:12 How to add a transition of the y position of multiple layers
- 8:05 How to add a wait patch
Get Started with Origami here: https://www.youtube.com/watch?v=rPpjk...
Let's Connect
Dribbble: https://dribbble.com/angeladelise
Blog: https://medium.com/@angeladelise