https://github.com/marcbouchenoire/sketch-constraints

📏 A plugin that integrates constraints in Sketch to lay out layers.
https://github.com/marcbouchenoire/sketch-constraints

artboards constraints sketch-plugin

Last synced: about 2 months ago
JSON representation

📏 A plugin that integrates constraints in Sketch to lay out layers.

• Host: GitHub
• URL: https://github.com/marcbouchenoire/sketch-constraints
• Owner: marcbouchenoire
• License: mit
• Archived: true
• Created: 2015-09-18T19:41:48.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2018-05-21T10:04:51.000Z (over 6 years ago)
• Last Synced: 2024-05-22T21:34:51.494Z (4 months ago)
• Topics: artboards, constraints, sketch-plugin
• Language: JavaScript
• Homepage:
• Size: 4.54 MB
• Stars: 1,275
• Watchers: 43
• Forks: 38
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 📏 Sketch Constraints

![Banner](docs/[email protected])

Sketch Constraints is a plugin that integrates constraints in Sketch to lay out layers. These constraints are relative to the parent, either a group or an artboard.

[Constraints are now available natively in Sketch. 🎉](#native)

## Usage

### Edit Constraints `⌘ + E`



### Update Layout `⌘ + L`



### Example



[👀 Watch on Vimeo](https://vimeo.com/140962822)

## Installation

### Using Sketch Runner

With Sketch Runner, just go to the `install` command and search for `Sketch Constraints`. Runner allows you to manage plugins and do much more to speed up your workflow in Sketch. [Download Runner here](http://www.sketchrunner.com).



### Manually

Make sure you have the latest version of Sketch installed. **(Sketch 40+)**

1. [Download the ZIP file of this repository](https://github.com/bouchenoiremarc/Sketch-Constraints/archive/master.zip)

2. Double click on `Sketch Constraints.sketchplugin`

## Notes

* **Constraints are not relative to other layers, only to the parent.**

* `Update Layout` updates every artboard of the current page.

* When a group is resized, all the children layers are resized. If you want a child layer to keep its size, check `Width` and/or `Height`.

## Inspiration

* This [Medium article](https://medium.com/bridge-collection/modern-design-tools-adaptive-layouts-e236070856e3) from [Josh Puckett](https://twitter.com/joshpuckett).

* [Bind](https://github.com/almonk/Bind) from [Alasdair Monk](https://twitter.com/almonk).

* [Sketch Flex Layout](https://github.com/hrescak/Sketch-Flex-Layout) from [Matej Hrescak](https://twitter.com/mhrescak).

## Native

As of [Version 44](https://sketchapp.com/updates/#version-44), constraints are available natively in Sketch. 🎉 It's similar to Sketch Constraints except that the constraints are based on current value **only**.



## License

Sketch Constraints is released under the MIT license. See [LICENSE](LICENSE) for details.