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.
What's your reaction?
0
0
Great tool !!!
doesn’t work with AI 15.02 ;(
Any way you could save the files for the older format ?
+1 fpr the CS 5 / 5.5 Format
Would be even better if they were converted for use with OmniGraffle
doesn’t work in CS4 either :-(
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.
Any plans to provide something for Sketch 3 too.
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
Any plans to release Balsamiq symbols?
At the moment we are looking into possibilities to make something similar for Sketch and Omnigraffle.
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.
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.
Is there a way to import our own sencha generated theme to this tool and work on it?
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…….
Any chance of getting the Illustrator version of the files saved with a PDF Stream so it can be used with Affinity Designer?
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.”
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.
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
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
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
Hi! Is there a classic theme stencils?
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
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.
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
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.