diff --git a/UI_UX/Create_a_prototype/Part_2/README.md b/UI_UX/Create_a_prototype/Part_2/README.md new file mode 100644 index 0000000000..8ca1b8b393 --- /dev/null +++ b/UI_UX/Create_a_prototype/Part_2/README.md @@ -0,0 +1,48 @@ +# Prototype creation using Figma + +### Figma’s prototype help’s making the design of interactive by assigning a link between the frames. + +#### Prototypes are outstanding in the following way: + +1. Follow a flow of interaction + +2. portrait like a completion of an app or website + +3. Present to the stockholders + +4. Require a less amount of period + +### Let’s get into How to connect two frames ? + +1. Create 2 frames + +2. Select a particular portion where you want to connect to the other screen + +3. Click + to start a connection + +4. Drag it to the next screen, which is your goal + +* Note: If you don’t have a destination, you cannot give a connection + +![Untitled design](https://user-images.githubusercontent.com/54928117/133388777-21b8b352-e6b8-4c16-9749-4f0e181b1fbb.png) + +### From the above preview, we can conclude that it has two screens: + +When you hover on the button, **Get started**, you can view a "+" button and drag to the destination. + +The **Screen 1** represents the first flow of the screen +### Animation to prototype +![Untitled design (1)](https://user-images.githubusercontent.com/54928117/133391981-13b23a9a-5782-4c93-9064-4aa783e688fc.png) + +1. Click on to prototype +2. Move to interactions +3. Check the Animation drop down and add +4. Preview the animation + +## Style the prototype preview +![Untitled design (2)](https://user-images.githubusercontent.com/54928117/133403285-fa837816-f8c3-4d68-9bac-4c663ebb1f31.png) +1. Select a Device eg.iphone 11 pro max +2. Change to portrait and landscape +3. Preview your prototype +4. Select Background color +5. Set the prototype's Starting Frame i.e Screen 1