Code Monkey home page Code Monkey logo

sketch-slicer's Introduction

Sketch Slicer

Sketch plugin for creating slices for selected layers

How to use

  • Select one or more layers
  • Run one of the 2 commands: Slice with padding or Slice with frame

Options

Slice with Padding

Padding is the padding of the slice created from selected layers.

Enter one number to have equal padding from all sides, or manually set each of them using order similar to padding shorthand in CSS. For example, setting padding to 24/48 is equivalent to

padding: {
    top: 24
    right: 48
    bottom: 24
    left: 48
}

and setting padding to 12/14/16 is equivalent to

padding: {
    top: 12
    right: 14
    bottom: 16
    left: 14
}

Setting padding will not affect the selected layers' position.

Slice with Frame

Frame is the dimension of the slice. Using frame, the resulting slice layer will be centered around the selected layer.

Set one number will create a square slice layer, set two numbers to create a rectangle.

// 36;48
frame: {
  width: 36,
  height: 48
}

// 36
frame: {
  width: 36,
  height: 36
}

Note: If the selected layer doesn't have a rounded dimension (i.e 12.4241 x 14.1241), setting frame will slightly adjust its position so that the result slice layer is placed on a round pixel and have selected layer centered inside.

Select preset

Select one of the presets that you set in Sketch Preference cmd + ,

Create symbol

Create symbol out of the selected layers.

TODO
  • Set padding for slice
  • Set fixed slice size
  • Option to break text inside selected layers
  • Set export options Use user's export preset (set it Preference)
  • Create symbol with selected layer
    • If selected layer contains symbol, have an option to detach that nested symbol

sketch-slicer's People

Contributors

d4rekanguok avatar

Watchers

 avatar James Cloos 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.