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.
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'.
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.
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.
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:
Vertical options:
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.
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.
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.
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.
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.
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.
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.
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.
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.
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!).
