Stencils

Introduction to stencils

Stencils are the building blocks of design. By customizing them, you can visualize any kind of concept – and design anything that you can imagine.

Some users work with stencils to design and prototype both websites and mobile apps. Others create system diagrams, flowcharts, and sitemaps. And many simply improvise, using stencils to capture and give shape to all kinds of ideas.

There’s a wide variety of stencil types, but the core building-blocks of even the most complex stencils are shapes, texts, and icons. When combined and grouped, these three basic elements become Compound Stencils.

A compound stencil can replicate any kind of User Interface (UI) because each individual element remains both editable and customizable.

UI Kits are collections of compound stencils that represent platform-specific elements of a user interface – and reflect that platform’s design language.

In the Stencils Panel, you’ll find a full range of integrated UI kits for both mobile-app and web-page design – including iOS, Material Design, and Bootstrap.

To browse the Stencil Library, go to the Left Sidebar and click on the Stencils Tab. The tab will turn blue – and open the Stencils Panel.

01._AboutStencils.gif

If you scroll through the Stencils Panel, you’ll find different types of stencils, ranging from simple shapes, to polished and specific UI elements.

In the following section you will learn how to find stencils, add them to your project, and format both their size and style. You’ll also learn how to group them on the page, and organize them quickly and effectively in the Outline Panel.

Working with Stencils is similar to working with Templates, Images, and Icons. All these elements have the following things in common:

  • They have dedicated tabs and panels in the left sidebar
  • They share most of the same formatting tools
  • They are referred to as Objects once they’ve been added to a page
  • They can be grouped, renamed, and organized from within the Outline Panel

Once you’ve learned to work with stencils, working with other objects – like templates, images and icons – is easy.

  • If you’re looking to combine and group objects, in order to create Templates, click here.
  • If you want to learn how to add Interactions to your objects, click here.