Sketch Spec Resource

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

Don't: Use pixel values.

Incorrect spacing spec

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

Do: Clearly label properties using Design Language names.

Correct properties spec

Don't: Use points or hex values.

Incorrect properties spec

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

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

Nested grid spec

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.