Git Product home page Git Product logo

sketch-constraints's Introduction

๐Ÿ“ Sketch Constraints

Banner

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. ๐ŸŽ‰

Usage

Edit Constraints โŒ˜ + E

Edit Constraints example

Update Layout โŒ˜ + L

Update Layout example

Example

iOS 9 Lockscreen example

๐Ÿ‘€ Watch on Vimeo

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.

Install Sketch Constraints with Sketch Runner

Manually

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

  1. Download the ZIP file of this repository
  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

Native

As of Version 44, constraints are available natively in Sketch. ๐ŸŽ‰ It's similar to Sketch Constraints except that the constraints are based on current value only.

Sketch 44 native constraints

License

Sketch Constraints is released under the MIT license. See LICENSE for details.

sketch-constraints's People

Contributors

marcbouchenoire avatar nikolasklein avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

sketch-constraints's Issues

Bitmaps don't respect constraints

When a Bitmap image is set with fixed width/height constraints and the parent group has constraints, the bitmap image will still scale up/down with the group. Constraints set on the bitmap are ignored.

Ability to use % instead of px in dialog boxes

I love this plugin. A great addition would be the ability to work in % in addition to px. For some things, using absolute positioning works great. But if the real dream is totally responsive design, then working with percent values seems like the logical next step. That would be epic. :)

Sketch 3.7

Is this plugin no longer supported for sketch3.7?

Position boundaries relative to specific layer

Plugin is great. Updates are fantastic.

What would be great is if a group had a background layer, that the boundaries would be set relative to that object.

For things like cells, if you resize and object and there are layers outside of it, they end up defining the max width or height

image

setting too many constraints

if I set left, right, and width constraints, upon resizing the art board nothing happen. since the object is over defined. (I think)
same story with setting top, bottom, and height.
is there a way to clarify this?
so if I have left and right constraints, enabling width, would disable one of the left or right ones.
or another way to make it clear that the current set of constraints are not working.

text gets smaller when groups get small, but not bigger

I have text in a group.
When I resize the group larger and hit โŒ˜+L the text resizes just fine.
When I make the group smaller and hit โŒ˜+L the text font gets smaller.
when i make it bigger again the text remains small.

Option to Auto Update Layout

It would be great to have a checkbox I can turn on to Auto Update Layout instead of having to use โŒ˜L all the time.

keep the plug-in window open while working on the design?

Is it possible to keep the windows open and have the design still be intractable?
here's a scenario:
I click on a shape
I click command+E
the window opens.
I apply constraints, and the shape moves to the constraints related position.
i click on another object (without closing the constraints window)
the numbers in the constraints window refresh to reflect the newly selected object
i hit new constraints
hit apply
the object updates on the art board to reflect the changes.
if i select two objects on the art board the text fields in the constraint window go dim with a message that one object can be selected at a time.

is this possible?

Slight UI improvement

Here are some suggestions:

-adding a 4px corner radius to text fields for a smoother user experience and a more comfortable feel
-having the boxes profiled with the numbers. instead of clicking twice to drop down and selecting the number, now I can simply click the checkmark.
-right now it's not clear which directions have constraints, the checkmark approach makes it more clear.

screen shot 2015-10-08 at 12 00 33 am

U

Sorry

Crash in Sketch 3.4

Plugin crashes in Sketch 3.4 (15138) with the following error:

Application Specific Information:
objc[53682]: Cannot form weak reference to instance (0x7fcd1e0c03e0) of class NSFont. It is possible that this object was over-released, or is in the process of deallocation.
Performing @selector(runPlugin:) from sender NSMenuItem 0x7fcd16d86c10

Not an urgent issue, just something to check when 3.4 is out of beta.

Different types of constraints

Hi,

You probably have more pressing things to answer so feel free to hold off of on this one. But if there weren't Sketch limitations, would you find it practical as a designer to have a few more types of constraints, such as constraints that align items relative to other sibling layers or constraints for centering? I think a practical constraint system needs just these and a few more but probably just a few more. As I understand (I could totally be over simplifying here) there are 3 practical constraint systems out there:

  • Auto Layout - As seen in Bind and implemented by Apple on OS X and iOS. This doesn't translate that well to design tools in my opinion. I think the designer has to add too many rules and the system has to generate the rest, which gets laborious. There can be conflicting constraints that cause errors. It is very powerful however and can cover virtually every use case. It also handles right-to-left languages and layouts and compression decisions.
  • Flexbox - as used by Facebook in it's React component system and of course used on the web. This is a pretty simple layout system but I don't think it translates that well to design tools as the mental model is not that easy and natural. Of course you can wrap it with simple concepts such as rows and columns but again it's sometimes hard to visualize the layout in a strict grid. Facebook's implementation does have the nice feature of being able to supply custom functions to measure things like text and flex box also handles right to left issues by allowing you to reverse direction of layouts and specify order of items.
  • Ad hoc - as seen by what you are doing here where you just define a simple set of constraints that just cover most use cases. This is the approach I like the most. I personally like this particular approach taken in code: https://github.com/mamaral/Neon. It represents a very nice way to create a ton of typical app layouts and I have been using it a lot. The downside is there is no concrete model at the heart of it and many advanced layout features have to implemented by the developer or from scratch or ignored.

At any rate I know Sketch has limitations but I am building a native Mac app for this as well and I have been playing around with these same things this week and have been leaning towards the ad hoc approach you took, nice work! I guess my only point is that I think a practical system would need a few more constraints.

Sketch 40 supported?

I haven't tried this in the previous 3X.X versions so I don't know if it's related to other people having issues in those but after having reset Zeplin's keyboard shortcut I still can't see a constraints editor in version 40.1.

So there's no other way to bring up this window or update the layout besides the keyboard shortcuts?

Not working on Sketch 3.4

Found the cmd+L command doesn't work since doing the update. cmd+E still seems to accept inputs but doesn't update/move elements.

Optional method for saving constraint data

Marc, congrats on making a brilliant plugin! Been playing with it for a while and Im loving it.

I have a quick suggestion: Rather than save constraints data in a text layer, why not save it as userInfo on the layer itself? That way you could copy the layer to a different artboard, or even a different document, and it would retain it's constraints information.

Check the documentation here to see how you could store data attached to each layer: http://www.bohemiancoding.com/sketch/support/developer/03-reference/MSPluginCommand.html

Support Sketch 45 plugin update system

Hi there!

This is a quick note to remind you that Sketch 45 will include a plugin update system.

It would be awesome if you could add support to it (it's really easy!) before Sketch 45 comes out. Ideally, you should release an update for your plugin while we're still in Sketch 44, so your users will have a nice & easy experience when 45 is released.

For more details, please check http://sketchplugins.com/d/229-updating-plugins and http://developer.sketchapp.com/introduction/updating-plugins/

Thanks in advance!

Design update.

I designed an interface for the side bar, then I learnt that plug-ins can't go in the side bar. (disappointing)
But here it is. just in case someone wants to implement the design in the pop up windows.
If anyone's interested in changing the looks, you can comment here and we'll go from there.
screen shot 2015-11-04 at 1 08 57 pm

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.