Designers are moving faster and faster these days. They’re also expected to start thinking about designing different screen sizes while moving fast. Pinning inside of Studio makes this process faster and easier. In this video, Drew shows how you can get ahead of your responsive designs when using pinning inside of InVision Studio.
- [Instructor] Oftentimes when you're designing,…you wanna be able to stick things to certain locations…on the art board.…And InVision Studio, it's incredibly easy.…So in this example I'm gonna show you…how to pin objects, groups,…in certain locations on your art board.…So the first thing I'm gonna do is…I'm gonna open up my loading screen and preview this…just to get to the state that I wanna get to.…I'm gonna Command + R here.…So my animation's loading, getting ready to scroll,…and now I have my page.…
So this is a long scrolling page…that I've set to vertical on my art board…but what I want to do is I want this navigation…at the top to be sticky.…So to do that, I just need to close that out,…pan over to my art board.…Select the group that I want to pin…and just come up to the top in the panel,…and hit pin.…Now when I do this, if I hit preview,…I scroll with my mouse and I can see…that it's sticky at the top.…Now one more example is on multiple screens,…you might wanna have a sticky footer as well.…
So I made a sticky footer ahead of time…
Author
Drew Bridewell
Released
9/19/2018- Navigating the interface
- Best practices for importing from Sketch
- Drawing, editing, and formatting shapes
- Managing layers
- Rapid prototyping
- Advanced animation
- Percentage-based scaling
- Creating, adding, and editing components
- Sharing and presenting your work
Skill Level Beginner
Duration
Views
-
Introduction
-
1. A Tour of Studio
-
The welcome window1m 19s
-
The anatomy of a document1m 27s
-
A tour of the interface3m 56s
-
Saving Studio files2m 9s
-
-
2. Importing from Sketch
-
3. Screen Design
-
Managing layers2m 21s
-
Using Boolean operations5m 8s
-
Masking layers2m 5s
-
4. Rapid Prototyping
-
Linking screens1m 58s
-
Previewing your prototype2m 31s
-
-
5. Advanced Animation
-
Using the Motion transition4m 27s
-
-
6. Working with Components
-
Component overrides2m 54s
-
7. Responsive Layout
-
Pinning elements3m 22s
-
-
8. Collaboration
-
Making layers exportable1m 17s
-
-
Conclusion
-
Next steps1m 43s
-
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Pinning elements