Blocks

Pages are made up of blocks of content, like text and media, each of which can be placed and customized in various ways.

Learn more about:

• Block types

• Block settings

• Adding or moving blocks on the canvas

Blocks use flex layout settings, similar to Figma's AutoLayout options, making it easier for you to design responsive interfaces.

Responsive Design

Designware is for making professional apps and websites. Beyond the attractiveness and utility of your content, users will expect interfaces to be responsive for infinite screen sizes. This means:

• Content doesn't stick to a fixed spot on the page, like in Photoshop.

• Content doesn't overflow smaller screens, like with Wix.

• Content is sometimes altered or swapped to better suit a particular screen size.

Imagine painting on a canvas that's constantly changing size. Your portrait will stretch and warp, or become too scattered or condensed.

In Designware, the painting is your page of blocks. A block can get positioned and fill space fluidly based on its:

• Width/height, which can be fixed, fit to its content, or a % of the space it's in.

• Minimum or maximum width/height, which are hard limits that always get enforced.

• Alignment inside a parent block, similar to Figma's AutoLayout options.

• Sharing of available space with other blocks.

Don't be scared, it's actually pretty easy to build a responsive interface, and it's fun seeing blocks flow and react dynamically to different screen sizes!

To learn more, check out:

• Our video tutorial for Responsive Design.

• Layout settings, for sizing and positioning a block.

• Interior settings, for arranging its child blocks.

• Breakpoint editing, which applies unique block settings and content for specific screen sizes.