Cadabra | Creating Amazing Prototypes With CRAFT
Start my project

Creating Amazing Prototypes With CRAFT

When you need to fill your design with flashlight power and see how it becomes motional and alive you definitely need to check a new plugin  СRAFT for Sketch app. Prototyping never been so easy!

An unstopping stable level of interaction between Sketch and Invision already available and ready to implicate you. By connecting prototypes and developments in real time you can mark and change workflows magnificent!  Focus on your work and be ready to create wonderful project!

Let`s get started!


1.First stage!

-download updates from official website;

-at the bottom of the right side of a panel there is a flashlight button; 

-open layout with your cool design and make an amazing impression on your coworkers and Mum and go to prototyping mode! It`s never been so easy!


2. Ok! Now we are prepared! It’s time to dive deeper into the process! A flashlight is blue!

-choose a layer which you gonna to interact with!;

-press and  hold   C   key, then show on what sсreen you want to make a transition on!


Now we see a window with settings.


3. It is time to set how you want a prototype be shown up. Ok! Now we are making the layouts to interact in a special way.

-send a link to screen or link to overlay;

-choose a type of prototype ( gesture for your needs)  and a type of the transition. 




 4. A bit more about overlay mode. There is some kind of needs which  let you link to another screen as an overlay and this function works with it pretty cool! The method is the same.

-choose the originating layer or group and press C;

-click on the destination art-board to bring up the link modal;

-in a drop down menu select a link as overlay;

-make sure that option Stay on target sсreen is turned ON;

-select a gesture of overlay appearing;

-select position from the list.

In BG menu you can manage opacity settings, the color of this back ground will be exactly the same that target screen background




5. About positioning on the screen. Using this tool you click on a chosen layout  and it will scroll directly to the chosen position.

-choose the originating layer or group and press C;

-display a horisontal line by hovering over chosen artboard;

-click to save and add a link.




6. Going further let`s check external link which allows us to add to the prototype the transition to external link.

-choose the originating layer  and press C;

-set the destination to an external web page by clicking on External URL on the canva`s top;

-open a link in a browser by clicking on Open in new window.




7. Linking back and close.

-choose originated layer or group and press C;

-click on Link Back/Close, it is at the top of your canvas and set the destination to an external web page; 

-select Add Link to set the destination to the previous screen.




 8. Final moves! And we are ready to go to Invision and see what we did. Exited, yup?

-sync! Turn on hotspot to save all your links! It is very important! Do not miss it!

-choose a prototype or create a new one.






If you suddenly get confused after saving  do not worry!

-by clicking on a blue circle (beginning of the arrow) we can fix a problem and manage settings again;

-just click on flash light button and it will turn grey, arrows will disappear, when there are too many arrows in your working space and you want to hide them. It`s ok! Settings are saved, you can turn it back exactly the same way by pressing flashlight;

-one more good feature is moving your screens right inside workspace and it is also available.




Of course when you will interact with CRAFT there will be tons of questions for you! But common! Life is about learning new! Do not worry too much. More practise more good results!

We wish you the best!

Check our blog for the new useful kits!

You can find us here

InstagramBehanceDribbbleFacebookTwitter, Medium.

We have something special for you. 

Type the your request
Thank you
Your request has been submitted.
We’ll get in touch with you very soon!