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