Components are built to aid in design consistency while remaining flexible enough to solve complex challenges from screen to screen. One of the ways in which components have flexibility is in being… well… flexible. If the contents of a component master are sized and positioned using pixel based measurements, those elements will remain static as instances are resized. If we instead use percentage based measurements and pinning, we can accomplish amazingly flexible and responsive components that resize to fit anywhere.
In this video we’ll dive into:
- Percentage-based measurements
New to Studio?
Download the latest version of InVision Studio to get startedDownload StudioDownload InVision Studio
If you've tried resizing components in Studio, you may have discovered that they don't seem to want to resize, and the reason for this is actually useful and powerful. What's going on here is that these objects are static in size because they are based on pixel based dimensions as opposed to percentage based dimensions. Components can be responsive or they can be static in size, so these components happen to be static in size. If we chose to edit the component and we select this background layer, you'll see it's 30 pixels by 150 pixels and what that means is that it's going to stay 30 pixels by 150 pixels but, if we do a right click on this field, we can change it a percentage based value and Studio will automatically calculate the appropriate percentage based on its size within its respective bounds. So, in this case that would be 100% by 100%.
If we head back and take a look at how this resizes now, we should find that the box is, in fact, scaling because it's remaining at 100% of its container size and we're changing its container size. But the arrows on the other hand, the arrows now appear to be a problem 'cause they're not staying in the middle so we'll undo that, we'll head back and edit the component again and we'll chose the arrow layer itself. And if we look on the inspector below the sizing and positioning, we have the pinning of that layer within its respective bounds. So, right now it's pinned to the top left corner which means it's going to stay in the same position relative to the top left corner. We want it to remain horizontally centered and vertically centered as its container scales.
So, now let's go back and take another look at how these scale. We'll select them both, I'll hold the option key to scale from the middle and there we go. Now it's scaling the way we want it to. The arrows are remaining pinned to the middle and they're remaining pinned to the center if we scale horizontally. Check that out. And we're also keeping that box filling the bounds because the height and width are set to 100%. You'll also notice that the arrows do not scale because I left those as pixel based dimension so those remain static. It's only the background box that I want to scale so it's only the background box that I changed to percentage based dimensions.
So there you have it. It's that easy to create responsive and scalable components in InVision Studio.