We’re excited to announce the release of Ext JS Stencils, a complete UI asset kit for Adobe Illustrator. With the recent release of Sencha Ext JS 6, we wanted to include assets that help designers easily mock up applications. Ext JS Stencils contains all of the components and styles used within the Ext JS classic toolkit. Stencils can be used in a product development workflow to help designers communicate with developers and other stakeholders. Stencils consist of three Adobe Illustrator files (for the Triton, Crisp, and Neptune themes) that you can use to design great looking applications quickly and easily.
Our primary motivation for creating Stencils was to help improve communication between designers and developers. We learned from our customers that one of the major challenges for designers in an application development cycle was understanding the breadth of UI components and styles available in Ext JS. We addressed this concern by providing visual assets that match exactly what is available within the framework. We chose to create these assets in Illustrator because it is one of the most widely used design tools among designers.
While creating Ext JS Stencils, we went to great lengths to make sure that it would be an accurate representation of what you can achieve with Ext JS 6 – to the very last pixel. We created all of the Ext JS components in vector form and converted them into symbols, so you can quickly and easily create your application mockups. The Illustrator symbols can be scaled intelligently without distortion because we used 9-slice scaling. In Illustrator, symbols are found in the symbol panel, and we made sure that the symbols we introduced with Ext JS Stencils follow a standard naming convention. Additionally, we preconfigured all of the text styles into the character styles panel and included a full-color palette for each theme.
Last, we used Ext JS Stencils to build some sample application wireframes, which you can find in the Illustrator document. With these examples, we are demonstrating possible customizations you can make in Ext JS. In one example, we created a mockup of a video library application. While the header section is not an Ext JS component, after consulting with one of our engineers we found that a custom header like this can be easily implemented using XTemplates. For everything else, we used the out-of-the-box Ext JS component symbols: side navigation tabs, buttons, grids, and grid widgets.
In another example, we created a website inspired by the popular advertisement website Craigslist. Our goal was to make it easy to visualize the best way to design a well-known website and use Ext JS to build it. In doing so, we decided to configure the home page with an Ext JS Accordion Layout. This layout make it easier for users to navigate dozens of categories.
We hope these examples are useful and you enjoy using Ext JS Stencils to create great application mockups for your products.
To get you started, we have created a tutorial video that walks you through the basics on how to use Ext JS Stencils. Try it out, and share your feedback in the forum.
Tuan Nguyen says
Great tool !!!
Dan says
doesn’t work with AI 15.02 ;(
Any way you could save the files for the older format ?
Alex says
+1 fpr the CS 5 / 5.5 Format
Would be even better if they were converted for use with OmniGraffle
Ryan says
doesn’t work in CS4 either :-(
Miro says
We are looking into preparing a set of stencils for older versions of Illustrator as soon as possible. In the meantime it would be really useful if you could let us know which version of Illustrator are you using.
Timo says
Any plans to provide something for Sketch 3 too.
Miro says
We have added a version of stencils for CS4 version of Illustrator (this should also work for CS5 and CS6 users) in case you do not have Illustrator CC version. You can download it from here:
http://pages.sencha.com/Stencils_LP_2.html
Michal Charvát says
Any plans to release Balsamiq symbols?
Miro says
At the moment we are looking into possibilities to make something similar for Sketch and Omnigraffle.
John Clark says
I think both Sketch and OmniGraffle support importing PDF. I had a friend convert from Illustrator to PDF and I was able to import most of what I needed into OmniGraffle. There was a bit of cleanup since everything in the PDF comes across as individual shapes (in some cases, each letter was its own shape), but it worked for the most part.
Miro says
Indeed, importing shouldn’t be too problematic, but we will be looking to polish up all those little artifacts and prepare more functional versions up to the same level of quality as the Illustrator assets.
Shahar says
Is there a way to import our own sencha generated theme to this tool and work on it?
Mary Rose Tabac says
Hi There,
I am not able to view the AI file properly. Is there any missing link I need to know about?
I Just see:
“This is an Adobe® Illustrator® File that was,saved without PDF Content…….
Sean says
Any chance of getting the Illustrator version of the files saved with a PDF Stream so it can be used with Affinity Designer?
Sean says
Additional info when tried opening in Affinity Designer…
“This is an Adobe® Illustrator® File that was saved without PDF Content.
To Place or open this le in other applications, it should be re-saved from Adobe Illustrator with the “Create PDF Compatible File” option turned on. This option is in the Illustrator Native Format Options dialog box, which appears when saving an Adobe Illustrator file using the Save As command.”
Sean says
As a note for others…
I was able to bring the stencils into Affinity Designer by downloading the Sketch version of the stencils, opening it in a trial version of Sketch, saving as PDF, opening the PDF in Affinity Designer, saving it as an Affinity Designer file.
Andrew Hemans says
Hi Sean,
I’m glad you were able to get this working in Affinity. We are currently working on an update for Stencils that will include updated components, during this process we are looking into supporting a few more design programs and including PDF or SVG versions of Stencils.
Thanks,
Andrew
Dhanesh says
How can I use mockup created with Stencils in AI for development?
Is there a js/css extract from Stencils that can be used as starting point?
Thanks
Andrew Hemans says
Hi Dhanesh,
Currently Stencils is only offered as a UI kit with all Ext JS components meant to be used only for wire-framing and mocking up Ext JS applications. If you are interested in visually developing your Ext JS Applications check out Sencha Architect.
Thanks,
Andrew
Sergej says
Hi! Is there a classic theme stencils?
Andrew Hemans says
Hi Sergej,
While Stencils was only built to mimic our Neptune, Crisp, and Triton themes, all of the components are still available for wire framing. However the Stencils for both Sketch and Illustrator are built using Symbols which you can edit yourself to match the classic more closely.
Thanks,
Andrew
Shalin says
I do wireframes with Creately and here are some good wireframe examples that could be made using javascripsts. There are 1000s of examples in the diagram community.
Andrew Hemans says
Hi Shalin,
I’m happy to hear that you create wireframes for your products. If you would like to create wireframes using Ext JS Stencils and Creatly, you can download the SVG/PNG files and import them into your Creatly projects.
Thanks,
Andrew
Joe Fraser says
OK, lets say I use Stencil. Is it possible to export the ExtJs compents from Stencil to Sencha Architect? Can this be done to save time.