Getting Started
You can create a react-sketchapp
project with skpm
, by cloning a ready-made example, or by manually setting up the package.json
and manifest.json
scripts (advanced usage).
Environment Setup
You will need npm, Node and Sketch.
- Terminal (if you’re new to the command line, this guide may help)
- You need to make sure
git
is installed – typegit --version
in your Terminal to check if it's installed, if it isn’t, you should be prompted to install via “command line developer tools”.
- You need to make sure
- Code editor e.g. VSCode, Atom
- Node.js &
npm
– install with Homebrew (or install with Node Version Manager) - Sketch
- requires macOS
Creating a Project With Skpm
Replace my-app
with your desired project name:
Installation
npm install --global skpm
skpm create my-app --template=airbnb/react-sketchapp # template is a GitHub repo
cd my-app
Setup
You can now open my-app
in your code editor of choice. You will see a src
folder with a manifest.json
file and Sketch entrypoint (e.g. my-command.js
). If you wish to rename my-command.js
, you can do so and update the file name in script
in manifest.json
Example modifications (assuming we want to rename the entrypoint file to main.js
and don't want to have sub-commands):
src/manifest.json
"commands": [
{
- "name": "my-command",
+ "name": "My App Name: Sketch Components"
- "identifier": "my-command-identifier",
+ "identifier": "main",
- "script": "./my-command.js"
+ "script": "./main.js"
}
],
"menu": {
- "title": "my-app",
- "items": [
- "my-command-identifier"
- ]
+ "isRoot": true,
+ "items": [
+ "main"
+ ]
+ }
}
Rendering to Sketch
To render your app to Sketch, open the Sketch application, create a new blank document, then go to your Terminal and run:
# Make sure you've already done `cd my-app`
npm run render
You can pass the target Sketch container layer (i.e. document, group or page object) to the render
function in your Sketch plugin entrypoint file, using the Sketch API: render(<App />, sketch.getSelectedDocument()
.
For more info on rendering to Sketch, see the rendering page.