matt-curtis / fluid-for-sketch Goto Github PK
View Code? Open in Web Editor NEW[Sketch Plugin] Sketch-flavored Auto Layout-like Constraints
[Sketch Plugin] Sketch-flavored Auto Layout-like Constraints
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?
Document demonstrating issue: http://www.datafilehost.com/d/65cdeb9a
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?
Amazing work on this plugin. It seems like the preview is blurry on retina displays & would be great to fix that :)
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
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?
Propositions
Feedback welcome
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
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 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.
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:
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
The error message: "Select an artboard, or any layer in an artboard, so we know which artboard to target."
On retina the preview window seems to be @1x and rather blurry,
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?).
When you have a set of layers that looks like this in Sketch's layer panel:
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).
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.
Hi great plugin, but I was wondering is there a way to access the constraint data so that I can export it via JSON.
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.
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.
Doesn't work with Sketch 3.4 or 3.4.1
Current Flow Moving the Toolbar:
Ideal Flow Moving the Toolbar:
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?
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 :)
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:
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.
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 speed up workflow, and get rid of an extra click.
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?
This will be a bit of a tough one to implement right and store properly... current thoughts:
$a
, etc.$padding = $padding + 100%
Possible applications:
Possible an extraneous feature. There's downsides to this being (mis)/applied as well. Feedback welcome.
So for instance being able to pin 15px on the left at resolutions of 768 or less and centering for resolutions greater than 768.
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:
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
Needs to expand to include:
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.
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?
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)
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.
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.