Sorry, the InVision Help Center does not support Internet Explorer. Please download Microsoft Edge or another modern browser.


InVision ambassador ambassador
Felipe Ribeiro Felipe Ribeiro

Sketch/Craft prototype: How to fix elements when scrolling?

If I prototype using simply sketch, it works. But the fixed position is totally ignored by Craft. Is it possible to make it to work?

4

comments

sort by

official comment
Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Felipe,

At this time, the behavior you're attempting to achieve is not currently possible. However, you could potentially create this effect by using fixed headers and footers. If you want a button to float on top of your design as you scroll (for example: a floating action button in Material Design), you can create a fixed element using fixed headers and footers. To learn more about this functionality, please view the video here.

Also, it appears as if our Product and Support teams are currently tracking interest to allow floating fixed elements in Craft Prototype. I will open a ticket on your behalf to track your vote for this feature. Please look for a message confirming your vote soon.

Please let me know if there's anything else I can help you with on this topic.

Thanks,

Shaina

If anybody else would like to add their vote for this feature, please contact Support here and voice your opinion!


Jonas Svensson
InVision ambassador Jonas Svensson , ambassador
Comment actions Permalink

Thanks for the explanation and link to the craft video. This feature would be awesome to have directly in Sketch though so that you don't have to leave Sketch to complete your design and flow. I add my vote to include this feature to Sketch.

 

Br. 

Jonas

1

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Jonas,

I'm happy to hear that the explanation and video provided above were helpful to you! I will open a ticket on your behalf to track your vote for this feature. Please look for a message confirming your vote soon.

Have a wonderful day,

Shaina

0

Wei QIng
InVision ambassador Wei QIng , ambassador
Comment actions Permalink

Hei, why was fixed header deleted in prototype from Sketch? When can Craft bring it back in Sketch? What is the reason it still lacks in Craft? 

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador Edited
Comment actions Permalink

Hi Wei,

Thanks for reaching out here in Community about this. We have received similar feedback from other users and are currently tracking a feature request to add the option to add fixed footers and headers in Craft prototype that can be synced to InVision.

I will open a ticket on your behalf to track your interest for this. Please keep an eye out for an email confirming that we've added your feedback to this feature request.

Please let me know if there's anything else I can help you out with.

Best,

Shaina

If anybody else would like to add their feedback about this potential feature, please fill out a ticket with Support here detailing the feature you are looking for.

0

Michael, Tan Qinyuan
InVision ambassador Michael, Tan Qinyuan , ambassador Edited
Comment actions Permalink

Hi, my name is Michael. I have explored for a whole night that how to make the fixed headers and footers in sketch in using craft. The video showed the process in other application. In the newest version of craft, i can not find the function of locking the headers and footers in the screen. 

thank you!

0

Shaina Torgerson
InVision ambassador Shaina Torgerson, InVision Employee , ambassador
Comment actions Permalink

Hi Michael,

Sorry to hear that you're having trouble creating fixed headers and footers in your prototype. In order to do this, you will need to add about 20 px of transparent area in your Sketch file at either the top (header) or bottom (footer). Then, you will upload this file as a PNG to the InVision Cloud where you will add the fixed header/footer function to the prototype.

To see step-by-step instructions on how to create a fixed element using fixed headers or footers, check out the video in this Help Article. To learn more about this, here's another Help Article, How do I set fixed headers and footers?. If you are still having issues with creating these fixed headers or footers by using the function in the Cloud, please let me know.

Hope this helps,

Shaina

0

join the conversation

to comment, sign up or sign in.