### Download and Setup Example Project Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/hello-world/README.md Downloads the example project using curl and extracts it, then navigates into the project directory. This is the initial step to get the 'Hello World' plugin example running. ```bash curl https://codeload.github.com/sketch-hq/SketchAPI/tar.gz/develop | tar -xz --strip=2 SketchAPI-develop/examples/hello-world cd hello-world ``` -------------------------------- ### Download and Setup Sketch API Resources Example Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/resources/README.md This snippet shows how to download the example project using curl, extract it, and navigate into the project directory. It's the initial setup step for running the example. ```bash curl https://codeload.github.com/sketch-hq/SketchAPI/tar.gz/develop | tar -xz --strip=2 SketchAPI-develop/examples/resources cd resources ``` -------------------------------- ### Install Dependencies for Sketch Plugin Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/resources/README.md Installs the necessary Node.js dependencies for the Sketch plugin example using npm. This is a standard step before building or running the plugin. ```bash npm install ``` -------------------------------- ### Install Dependencies with npm Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/hello-world/README.md Installs the necessary dependencies for the Sketch plugin project using npm. This is a prerequisite for building and running the plugin. ```bash npm install ``` -------------------------------- ### Install and Run SVGO Export Plugin Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/svgo-export/README.md Commands to download, install dependencies, build, watch, and start the SVGO Export plugin. ```bash curl https://codeload.github.com/sketch-hq/SketchAPI/tar.gz/develop | tar -xz --strip=2 SketchAPI-develop/examples/svgo-export cd svgo-export npm install npm run build npm run watch npm run start ``` -------------------------------- ### Download and Install Text Utilities Example Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/text-utilities/README.md This snippet shows how to download the text utilities example from GitHub using curl, extract it, and navigate into the project directory. It also includes the command to install project dependencies using npm. ```bash curl https://codeload.github.com/sketch-hq/SketchAPI/tar.gz/develop | tar -xz --strip=2 SketchAPI-develop/examples/text-utilities cd text-utilities npm install ``` -------------------------------- ### Hello World Plugin Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/README.md A starter plugin example that demonstrates how to add a menu command to the Plugins menu and execute code when it is selected. ```javascript // Example code for Hello World plugin // This would typically involve Sketch API calls to add a menu item and execute a function. ``` -------------------------------- ### Start Plugin with npm Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/hello-world/README.md Runs the plugin immediately after it has been built. This command is useful for testing the plugin's functionality directly after compilation. ```bash npm run start ``` -------------------------------- ### Watch for Changes with npm Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/hello-world/README.md Starts a watcher process that monitors project files for changes and automatically rebuilds the plugin. This is useful during development for live updates. ```bash npm run watch ``` -------------------------------- ### Install Dependencies with npm Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/selection-changed/README.md Installs the necessary dependencies for the plugin using npm. This is a prerequisite for building and running the plugin. ```bash npm install ``` -------------------------------- ### Download and Extract Example Plugin Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/selection-changed/README.md Downloads the example plugin code from GitHub using curl and extracts it. It then navigates into the extracted plugin directory. ```bash curl https://codeload.github.com/sketch-hq/SketchAPI/tar.gz/develop | tar -xz --strip=2 SketchAPI-develop/examples/selection-changed cd selection-changed ``` -------------------------------- ### Resources Plugin Example Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/README.md Illustrates how to bundle resource files with a plugin and access them from the code. This is useful for including assets like images or configuration files. ```javascript // Example code for Resources plugin // This would involve Sketch API calls to access bundled resources. ``` -------------------------------- ### Build Sketch Plugin Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/resources/README.md Compiles the Sketch plugin code. This command bundles the plugin and its assets, preparing it for use within Sketch. ```bash npm run build ``` -------------------------------- ### Build Plugin with npm Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/hello-world/README.md Builds the Sketch plugin. This command compiles the project's source code into a format that Sketch can understand. ```bash npm run build ``` -------------------------------- ### Shell Script: Install Dependencies and Build SketchAPI Source: https://github.com/sketch-hq/sketchapi/blob/develop/README.md This shell script outlines the necessary commands to set up the development environment for SketchAPI. It includes installing Node.js dependencies and running the build script to compile the API. ```Shell npm install ./build.sh ``` -------------------------------- ### Selection Changed Plugin Example Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/README.md Demonstrates how to listen for the `SelectionChanged` action in Sketch. This allows the plugin to react whenever the user changes their selection within the document. ```javascript // Example code for Selection Changed plugin // This would involve subscribing to Sketch's selection change events. ``` -------------------------------- ### Text Utilities Plugin Example Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/README.md Provides debugging tools that annotate text layers to display their baselines and bounding boxes. This helps in visualizing text layer geometry. ```javascript // Example code for Text Utilities plugin // This would involve Sketch API calls to access and modify text layer properties. ``` -------------------------------- ### SVGO Export Plugin Example Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/README.md This plugin compresses SVG assets using SVGO immediately after they are exported from Sketch. It shows how to hook into the `ExportSlices` action. ```javascript // Example code for SVGO export plugin // This would involve Sketch API calls to intercept export actions and use SVGO. ``` -------------------------------- ### Run Sketch Plugin After Build Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/resources/README.md Executes the plugin immediately after it has been built. This command is convenient for testing the plugin's functionality after each build cycle. ```bash npm run start ``` -------------------------------- ### View Plugin Logs with skpm Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/hello-world/README.md Displays the output logs from the Sketch plugin. This command is essential for debugging and understanding the plugin's runtime behavior. The `-f` option keeps the log stream open. ```bash skpm log skpm log -f ``` -------------------------------- ### View Sketch Plugin Logs Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/resources/README.md Displays the output logs from the Sketch plugin. This is crucial for debugging console.log statements and understanding plugin behavior. ```bash skpm log ``` -------------------------------- ### Follow Sketch Plugin Logs Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/resources/README.md Continuously streams the Sketch plugin logs, waiting for new output. The `-f` option ensures the command does not exit after reaching the end of the current logs. ```bash skpm log -f ``` -------------------------------- ### Build Plugin with npm Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/selection-changed/README.md Builds the plugin using the npm build script. This command compiles the source code into a format that Sketch can use. ```bash npm run build ``` -------------------------------- ### Install psutil for Test Runner Source: https://github.com/sketch-hq/sketchapi/blob/develop/README.md Installs the 'psutil' Python module, which enables the test runner to automatically terminate the Sketch application upon test completion. This prevents multiple instances of Sketch from remaining open after each test run. ```bash pip install psutil ``` -------------------------------- ### Watch for Changes with npm Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/selection-changed/README.md Watches for changes in the project files and automatically rebuilds the plugin. This is useful during development for a faster workflow. ```bash npm run watch ``` -------------------------------- ### View Plugin Logs with skpm Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/selection-changed/README.md Displays the output logs from the Sketch plugin using the skpm log command. The -f option keeps the command running to show new logs as they appear. ```bash skpm log skpm log -f ``` -------------------------------- ### Watch for Changes in Sketch Plugin Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/resources/README.md Continuously watches for changes in the plugin's source files and automatically rebuilds the plugin. This is useful during development for live updates. ```bash npm run watch ``` -------------------------------- ### Build Test Plugin with npm Source: https://github.com/sketch-hq/sketchapi/blob/develop/README.md Builds the test plugin using npm. This command first installs project dependencies if they haven't been already, and then executes the 'test:build' script. The '--identifier' flag can be used to specify a particular version or configuration for the build. ```bash npm install npm run test:build --identifier=IDENTIFIER ``` -------------------------------- ### Customize Webpack Configuration Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/svgo-export/README.md Example of a webpack.skpm.config.js file to customize the webpack configuration for the skpm build process. This function mutates the original webpack config and can handle asynchronous changes. ```javascript /** * Function that mutates original webpack config. * Supports asynchronous changes when promise is returned. * * @param {object} config - original webpack config. * @param {boolean} isPluginCommand - whether the config is for a plugin command or a resource **/ module.exports = function(config, isPluginCommand) { /** you can change config here **/ } ``` -------------------------------- ### JavaScript Example: Create Group and Rectangle in Sketch Source: https://github.com/sketch-hq/sketchapi/blob/develop/README.md This JavaScript code snippet demonstrates how to use the Sketch API to create a new group and add a rectangle shape layer to it within the currently selected page. It also shows how to access the selected layers and log their names. ```JavaScript // The Sketch JavaScript API is bundled with the Sketch Mac app // and must be imported before it can be used. const sketch = require('sketch') const { Group, Shape, Rectangle } = sketch // Get the current Document and Page const doc = sketch.getSelectedDocument() const page = doc.selectedPage // Create and select a new Group within the current Page var group = new Group({ parent: page, frame: new Rectangle(0, 0, 100, 100), name: 'Test', selected: true, }) // Add a new Rectangle Shape Layer to newly created Group var rect = new Shape({ parent: group, frame: new Rectangle(10, 10, 80, 80), }) // Get and log the current selection var sel = doc.selectedLayers console.log(sel.isEmpty) sel.forEach(function (elem) { console.log(elem.name) }) ``` -------------------------------- ### Shell Script: Configure Sketch to Use Local SketchAPI Source: https://github.com/sketch-hq/sketchapi/blob/develop/README.md These shell commands are used to configure your Sketch installation to use a local version of the SketchAPI instead of the one bundled with the application. This is useful for development and testing changes to the API. ```Shell npm run api-location:write ``` ```Shell npm run api-location:delete ``` -------------------------------- ### Run All Tests with test.sh Source: https://github.com/sketch-hq/sketchapi/blob/develop/README.md Executes the primary test script, './test.sh'. This script handles building the SketchAPI and tests, preparing the host plugin, setting up the testing environment, launching Sketch, and running all test suites within it, followed by result collection and reporting. ```bash ./test.sh ``` -------------------------------- ### Run Sketch Plugin Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/text-utilities/README.md This command executes the Sketch plugin after it has been built. It's useful for testing the plugin's functionality immediately after compilation. ```bash npm run start ``` -------------------------------- ### Build and Watch Sketch Plugin Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/text-utilities/README.md These commands are used to build the Sketch plugin project and to watch for file changes during development. 'npm run build' compiles the project, while 'npm run watch' automatically rebuilds upon detecting modifications. ```bash npm run build npm run watch ``` -------------------------------- ### View Plugin Logs Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/svgo-export/README.md Command to view the output of console logs from the Sketch plugin, with an option to continuously follow new log entries. ```bash skpm log skpm log -f ``` -------------------------------- ### Run Test Plugin via Python Script Source: https://github.com/sketch-hq/sketchapi/blob/develop/README.md Executes the integration test plugin using a Python script. This command requires the path to the compiled plugin (`-p`) and a file path for outputting test results (`-o`). Optional arguments include the path to the Sketch application (`-s`) and a timeout duration (`-t`). ```bash python run_tests.py -p /path/to/SketchIntegrationTests-$UUID.sketchplugin -o FILE_PATH [-s SKETCH_PATH] [-t TIMEOUT] ``` -------------------------------- ### View Sketch Plugin Logs Source: https://github.com/sketch-hq/sketchapi/blob/develop/examples/text-utilities/README.md This command utilizes skpm to display logs from the Sketch plugin. The '-f' option keeps the log stream open, continuously showing new output as it's generated. ```bash skpm log skpm log -f ``` -------------------------------- ### Run Specific Test Suite with test.sh Source: https://github.com/sketch-hq/sketchapi/blob/develop/README.md Runs a specific test suite by passing its name as an argument to the './test.sh' script. This allows for focused testing on particular functionalities, such as 'SymbolInstance'. ```bash ./test.sh SymbolInstance ``` -------------------------------- ### Build Single Spec Test Plugin with npm Source: https://github.com/sketch-hq/sketchapi/blob/develop/README.md Builds the test plugin to include only a single spec file for testing. This is achieved by running the 'test:build' npm script with an identifier, allowing for isolated testing of specific functionalities. ```bash npm run test:build --identifier=IDENTIFIER ``` === COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.