InVision Studio vs. Sketch: Resizing, anchoring, and positioning tools

A comparison of the responsive prototyping tools in Sketch and Studio

This is the closest you'll find to a share button… if you find this useful, I’d really appreciate if you share it.

These aren’t the share buttons you’re looking for 👋.

Before we get started... This article focuses more on the specific functionality of these tools than their practical applications. Download the source file here if you would like to follow along with the article in Studio... or join the newsletter to come back later for more practical 'How-to' articles.

Both Sketch and Studio allow for elements to be resized and repositioned as the artboard is resized. This makes it faster and easier to create responsive prototypes at a variety of device sizes. However, the resizing tools work differently between Studio and Sketch.

In Sketch, the 'Resizing' tools determine both the position and size of an element as the artboard is resized. Position and size variables can be entered as a percentage, but they are immediately translated to pixels. Elements resize based on how the 'Resizing' tools are set up rather than the height and width. For more information on resizing in Sketch, visit the Sketch Resizing Contraints documentation.

In Studio, position and size are handled completely separately. Size is determined by the height and width fields. Objects become responsive by replacing the default pixel values with percentages. The 'Resizing' tool doesn't affect an element's size, only its positioning.

This means that the Studio 'Resizing' tool can be better thought of as a 'Pinning' or 'Anchoring' tool. The 'Anchoring' tool will affect where an element is positioned on the page, but it has no effect on the size of an element. The size is managed through defining percentage-based heights and widths.

How resizing works in Studio

Resizing is extremely simple and intuitive in Studio. Every element is either pixel-based or percentage-based... there is no 'Resizing' tool. If something is pixel-based, it will remain the same size regardless of any changes to the artboard size. If it is percentage-based, the element will resize as the artboard grows and shrinks.

If an element is pinned to multiple edges (see 'How positioning works in Studio' below), it will ignore the pixel or percentage dimensions. The dimensions will update to maintain a fixed distance from the artboard or component edges when the pinning options are set to 'Top and Bottom' or 'Left and Right'.

Pixel-based, percentage-based, and 'Pinned' resizing

All percentages are calculated as a percentage of the total artboard height or width. The only exception is components (Studio's equivalent of Sketch symbols). Elements inside components will resize based on the size of the component.

To set an element to be percentage-based, type in the percentage you would like or right-click the element and select 'Percent' from the dropdown.

How to create responsive, percentage-based items in InVision Studio

How positioning works in Studio

Positioning is a little more complicated, but that also means it's a little more powerful. An element's position depends on two factors, the x and y values and the selected 'Anchoring' option.

Responsive prototyping tools highlighted in InVision Studio

The 'Anchoring' tool can be found to the right of the rotate tool in the inspector. This tool allows you to select how an element is positioned when the artboard is resized. There are six potential options. One horizontal and one vertical option must always be selected.

Horizontal options:

  • 'Left' - The left edge of an element will stay a set distance from the left edge of the artboard.
  • 'Right' - The right edge of an element will stay a set distance from the right edge of the artboard.
  • 'Center' - The horizontal center of an element will stay a set distance from the center of the artboard.
  • 'Left and Right' - Both the right and left edges of an element will stay a fixed distance from the arboard edges.
Horizontal pinning options in InVision Studio

Vertical options:

  • 'Top' - The top edge of an element will stay a set distance from the top edge of the artboard.
  • 'Bottom' - The bottom edge of an element will stay a set distance from the bottom edge of the artboard.
  • 'Center' - The vertical center of an element will stay a set distance from the center of the artboard.
  • 'Top and Bottom' - The top and bottom edges of an element will stay a set distance from the artboard edges.
Vertical pinning options in InVision Studio

Each of these pinning or anchoring options respect the pixel or percentage value that is set for x and y. Only 'Top and Bottom' or 'Left and Right' will override the pixel or percentage values. This allows for a wide combination of anchoring options.

The super nerdy, nitty-gritty of anchoring and positioning in Studio (with minimal practical application)

Since the anchoring options interact with both the fixed pixel values and flexible percentage values for x and y, there are 6 horizontal positioning combinations (see graphic below) and 6 vertical position combinations. This gives us twice as many options compared to Sketch. I'm honestly not sure how this flexibility will apply when creating responsive prototypes. It seems to mirror CSS more closely and could potentially lead to interesting CSS Grid or Flexbox-like layout options.

Examples of all 6 InVision Studio resizing options for both fixed-width pixel elements and flexible percentage-based elements
Blue is possible in Sketch, red is not

Left, right, top, and bottom positions are calculated from the artboard edge defined in the 'Anchoring' tool to the closest edge of the element. Horizontal and vertical centering is calculated from the center of the element to the center of the artboard.

The differences between Studio and Sketch

Defaults in Sketch

All elements in Sketch default to a static position and size. However, if any resizing options are applied, all elements on that artboard will change their behavior to 'Stretch' (even if they're immediately unselected). This is the equivalent of setting x, y, width, and height to percentages in Studio. Both the size and position of all elements will now change based on the size of the artboard, unless you specifically update them.

Defaults in Studio

All elements are pinned to the upper left by default (similar to Sketch). They remain static unless the 'Anchoring' options are used or they elements are changed to be percentage based. Each element acts as it is originally defined, with no global changes based on the change of a single element.

Groups in Sketch

Elements inside a group can be sized as a percentage of the group. Height and width can be input as a percentage of the group, but positioning is calculated as a percentage of the artboard.

Groups in Studio

All percentage-based positioning and sizing is calculated based on the artboard. To base an element as a percentage of the group, you can create a component.

Percentage-based elements in Sketch

Elements can be defined as a percentage of the artboard or group but are immediately translated to pixels. All resizing is done through the resizing tools.

Percentage-based elements in Studio

Elements can be defined as pixels or percentages. They will remain static if pixel-based or they will resize along with the artboard if percentage-based.


Advantages of Sketch

  • Pinning to groups - Elements can be resized and pinned to their parent group. This is only possible in Studio by creating a component, and adding more components to change the resizing may not be ideal.
  • Consistency - When defining elements as a percentage, they will always resize based on their immediate parent/group. This provides more consistency and can be easier to understand because you always know how an element is resized.

Advantages of Studio

  • Flexibility - Studio provides twice as many positioning options than Sketch because of the combination of pinning and percentages. Also, an element can be sized based on its group or the entire artboard. Leave it as a group to base sizing on the artboard or create a component to base sizing on the parent element.
  • Visibility - Sizing is more immediately visible because it can be pixel or percentage-based (i.e. It can be difficult to remember when you set something as 50% is Sketch because it immediately translates to pixels). A quick right-click can change from pixels to percentages.
  • Separation of concerns - Sizing and positioning are managed completely separately.
  • All responsive and resizing options transfer when uploading to the InVision web app (see #3 here). should you use Studio or Sketch?

Sorry, I'm not going to make it that easy for you. The explosion of new, cutting-edge design tools over the past few years has proven that different people and organizations have different goals. There is no 'perfect' tool.

This article only considers the comparison between one specific set of tools in two applications. Both Studio and Sketch have powerful methods to create responsive prototypes, but there are many other factors that should be considered when comparing tools. Now you know what's possible and can make intelligent, informed decisions.

Over the coming weeks, I'll explain the more practical steps of how these tools can help you create interactive, responsive prototypes. If you're interested, make sure to keep up-to-date by joining the Studio Study Group (the big box below!).