/next

A sketch plugin that exports designs as html, making it easy to quickly share design specs, css, and assets like fonts, svgs, and images.

Primary LanguageTypeScript

icon

Next

A sketch plugin that exports designs as html, making it easy to quickly share design specs, css, and assets like fonts, svgs, and images.

Getting Started

Select an artboard in your sketch file.

Select an artboard

Run plugin to compose export.

Run plugin to compose export

Left panel shows layers. Right panel shows CSS and notes.

Panels example

Hover over layer on the artboard or layers panel to see dimensions.

Hover over layer to see dimensions

Click layer on the artboard or layers panel to select it. While selected, you can view CSS, notes, inspect assets, and hover over other layers to see relative spacing.

Select layers to see styles and assets Inspect images and svgs

Double click groups to view group layers.

Groups example

Navigate nested groups by clicking back, or double clicking a group in the layers panel.

Back button example

Add layer notes.

Add note example

Layer note count is displayed in a circle. Nested layer note count is displayed in a square.

Note count example

Copy CSS to clipboard.

Copy example

Export spec

Export spec 1

Export spec 2

Export folder structure. Includes images (1x and 2x), svgs, and fonts used in spec.

Export folder structure

Open spec.html in your preferred browser to view spec.

Final spec example

Sketch Theme Support

Dark theme

Dark theme example

Light theme

Light theme example

Complex SVG Export Support

Prefix groups with [next.svg] to make them an svg export (prefix will be removed from the layer name in the final spec).

Complex svg example 1

Complex svg example 2

Adaptive Rule Color

Rule and dimension color is the inverse of the average artboard color.

Adaptive rule color

More Details

  • Max canvas size: 20,000px by 20,000px
  • Hidden layers are not included in spec.
  • Gradients are converted to images.
  • Supports most masks.
  • Shapes and complex ShapePaths are converted to svgs.
  • Layer Borders, Shadows, and Inner-Shadows are combined and converted to a single css box-shadow.

Key Bindings

  • Zoom in: control option command +
  • Zoom out: control option command -
  • Re-center canvas: control option command enter
  • Supports trackpad pinch zoom and mouse wheel zoom (Semi-broken on chrome. Disable native chrome pinch zoom for best results).

Prerequisites

  • Sketch: v.61.2
  • Browser: Safari, Firefox, or Chrome.

Installing

  1. Download the latest release of the plugin
  2. Un-zip
  3. Double-click on next.sketchplugin

Firefox Masking Bug

If your design includes a complex mask (i.e. the mask shape is not an oval or rectangle), the mask and its contents will not be visible when viewing the spec on Firefox. This is due to Firefox's privacy settings. The bug only occurs when loading assets from local storage, so the CSS will still work in production. Until the bug is fixed, you should view your spec in Chrome or Safari if it includes a complex mask.

https://bugzilla.mozilla.org/show_bug.cgi?id=1565509