With InVision Studio, shapes can be incredibly powerful. Follow Drew Bridewell as he demonstrates the power and flexibility of working with shapes inside of Studio.
- [Instructor] So now I wanna jump in to drawing shapes inside of Studio. These are things that you're gonna use on a day-to-day basis as a designer. Now, up here in the top you're gonna notice a little carrot menu. This is where you access your shapes. Your rectangle, your rounded rectangle, your oval. These are all keyboard shortcuts. "O" is oval, rounded rectangle is "U", and the rectangle's "R". Get comfortable using these keyboard shortcuts because it's gonna make your life a lot easier inside the tool.
So just off the bat, to get started, I'm gonna hit "R" on my keyboard and it's gonna change my cursor. I'm gonna just draw a shape and you can see how it is giving me the smart guides and it's selecting it. So once I click and drag, it's now here on our board. I can move this around, use it any way and I'm gonna see these little guides to help me align where I want it. But if wanted to take that a step further, I could go in here and change the colors, the fills.
I could change the borders and then all the other parameters over here on the right. Now one other cool thing inside of Studio is you can pin these things. So if I wanted to pin this middle center center, and if I resize my art board, it's going to stay inside the center as I drag this out. This is a nice little trick that Studio gives to you. So now I wanna show you how easy it is to make an oval. So I'm gonna click "O" on my keyboard and this time around I'm gonna hold "shift". Now shift and click is similar to the other design tools that you use across the industry, like Sketch or Adobe products.
This is going to maintain the hight and width that you're drawing. So if I click and drag, it's going to maintain, you can see it's like 138 pixels by 138 pixels. It's going to maintain that size. So now if I change the color of this so you can see it, and now I have it and its perfect circle. Now if I wanted to make a duplicate of this, I could "command D" and make a copy of this, drag it over. I could also hit "alt" on my keyboard and drag this down to make another duplicate.
So right off the bat these are keyboard shortcuts that you'll just get really comfortable using and that will help you speed up the process. And for the rounded rectangle, if I just click that from the menu bar, when I drag this I'm automatically going to get those rounded corners and if I change the color so you can see it again, now I have those rounded corners. You can still get those rounded corners just by changing the border radius over here on the right. So I selected the rectangle and if I make this bigger, now I'm getting that same effect and you can see how it changes inside of Studio.
And that's working with rectangle shapes and ovals inside of Studio. There's also a few more things that I'm gonna show you in a later video about how you can pin these elements because when you're working inside of Studio and you're doing designs, you're gonna wanna use shapes quite a bit to do wireframes and it's gonna make it your skeleton of your experience. So this is a little taste of drawing simple shapes inside of Studio.
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
Share this video
Embed this video
Video: Drawing, editing, and formatting shapes