GithubHelp home page GithubHelp logo

sketch-preview's Introduction

Introduction

This Sketch plugin provides a preview command (โŒ˜P) that will export the currently selected Artboard and open the resulting image file in Skala Preview. If you prefer, you can name a slice Preview, and that slice will be used instead.

Installation

Copy Preview.jstalk to the Sketch plugin directory. For Sketch 3, this should be:

~/Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins

You can open this directory in the Finder with the Plugins -> Reveal Plugins Folder... menu item. Alternatively if you're feeling brave, you can do something like this:

curl https://raw.github.com/marcisme/sketch-preview/master/Preview.jstalk \
    -o ~/Library/Containers/com.bohemiancoding.sketch3/Data/Library/Application\ Support/com.bohemiancoding.sketch3/Plugins/Preview.jstalk

If you're still using Sketch 2, your plugin directory should be either of the following for App Store or direct download versions respectively.

  • ~/Library/Containers/com.bohemiancoding.sketch/Data/Library/Application\ Support/sketch/Plugins
  • ~/Library/Application\ Support/sketch/plugins

Usage

  • Make sure you have an Artboard selected

    or

  • Create a device screen-sized slice, and name it Preview

Compatibility

This plugin has been used successfully with the following versions of software. Not all combinations of each application have been tested, but this should give you some idea of the latest versions that have worked for other people. Feel free to submit a pull request if you've used the plugin with a newer version of any of these applications.

  • Sketch 2.4.4 (5370)
  • Sketch 3.0.1 (7597)
  • Skala Preview 1.6.0
  • Skala View for Andriod 1.2.2

Troubleshooting

Some people have reported problems with the currently selected Artboard not being recognized as selected. I've noticed that in Sketch 2, you may have to select one of the layers within an Artboard as opposed to the Artboard itself. This does not seem to be an issue in Sketch 3.

If you find any other issues, you can try to reproduce them with PreviewTest.sketch, found in the test directory of this repository. You can also edit the plugin file to set DEBUG to true and look at the output in Console.app to get a better idea of what is going on. Please open a new issue if there is still a problem.

Author

Marc Schwieterman (@mschwieterman / @mbs)

Contributors

Big thanks to these people for their contributions.

License

MIT License

sketch-preview's People

Contributors

marcisme avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.