Hello and welcome to sketch together. On this video we're going to take a look at the

newest addition to the craft plugin from inVision called “prototype”. Prototype allows

you to create rapid prototypes inside sketch without leaving the app, just

previewed on your phone. And not only that but it also gives you access to

native iOS components like the camera

the keyboard and the web viewer. This is seriously a game changer. A plug-in that

will render a lot of mobile prototyping tools

obsolete. Right now at the time and recording this for type is only

available suvidha so if you want to try it out reach out to envision and ask

them for an access key

you might get lucky okay enough talk let's get to it

ok so a prototype is part of the craft plugin

once you have installed it will appear here and you will be able to turn it on

or turn it off right now I'm prototype data and I'm able to use it so it also

appears here on my menu and I can start playing with it

so let's see the first thing that you can do with it which is adding links

between strings and you can create links between screens with anybody or any

group and you can also do it with just the pressing C so for example here i'm

going to add a link between this button and this screen

so just press seed and then I can start adding a link to that screen and then I

can start adding a gesture or I can also say what is the what is the behavior and

the type of animation so for this one I'm going to say that it animates from

the right and I at the link and that's that's it took for adding links

let's test it on my phone and i have quicktime player or night so so we can

see this is currently my phone and here i am going to i have the ambition viewer

app and i'm going to open the prototype and have it here and I tapenade and

input fields and then

it opens the screen exactly how you would expect it to do so now I'm going

to add another all the links to all the different screens all things that i want

to show you when to press see this one will link to this at link this one will

link to this screen

all of them are going to be pushing for this one is going to be

yeah from the right and then you know what this one

i'm going to edit instead of coming from the ride

yeah as you can see i can edit that those gestures here to edit

instead of coming from the right I'm going to say that has come from from the

bottom

justice the camera would do to close this and then I'm going to add another

link to the fixed gathers button

I think I already did one for this seat and it takes them here from the right

yet

whatever now I'm going to add a close button so this one

the first thing also that I want to do is this one too this link i wanted to

add us to show as a model so and when he chose this a model you have the ability

to add a constructor which is an overly so i'm going to say black and capacity

seventy percent is good and also a blue background and then when it animates out

it's going to be the opposite

instead of coming from the bottom it from the top to the bottom and yeah i'm

going to save it

and over here i'm going to start adding links back

so for example this guy sorry

this guy going to press seat and then instead of Lincoln to back to the screen

i'm going to say that it goes back as or here yet

add the link then this one and select this

it's like and then going to say that closest perfect

this one is going to be a back button so back and then this one also a back

button

perfect i added all my links between the screens and I can start testing it

I'm going to go here to the to quicktime and select sorry

the start screen and yeah this is my phone I can start to open this and I go

back open this the social system model and close it

the fixed gator comes from the from the right

the webview the screen comes from the right to and I go back

cool i added all my links and this was again this was inside sketch without

leaving sketch this is a game changer as I'm telling you now

this is one of the coolest things from this plug-in is that you can add input

fields and you can make any text layer an input field and let's go ahead and

try this

so i'm going to open this and here there's a button that says input field

so this text later i'm going to turn into an input field and have all these

options

so I'm going to use email as a placeholder and then also it allows me

to say what type of what type of input is it and i want to say a single line

which is since it's an email

no actually i'm going to select email address and then by the fault the keypad

is going to be the email keypad and that's it

I think those that's all I need and also for this one going to say and then put

feel too but this one is going to be a password and automatically adds the

keypad that simple text and the place call this password you want to say safe

and let's preview so I want to open just as you can see here is different from

the front of the sign words that looks like a placeholder already is a great

so i'm going to press on it and automatically gives me the keyboard and

I can start typing and at and I can put my keyboard

my my email as you can see it cuts here and that's because I over here all my

design i made it small so I'm going to make it grow it a little bit

the same with this guy i'm going to make a little bit bigger and let's test it

out so it press again and I can start typing and now it keeps me all that

space

i'm going to select the password sorry

and it acts as a password as it highlights every input that i put which

is pretty pretty pretty cool

it's you having access to the iOS native keyboard is amazing

so now let's test the camera yes i'm going to be able to test the camera

so this guy i'm going to add a link to it this link is going to be to the

camera here you can see and i'm going to add a link and by default going to say

yeah rear and then I'm going to add that link and also here i want that photo the

right took whatever it will take

I want to be displayed in this this thing

so to do that I don't know if it's going to be easier to you later but right now

you do it by making that later

call photo

so I'm going to try it up let me open here quick time so you can see what I'm

doing here i'm going to press the take pic button and as you can see now I

access the camera and i'm going to do a selfie mode

hello that's looks horrible

as we take that photo there you go

i'm going to use that photo and then automatically put it on my design to now

also sometimes you want to have everything is a struggle on every port

type but sometimes you want to say some of the Heather Heather to make it fixed

or footer so i'm going to select this and I'm going to go to prototype and I'm

going to say this is a fixed either so it will always be fixed to the top and

then this button is going to be fixed fitter and now let's test it

let me open in quicktime so you can see what's going on I open my prototype

and now everything is a scrollable except for the parts that I said that

were fixed

she's pretty pretty pretty fucking cool

ok so now i'm going to show you also the web you

yeah you can also access any website so for example this one I'm going to say

going to make it a web view this later

going to go to HTTP and let's go to let's see if it opens the sketch

together

sketch together that I hope scroll enable hopefully it's a mobile friendly

and safe and let's preview and let me open my web your yet

as you can see here I have access to to see all of my website is scheduled to do

inside my pearl type

I go back oops apparently to open it and then there you go

damn it even load the animations well it's just a web yours is like accident

safari from your prototype just freaking amazing

and that's it those are the the main the main things that you can do with with

with craft to point out

let me show you again so you can add links then you can add inputs and make

anything on input field any text layer and even access different key paths just

freaking cool and add backlink back and then access the camera going to take

another selfie

that's horrible

the next it you can also say that some some of them are going to be fixed

either so fixed footers and also you can add web you as you can see here i have a

website open my website go check it out

it's pretty cool and thats it thats that's horribly horribly awesome and I

whenever is available for everyone

I will ask you to check it out because this is again a game changer