Sketch Spec Resource
beta

This is a general guide that can be used by designers to help spec their comps for development handoff.

Creating products requires effective collaboration and communication between designers and developers. A clear spec is a great tool to efficient collaboration in addition to avoiding costly implementation mistakes. It will also get everyone on the same page to make the right decisions in achieving a look that is consistent with E*TRADE's aesthetic.

Do: Link to our component pages / code snippets.

Do: Use Design Language naming convention where applicable.

Do: Clearly label grids, properties, and spacing.

Don't: Use specific pixel values and hex codes unless an element is custom built.

Our front-end style-guide is a living collections of UI- elements’ descriptions and corresponding code snippets that you can use to direct a developer to the correct component in your mockup.

This spec communicates the space between two elements.

Do: Use our naming convention and point to our spacing page.

Correct spacing spec
done

Don't: Use pixel values.

Incorrect spacing spec
clear

This spec provides information on specific properties such as fonts, icons and images.

Do: Clearly label properties using Design Language names.

Correct properties spec
done

Don't: Use points or hex values.

Incorrect properties spec
clear

Our bootstrap grid system uses a series of 12 columns to layout and align content. Your grid spec informs the developer on how your design will be placed on desktop, tablet, and mobile.

Do: Show grids.

Grid spec
done

Do: Show nested grids to highlight positioning inside other elements.

Nested grid spec
done

Speccing interactive properties can sometimes be misinterpreted. With a prototype, you can share the experience with your team and together discover possibilities and limitations.

It's ok to use explicit hex and pixel values for code that would only be used for your project.