GithubHelp home page GithubHelp logo

anthrax3 / sketchdistributor Goto Github PK

View Code? Open in Web Editor NEW

This project forked from pez/sketchdistributor

0.0 0.0 0.0 1.32 MB

Sketch plugin that distributes selected objects vertically or horizontally with a given spacing

License: MIT License

JavaScript 98.85% Shell 1.15%

sketchdistributor's Introduction

SketchDistributor

GitHub release

A Sketch plugin that distributes selected objects vertically or horizontally with a specified spacing.

Like so:

Distributor in action

Installation

Install Distributor with Sketchpacks

Or if you use Runner, it can install this plugin as well.

Or, do it manually:

  1. Download this zip archive
  2. Unzip
  3. Double-click the .sketchplugin package.

How-to

You select the objects you want to distribute, then ask Distributor to do it:

  1. Distribute Horizontally … (CTRL+OPTION+H), brings up the Distributor dialog box with horizontal distribution preselected. You specify spacing (in pixels).
  2. Distribute Vertically … CTRL+OPTION+V, same as above for vertical distribution.
  3. Distribute again (CTRL+OPTION+A) applies the last used distribution settings on the selected objects.
  4. Distribute … (CTRL+OPTION+D), same dialog box as above, remembering the last distribution direction. (Mostly here for legacy reasons.)

The distribution depicted above you get by typing CTRL+OPTION+V, 10, . Your fingers can stay on the keyboard.

Note that you can use negative spacing to get overlap:

Tabs distributed -14px

(CTRL+OPTION+H, -14, )

It Works with Runner

If you are using the amazing Runner plugin you can also access the Distributor commands from there:

Runner Screenshot

Runner Badge

Bugs / Comments / Questions / Suggestions

Is the plugin misbehaving? File an issue. Have a suggestion? File an issue. You can pretty much file an issue for whatever reason. Please include the version of the plugin you are using if you think it could be relevant (it most often is). There is also Twitter @PappaPEZ

Known Issues

The plugin can't help with distributing rotated layers correctly. See issue #10. Also some shapes have a strange bounding rectangle according to Sketch. That makes them distribute less perfectly especially in vertical direction. Hoping for the Sketch API to soon make it possible to handle both these cases.

Sketch Community Attention

This little plugin is surprisingly often present in various Top X Sketch Productivity plugins articles. Too many to list here, but here are a few that got me smiling and almost bursting:

sketchdistributor's People

Contributors

gitter-badger avatar pez 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.