PointGrid - Sketch plugin
by Francisco Díaz Rodríguez- •
- April 06, 2015
- •
- sketch• cocoascript• open source
- |
- 1 minute to read.
If you’re a designer and you use Sketch app, this post is for you. Today, we are pleased to announce the release of our latest open source project, PointGrid, a plugin for Sketch written in CocoaScript.
For those of you who are unfamiliar with the app, Sketch is a tool for designing interfaces, websites, and icons. Here at 47 Degrees, we’ve used this tool since its inception and it’s been especially useful for our design department.
In particular, we’d like to highlight its agility and simplicity compared to other design apps, such as Photoshop or Illustrator, in addition to the ease of exporting graphic resources for different platforms.
The inspiration to create this plugin came from a request from our graphic designer. Each time he created a responsive web design, it was also necessary to create different breakpoints for each one of the considered widths. This process was a bit laborious because he had to create a main breakpoint first and then the other breakpoints had to be generated from this one, applying a rule of three in order to calculate the new dimensions.
PointGrid makes this task significantly easier by following these steps:
- Create the main breakpoint using an artboard object in Sketch and specify the layout settings
- After selecting the artboard object, run the plugin
- Indicate how many breakpoints are necessary and where they will be located
- For each new breakpoint, enter the width
And that’s it! You’ll see all your new breakpoints on the canvas. Check out the plugin in action below:
You can download the plugin and see the source code on GitHub.
A special thanks to Ale of the Sketch team for his guidance while developing this plugin.