Jump to content
Teo_

Info layer (to describe the element sizes etc. to the team)

Recommended Posts

Info layer

One of the most boring parts of my job is, once defined an interface layout, is to prepare a descriptive document for the developers.
I usually create a document embedding the image of the layout and write all significant informations about the elements (sizes, colors, etc.)


1 - Basic implementation
When I select an element with the move tool or selecting from the layers panel, I’d like to have a new option: create information element.
This information will be placed in an “Info layer”. Each info layer can have multiple information elements.
The info to show, on selecting create information element, can be set by default, but for each element I’d like to customize it.
I’d like to see a view like the dropdown of snap options with multiple options where I can chose which informations I want to show (e.g. width, X position, opacity, effects informations). A custom text field to manual insert free text notes is welcome.

post-6268-0-07732100-1454857766_thumb.png

post-6268-0-94503600-1454857779_thumb.png

Info layer options
In the same file I’d like to see multiple info layers, so some info layer options could be considered:
Color format (e.g. HEX, RBGA, CMYK, and why not source code like in Color Picker app etc.)
Layer styles (e.g. numbers references or straight lines or lines and circles, arrows, etc)
Font style and color of the view

post-6268-0-79784900-1454857780_thumb.png


2 - Advanced implementation
Dynamic info layer: if the element changes properties (on change font size, color, position, etc.) the info layer updates his content. This will reduce the designer stress of changing something in the layout.
Autoresizing info as UI element: reproduce the Xcode or other tools autoresizing to quickly describe to developers how to manage the element on responsive context
post-6268-0-53015000-1454857781_thumb.png

 

3 - Fantastic implementation
Implement the autoresizing and auto layout constraints of the elements not only as information, but like the Lock children feature, as real binding with the parent element. So, the transform panel (or a new “constraints”) panel could have this options and if I resize the parent element, the child could be always in center or similar behaviors.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×

Important Information

These are the Terms of Use you will be asked to agree to if you join the forum. | Privacy Policy | Guidelines | We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.