By now you should be ready to create additional screens for your app. These screens are called artboards.
The best way to do this is by duplicating the existing art board. This ensures the new artboard is the same size, this is important because phone screens cannot change size.
Duplicating Artboards
To duplicate the artboard, we need to use the selection tool to select the title of the artboard (This is probably called something like “iPhone 14 Pro Max”). After selecting, we can duplicate the window two ways; by pressing cmd+d or by dragging the artboard by the title while holding alt/option.
After duplicating the artboard we can delete the unneeded elements and continue working.
Creating Buttons
Before we create our transitions we need a button to press to activate it. These buttons can a shape, image, text or be any type of object.
If our button is made of of multiple objects we can group them together using the select tool to select multiple objects while holding shift. We can then right-click the selection and choose group, or press cmd+g. The group of objects selected will now be treated as one object.
The Prototype Menu
Up until this point we have been using the Design menu to define the visual aesthetic of our app, we now need to move to the Protoype menu in the top left corner to create our transitions.
To create a transition, use the select tool to select your button. You will notice a blue arrow on the right side of the object.
You can now drag this arrow to the artboard you want your button to link to and unclick. after releasing you will notice a connection between the button and artboard – these connections are called wires.
You can now text your button by clicking the play button in the top right corner of the screen. You may need to click the artboard that has your button in it first to start in the right place.
Types of Transitions
With your now linked button selected you might notice the action menu on the right side of the screen. here you can change the type of transition that will happen when the button is pressed.
Maybe you want everything to move into place with Auto-Animate or the new screen to fade in over the old one with Overlay.
Experiment with the different types to see what effects can be done!
