https://github.com/frontify/sketch
Frontify Sketch Plugin
https://github.com/frontify/sketch
Last synced: over 1 year ago
JSON representation
Frontify Sketch Plugin
- Host: GitHub
- URL: https://github.com/frontify/sketch
- Owner: Frontify
- License: other
- Created: 2018-02-23T10:28:26.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2023-11-02T10:56:49.000Z (over 2 years ago)
- Last Synced: 2023-11-02T11:38:27.405Z (over 2 years ago)
- Language: JavaScript
- Size: 4.75 MB
- Stars: 7
- Watchers: 35
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Frontify for Sketch
A [Sketch] plugin that provides integration with Frontify. Get it @ [Frontify Sketch Plugin]
This README.md is primarily for developers. The latest plugin version,
documentation etc. are hosted at [https://frontify.com/integrations/sketch/].
Contributions are welcome!
## Development
_This plugin was created using `skpm`. For a detailed explanation on how things work, checkout the [skpm Readme](https://github.com/skpm/skpm/blob/master/README.md)._
## Usage
Install the dependencies
```bash
npm install
```
Once the installation is done, you can run some commands inside the project folder:
```bash
npm run build
```
To watch for changes:
```bash
npm run watch
```
Additionally, if you wish to run the plugin every time it is built:
```bash
npm run start
```
This defaults prevents you from to many Sketch restarts
```bash
defaults write com.bohemiancoding.sketch3 AlwaysReloadScript -bool YES
```
## Custom Configuration
### Babel
To customize Babel, you have two options:
* You may create a [`.babelrc`](https://babeljs.io/docs/usage/babelrc) file in your project's root directory. Any settings you define here will overwrite matching config-keys within skpm preset. For example, if you pass a "presets" object, it will replace & reset all Babel presets that skpm defaults to.
* If you'd like to modify or add to the existing Babel config, you must use a `webpack.config.js` file. Visit the [Webpack](#webpack) section for more info.
### Webpack
To customize webpack create `webpack.config.js` file which exports function that will change webpack's config.
```js
/**
* Function that mutates original webpack config.
* Supports asynchronous changes when promise is returned.
*
* @param {object} config - original webpack config.
* @param {boolean} isPluginCommand - wether the config is for a plugin command or a resource
**/
module.exports = function (config, isPluginCommand) {
/** you can change config here **/
}
```
## Debugging
To view the output of your `console.log`, you have a few different options:
* Use the [`sketch-dev-tools`](https://github.com/skpm/sketch-dev-tools)
* Open `Console.app` and look for the sketch logs
* Look at the `~/Library/Logs/com.bohemiancoding.sketch3/Plugin Output.log` file
Skpm provides a convenient way to do the latter:
```bash
skpm log
```
The `-f` option causes `skpm log` to not stop when the end of logs is reached, but rather to wait for additional data to be appended to the input
## Frontend
To make working on the Frontend independent from Sketch make the `sketch` folder the document root of your webserver.
The views are accessible by using: local-sketch.frontify.com/src/assets/views/…
[Sketch]: https://sketchapp.com/
[Frontify Sketch Plugin]: https://frontify.com/integrations/sketch/