When preview window is open I can't do anything in Sketch. Would be nice to be able to have both open and work in multiple sizes at the same time.

Wouldn't it be great, if, with one click, you could auto-populate the constraint settings?
Of course some manual tweaks would be needed, but this might save a lot of time.

Looking at Constraints Demo.sketch, and thinking about typical 'Mobile design' use case, some ideas:

• IF object center is closer to centre of axis then edge, then set alignment to center on this axis/' with pinning to maintain current position (negative values)
• IF object center is closer to an edge than canvas center, then set pinning to edge with appropriate values to maintain current position
• IF object spans > 90% of either artboard dimension then pin to 2 or 4 edges with current padding, non-fixed size along that/those dimensions
• Text siblings can probably have a 100% + absolute pixel padding set, per the 'Flowing text test' in Constraint Demos.sketch

Amazing work on this plugin. It seems like the preview is blurry on retina displays & would be great to fix that :)

Ideally, I would like to be able to pin an object to maintain certain margin to another object in the artboard. A potential use case would be pinning a button to a certain position within a modal dialog that is dynamic in height and/or width.

It'd help to handle cases with buttons like this

Or may be you can give an advice. How can I create a button where a bg wraps out a text with some paddings?

Hi! Thanks so much for making this plugin. It's solving big problem I've had with all drag-n-drop UI tools, not just Sketch.

I really want to make suggestions work help make this better, but I don't know how to start without stepping on toes. I guess the first thing I can help with is establishing contribution guidelines?

See: https://github.com/blog/1184-contributing-guidelines

On retina the preview window seems to be @1x and rather blurry,

It would be very nice if we could apply constraints to the set of selected layers, or at least "paste" previously copied constraints to the selected layers.

Right now it's a little tedious to set up constraints for a series of "table rows", for example, because you have to select and set the constraints for each layer individually. Fluid doesn't complain if you select multiple layers and then try to set their constraints as one operation, but it also doesn't work.

This will be a bit of a tough one to implement right and store properly... current thoughts:

• Cascades down and can be overriden at different levels (Document, Page, Artboard, Group, Layer)
• Variables are essentially mathematic expressions assigned to something like $a, etc.
• Can build off previous value of a variables, so $padding = $padding + 100%

Possible applications:

• Change padding between layers quickly and easily
• Toggle the values of variables to test different configurations quickly
• Cuts down on common, repetitive constraints

Possible an extraneous feature. There's downsides to this being (mis)/applied as well. Feedback welcome.

i am not sure, but does it works with sketch 3.4?
The plugin doesn't work for me with any of my files or with the sample sketch (demo)

Needs to expand to include:

1. User-defined sizes
2. More common device presets
3. Zooming (?)
4. Export?

Doesn't work with Sketch 3.4 or 3.4.1

Microsoft Blend has awesome control over margin constrains. See this chain-icon on screenshot? It allows to fix margin to a specific value. You can edit margin values by clicking directly on text.

I think that this kind of behaviour along with json-data is essential for interface-design.

When I create a constraint on a group I copied from another document, every layer of this group have the same constraint.

But if I close & reopen Sketch, It works fine.

Propositions

• Proper tabbing order
• Up/Down to increment current number block (live update?)
• Enter to expand text field

Feedback welcome

Hi!

I have a symbol that contains dynamic text sub-layers. Fluid would be really useful here as I can set up the margin logic between each sibling and then text wrapping is handled automatically for me when I change the text of any of the sub-layers for each instance of the symbol.

This doesn't seem to work as expected, as Sketch wants to set the position of each sub-layer everywhere, and you can see the elements jumping around as it runs through each instance of that symbol. Is it possible for each Symbol instance to share the Fluid constraints but not share the positioning calculated by Fluid?

I guess having a same name with other plugin wasn't the problem, still it doesn't work when I install the plugin with Sketch Toolbox. It gives these errors on console when I try to toggle toolbox:

I tried to restart the Sketch but didn't work. It works when I install it by downloading it from here and double clicking.

Not sure what is causing this. I think it may be more of a Sketch bug than one of my own, but I have a fallback in mind.

Workaround:

Close and reopen the document.

It would be nice if the constraints could behave pretty much like CSS .class (or constraint styles) so that when I create a complex layout and want to change one of the constraints, I can just edit the constraint style. This will make everything out of this world, as now I have to copy-paste constraints for hours :(

For example - this list is populated via Content Generator, the tags are manually added; but I just click and type, then when done, I update the layout. Chasing the position of the title would take me forever, as I'll have to copy-paste the same constraints over and over again, or re-generate the list. Slow.

Thanks so much for building this plugin, I can't say how much I benefited from it the last week, building a super complex prototype with tons and tons of data, and I use it now almost all the time!

When you have a set of layers that looks like this in Sketch's layer panel:

• Group 1
  • Layer B
  • Layer A

Fluid seems to think that "Layer B" is the previous sibling of "Layer A", but that's backwards. Sketch renders from bottom up, so first comes Layer A, then comes Layer B, which means that Layer A is the previous sibling of Layer B. It looks a little counterintuitive, but that's the real rendering order.

This matters quite a bit when the layers overlap. You can't simply change the order of layers in the layer tree to match Fluid's definition without affecting how they actually render (and probably occluding layers you wanted to be able to see).

Hi Matt,

V. 1.7 is great, thanks for the huge improvement! There's one issue that I've encountered with moving objects though. Here's a way to replicate it:

1. Edit a constraint by changing a value in the input field.
2. Click somewhere on the canvas to make the constraint window disappear.
3. Click an object and try to move it up and down by using the arrow keys ↑ ↓ (doesn't work, also +10px increment by holding shift does not work)

It seems the constraint input field remains focused in the background. With a little luck you can get the keyboard shortcut to work again by changing the relativity a couple sometimes.

Best regards,
Andre

I have a problem with "previous sibling" which orders the layers reversed. Bug or am I using it wrong? It worked just fine this morning though.

https://www.dropbox.com/s/9djnc6phnqtczbw/fluid.mov?dl=0

Regards
//Daniel

Would be very cool if you could set the basepoint of the offset to the that of MaxY, MaxY etc

if this would be possible this plugin would be dope.
What I mean by that exactly:

In XCode you can select a layer, hold ctrl, drag from your layer to the next layer above it for example and set the constraint to be the top spacing to the other layer.

I know this is very advanced, and I'm not sure if this is possible with the sketch plugin api or if they would have to do that on their own, but that would sick.

Thanks already for the current state of the plugin.

And a minor suggestion: could you check the box of a constraint automatically as soon as you enter a manual value?

Hi,

Both: Fluid 1.6.1 and Sketch 3.4.2
Yosemite works, Mavericks doesn't work.

I tried to install manually, but also doesn't work.

Anybody have the same issue? Or what should I do / check to fix it.

Some method of updating multiple layers at the same time. Or maybe some sort of constraint "style" that can be applied throughout a document.

Useful when you're working with rows of information

Current Flow Moving the Toolbar:

1. User moves the toolbar to a different part of the art board
2. User edits constraints
3. Preferences pop up
4. User sets preferences
5. User clicks another layer and the toolbar returns to the bottom of the art board.

Ideal Flow Moving the Toolbar:

1. User moves the toolbar to a different part of the art board
2. User can also move the constrain preference pane independently of the toolbar constraints
3. Both elements stay fixed where the user moves them to

Currently does not work as well with layers that need aspect ratio sizing (ie. images).

This is currently possible by using Sketch's aspect ratio sizing:

However, when aspect ratio locking is enabled in Sketch, this plugin is only able to change the layer's height. Sketch seems to ignore changes to width.

Would speed up workflow, and get rid of an extra click.

Hi great plugin, but I was wondering is there a way to access the constraint data so that I can export it via JSON.

The error message: "Select an artboard, or any layer in an artboard, so we know which artboard to target."

Document demonstrating issue: http://www.datafilehost.com/d/65cdeb9a

So for instance being able to pin 15px on the left at resolutions of 768 or less and centering for resolutions greater than 768.

What apple said in its wwdc was to use the stack view as one can. Although none of its example code uses it maybe in consideration for backward compatibility.

It would save us an extra click for each constraint.

I do value that you may temporary deactivate a constraint without removing it, but it should be activated as soon as you enter some values into the text box (why would I add some values otherwhise?).

Are there any plans to include iOS size classes? Or am I missing something. At the moment it seems like constraints are globally applied. To clarify: It would be really useful to have differing layouts depending on size class.

Problem story:

If I have an element that needs to remain 100% of my viewports width but yet also retain its original aspect ratio before being resized - how would one go about achieving that?

Proposed solution:

If you lock layerA's width and height and you set a constraint saying layerA = 100% width of canvas it should resize but retain its aspect ratio.

Currently if you lock a layers dimensions it doesn't resize at all when you update layout.

Not sure if my proposed solution conflicts with anything but if it doesn't this would be a really rad addition.

Non the less thanks for making this plugin, its one of my favorites :)

Take an example:

I haven't figured out a proper way to do that.
Anyway, this plugin is awesome.

Just noticed that i can't focus the Sketch window when the Preview window is focused.
I would love to expand the Preview window to a secondary screen while working on my sketch file, see photo: http://i.imgur.com/wa6wJ1u.jpg

Cheers,
Atilla

Hi,

I installed plugin via Sketch Toolbox while Sketch was not running. Plugin appears in correct folder and in Sketch menu but does not respond when selecting "Edit constraints" or "Show toolbar".

Sketch version 3.4 (15575)

Cheers,
Martin

I would really like to be able to create "sections" to my designs which can be placed after each other (from top to bottom). Today in Sketch, if a design change is made it often results in that you have to select all other elements and "push them down" on the page.

Functionality:

• A section consists of a unlimited number of other elements (just like a group)
• A section is dynamic in height, so if the height of the section is changed, it pushes the sections below down.
• Each section can be dragged and dropped over/under other sections to sort them from page top to bottom.

we're using a plugin that displays colors used for a selected element as a message (see screenshot) which is in conflict with Fluid's toolbar: the messages are being placed below the toolbar. This is true for any message I guess, which are being used for alerts etc. in numerous plugins.

I have no idea what's possible, but maybe the "paint order" could be changed, making the toolbar always the lowest layer (since messages usually have more priority)? or making the toolbar position movable?