elihorne / smartboards

Plugins for Sketch

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Smartboards aims to make managing and exporting artboards easier in Sketch.

Thanks to xsaddi for mixed artboard size support.

Installation

Easiest Method

Use the terrific Sketch Toolbox. Just search for Smartboards and click "Install"

Slightly Harder

Download Smartboards as a zip file and then add the folder to your Sketch plugin folder.

How to find your Sketch plugin folder: (In Sketch 3) choose Plugins > Manage Plugins... then click the cog icon near the bottom left corner, and select Show Plugins Folder.

Features

Align and Rename

Shortcut: cmd + opt + g

  • Aligns artboards to a grid with 100px gutters
  • Renames the artboards based on column (number) and row (letter) [A00, A01, B00, B01, B02]
  • Organizes the artboards in the layers list by row and column.

Screenshot

Notes: Align expects that artboards that are meant to be in the same row are top aligned on the same Y-axis value. It doesn't care about the X-axis value.

There's a slightly hidden feature that I use a lot but is hard to describe. If you place an artboard in between two rows on the Y-axis and run Align, it will create room for a new row by shifting existing rows down by one, and then will rename accordingly. Imagine you have Artboard 1 that is 10x10 at Y = 1, and Artboard 2 that is 10x10 at Y = 111. If you place a third artboard where 1 < Y < 111, Align will do the rest of the heavy lifting for you.

Screenshot

Align

Shortcut: shift + cmd + opt + g

Aligns artboard to the same grid, but does not rename the artboards. Use this if you don't want your artboard names messed with. Align and Rename does its best to preserve custom artboard names, but sometimes you might not want it.

Rename Page Artboards

Allows you to specify a custom name for all artboards. If you have Column and Row indicators (ex: A00), these will be preserved.

If you'd like to remove the custom naming from all artboards, just leave the input field empty.

About

Plugins for Sketch


Languages

Language:JavaScript 100.0%