/Assistant

Talk to Sketch

Primary LanguageJavaScriptMIT LicenseMIT

alt text

Assistant

Talk to Sketch

Download the Sketch plugin

Assistant is a Sketch plugin that lets you add shapes and icons to your document simply by saying what you want

See a demo here

"Draw a red rectangle that is 200px x 300px"

"Add a blue circle thats 500px"

"Insert a heart icon"

How it works

Assistant is powered by a private API which translates your words into instructions that Sketch can understand. It uses Wit.ai for natural language processing.

Assistant currently supports adding shapes and icons to your Sketch document.

Once installed in Sketch, you can access Assistant using the keyboard shortcut CMD + Shift + i, or via the Plugins menu.

alt text

Shapes

Assistant supports adding shapes to your document. In addition to defining the shape, you can determine the color and dimensions as well.

Currently supported shapes include:

  • Rectangle
  • Square
  • Oval
  • Circle
  • Triangle

You can add a shape to your document using the following examples:

"Add a rectangle"

"Draw a square"

"Insert an oval"

"Add a circle"

"Draw a triangle"

Notice the keywords that indicate you want to draw something, e.g. add, draw, insert

Colors

While drawing shapes, you can include a color as well.

Assistant supports any valid color names and hexadecimal values, as seen by Chroma, a Ruby gem for color manipulation and palette generation.

You can add color to your shapes using the following examples:

"Add a blue rectangle"

"Draw a circle #ff0000"

"Insert a triangle that is green"

Dimensions

While drawing shapes, you can include dimensions.

Dimensions are found in your input listed in order of width first, then height.

You can add dimensions to your shapes using the following examples:

"Add a red rectangle 100px by 200px"

"Draw a blue circle 500"

Icons

Assistant supports any icon that is included in the Feather icon set. You don't need to know the explicit name of a Feather icon in order to add it to your document, as they are mapped to keywords based on tags provided by Feather.

See the list of supported icons and their tags

You can add icons to your document using the following examples:

"Add a heart icon"

"Insert the twitter icon"

"Draw a music icon"

Notice the keyword icon which indicates that you want to add an icon to the document

Assistant is meant to be an experiment into the possibilities of design tools.

I build my ideas.