Design with Stencils

What are Stencils

Stencils is a complete UI asset kit for Adobe Illustrator, Adobe XD, Sketch, Balsamiq and is also available as SVG/PNG for use with other programs. Stencils contains all of the components and styles used in the Ext JS Classic and Modern toolkits as well as ExtAngular and ExtReact Components. Designers can use visual assets that exactly match all of the UI components that Sencha offers – down to the very last pixel. They can work with the components as vector files and symbols rather than writing code. With Stencils, designers can streamline the process of creating mockups for great looking web applications.

Getting Started

Download the Stencils

There are two ways to get stencils at no additional cost.

1. Download them from sencha.com stencils product.
2. Or existing customers can download them from the support portal downloads.

Prerequisites

What you need to run Stencils:

• Adobe Illustrator CC or CS4
• Adobe XD 13.0.12.14+ for macOS or Windows
• Balsamiq
• Sketch 51.3+
• Other design or prototyping software that support SVGs or PNGs.

Fonts

The Triton theme uses Open Sans, install it from the Open Sans folder before opening any Triton themes.

The Material theme uses Roboto, install it from the Material folder before opening any Triton themes.

Installing Open Sans or Roboto on Mac

1. Under Mac OS X 10.3 or above (including the FontBook):
   • Double-click the font file and clcik Install font.
2. Under any version of Mac OS X:
   • Put the files into /Library/Fonts (for all users), or into /Users/Your_username/Library/Fonts (for you only).
3. Under Mac OS 9 or earlier:
   • First, convert the font files (.ttf or .otf) you downloaded. Then drag the fonts suitcases into the System folder. The system propmts you to add them to the Fonts folder.

Installing Open Sans or Roboto on Windows

1. Under Windows 10/8/7/Vista:
   • Select the font files (.ttf, .otf or .fon) then right-click and choose Install.
2. Under any version of Windows
   • Place the font files (.ttf, .otf or .fon) into the Fonts folder, usually C:\Windows\Fonts or C:\WINNT\Fonts (you can also reach the Fonts folder following this route: Start Menu > Control Panel > Appearance and Themes > Fonts).

How to use the stencils

A quick a guide to help you use the Sencha Stencils in Sketch, Illustrator and XD.

Sketch

To build a wireframe or mockup in Sketch, create an artboard and place a symbol of a component onto your artboard. To add a symbol go to Insert > Document. Choose the correct toolkit either Classic Components or Modern Components. Then select component family folder (i.e. Buttons) and click onto the specific component.

XD

To build a wireframe or mockup in XD, create an artboard by clicking onto the Artboard tool.

Then, you can either choose a preset artboard or create a custom board.

To use a preset artboard click one of the presets on the right panel and click the location where you want the artboard to be placed.

To define a custom sized artboard, select the artboard tool and draw the artboard you want directly on the pasteboard area.

Once you have an artboard, open the Assets panel.

Then select a symbol of a component, drag and drop a symbol of a component onto your artboard.

Illustrator

To build a wireframe or mockup in Illustrator you’ll need to create a new artboard. Open the edit artboard window (File > Document Setup > Edit Artboard) Next in the Edit Artboard Window draw an artboard or click onto the Artboard Tool and drag it in the canvas area of the Illustrator document. Once you have an artboard, open Symbols panels then select a symbol of a component and drag and it onto your artboard.