- You’ll need some command line skills
- Some familiarity with Git and GitHub
You’ll need a recent version of NodeJS installed on your system, at least version 12 or greater.
You may already have NodeJS installed on your system, to check enter the following in your a terminal,
If that reports
12.x.x or greater you’re good to go. If not, you have a few options:
- Download and install the latest version from the official site (recommended)
- Install NodeJS with Homebrew
- If you need to manage multiple versions of NodeJS on your system try nvm
Create your first Assistant
We’ve created the Sketch Assistant Template repository to help you get going as quickly as possible. This is a minimal Sketch Assistant project with everything properly configured and ready-to-go.
Follow the steps below to create your first Assistant project, build it locally and add it to a Sketch document
- Click here to generate your own Assistant repository on GitHub based on our template
- Follow the instructions on GitHub to clone your new repository to your machine
- Once cloned,
cdinto your new repository folder in your terminal and run,
- Still in the repository folder, build and package the Assistant locally with,
npm run package-tarball
This will build a file called
sketch-assistant-template-1.0.0.tgzto the current folder - this is your Assistant packaged as a tarball, ready to be used in Sketch!
- Open or create a document in Sketch, and add this file to it via the ⚙️ › Add from Archive… option within the Manage Assistants… sheet for your document. You should see a result from a Hello World rule in the Assistants panel 🎉
Try opening your Assistant project in Visual Studio Code, and exploring the project folder. Both the Assistant and its Hello World rule are defined in the
Experiment with making minor changes to the rule, for example adjusting its
title value to a new string. Each time you make a change re-run
npm run package-tarball to see your changes in Sketch.
At this point you may wish to name your Assistant properly, and add some descriptive metadata.
- Find and replace all instances of the
sketch-assistant-templatestring with the name of your new Assistant project. Name your Assistant as you would an npm package, i.e. all lower case, no spaces.
- Update the
descriptionvalues in the
sketch-assistantobject property in
- Update the
package.json- this is likely just the GitHub repository page for now. Sketch will direct users to this page to find out more about your Assistant.
👉 Continue on to Writing a rule if you’re ready to learn more.