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.

  • Wireframe, design and prototype websites and mobile apps with our Common stencils, Smart Shapes and UI kits.
  • Map out structural and behavioral relationships – with Flowchart, UML, ERD Model and Use Case stencils – to create system diagrams, process maps, flowcharts, and sitemaps.
  • Visualize data, produce stunning infographics, and create business intelligence dashboards with our dedicated and fully editable Charts stencils.
  • Brainstorm and improvise to capture and give shape to all kinds of ideas during the initial  ideation and planning phase of a project.
To see use cases of each of these types of stencils, check out our collection of free, curated Templates. Use these examples to jump-start your project, understand best-practices, or just to experiment.

As you can see, 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.


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 want to learn how to add Interactions to your objects, click here.