STUDIO is an entirely new design tool based on code used in real-world development.

This is why STUDIO's layout design methodology is different from existing design tools.

STUDIO uses the same box layout used in real-world website and application development.

What is box layout?

STUDIO's box layout is based on a building block structure, in which the elements are stacked.

Conventional design tools are like a sheet of paper with elements on a table, as shown on the left in the figure below, but STUDIO's box layout is more like a stack of elements on a table, as shown on the right in the figure below.

Left: Existing type, Right: STUDIO

Let's use another example to illustrate the difference. The figure on the left shows the elemental structure adopted by conventional design tools, and the figure on the right shows the elemental structure based on the box layout adopted by STUDIO.

In order to create complex layouts with box layouts, you need to have a hierarchical structure with the parent elements as vertices. Specifically, as shown in the figure on the right, this is an image of creating a layout by adding a child element to a parent element.

Element Direction

The orientation of the box layout elements is specified by the parent element. Four directions can be specified: horizontal and vertical (→・↓) and each opposite direction (←・↑).

The sequence of elements in STUDIO can be specified in four directions

Also, the menu that specifies the order of the elements is located in the direction of the arrow below.

→ : Right side ↓ : Lower side ← : Left side ↑ : Upper side


Use the margins if you want to fine-tune the location of the element. There are two types of margins: margins (outer margins) and padding (inner margins).

Adjusting margin and padding

In STUDIO, the margins are shown in orange and the padding in green. You can use the arrows that appear when you move the cursor over the blue selection frame to stretch it up, down, left and right to adjust it evenly.

Switching between individual margin settings

Margins and padding can also be changed by specifying a numerical value in the Tools menu at the top. Also, by clicking the key icon, you can set the left, right, up, down, left, and right as one.

Did this answer your question?