InVision Studio tip of the week: Responsive design with containers
Hi team, so I’m sure you’ve all had a look at containers — we’re gonna give you the full breakdown of what they are and how you can use them to make all of your designs sweet and responsive!
So what’s a container? A container is different to a group in that it acts like an artboard within the artboard.
Check it out!
Groups can either act as groups or containers. First we have to put them inside a group before we can change the group to a container. Select the layers you want inside your group and now press Cmd+G on the keyboard.
Now we’ve made the group, we can now convert the group into a container in the inspector panel on the right had side of Studio. You can toggle between it being a group or a container whenever you need.
We want this image layer to maintain its 100% width across the container. We can do that by pinning elements to the top, left and right from the right hand inspector panel. Now when we stretch that layer it will resize accordingly. Responsively!
We want the container to do the same. Now let’s put this container inside the main container and set the pinning to also be top, left and right.
We’ve got everything sorted! Let’s go ahead and resize the container containing all of our elements we’ve just set up.
Boom! You’ll notice that when we resize the container, all of the pinning that we’ve put in place now resizes all of the components inside the containers accordingly!
#Responsive
Reminder for places to find more fun stuff!
- Take a look at our Studio Jams to see what designers like you are creating with Studio (I created one for an infinite scrolling prototype that I think you’ll love)
- Follow me on Dribbble and see the latest concept I created on scrolling and pinning here
Learn more tips, tricks, and get access to complete video tutorial series at Learn Studio
