Shared publicly  - 
 
What I'm thinking for Docking Mode. Added some awesome input from +Elliot Geno, more to digest there though : ). (colors and icons are not final, obviously!)

Templates
- templates are per device or per screen (template is created for each target screen, all common devices have prebuilt templates).
- some devices (like XBoxes) have an unknown screen, so you can target multiple screen (eg: put unimportant graphics in the 16:9 area).
- guides are attached to the template, not the rulers. 
- guides are locked to the template, and move/grow proportionally as the template changes.
- There is a view mode for each targeted template. Automated positions can be overridden in those, but not in the 'master' template (some kind of broken icon for the overridden handle).


Handles
- handles are normally box (or rotation) allowing the designer free control of the object.
- anything with box icons (default) will behave as normal, and will be positioned in absolute coordinates on export.
- a lock icon always locks to the template (or guides).
- a pin icon locks to the paper (which grows and shrinks per device template
- an anchor locks to objects
- a spring locks to objects or templates/guides

Button One

- if a side is locked (like button 1 top), then not only is its position locked to the template, but the designer can not scale in that direction without removing the lock.
- in the case of button 1, the top corner boxes will only allow horz scaling, thus they are greyed out a bit.
- whenever something is moved to 'snap' to a guide/template, it automatically locks in that direction. If moved or keyboard nudged, it keeps the lock, but it becomes distance bound.
-locks can be cleared with a shortcut (perhaps ctrl/shift/Z, clear all transforms also breaks custom icons?).

Button Two

- in button two (bottom left image), the item is locked 5 pixels from the bottom left title safe area (this may be better accomplished with guides?). It is also pinned to the paper on the right. Thus it will grow horizontally to the right. It does this when the designer drags it, per template, and when the width is set in code. The top is not set, therefore it will not change per template (constant height), however it could change with code or by designer adjustment. 

Center Group

- the center icon group is pinned to the center (center icons can be set). In the center this has the same effect as being locked to the center, but had it been offset, the offset would be proportional the the template size. 
- these icons are separated by springs. This can be set manually, but it is automatically set when something is distributed. 
- Spring or anchor joined objects become a 'weak' group. In the center icons case, you could move the third icon independently, but the second would move to keep the distances equal, and pin would change locations. Had the pin been a lock, the first icon would move left to keep distances equal.

Bottom Right Set

- the second icon set (bottom right) has been top aligned. This automatically anchored to tops to each other. moving one icon up or down will move them all, but moving them left or right will be the spring behaviour.
- they are locked to the guide on the right. Moving this guide will move the group (and anything else attached to it). Probably that would move the group 'as is' rather than affecting the springs.
- the guide is locked to the template, so as the template grows, the guide will as well.

Templates in Symbols

- templates can be used internally to define symbols. The allow things like minimum size, flow handling, stretch logic etc. So when scaling a symbol defined with a template, you will not necessarily get the regular stretch - eg a grid defined this way may space the icons differently (or even add icons if it is so defined).
1
Robin Debreuil's profile photoElliot Geno's profile photo
 
Is this a mockup or did you build it already?
Add a comment...