Design workflow


Sketch + InVision with Craft for clear communication between designers and developers and keep consistency throughout our digital products.

Download Sketch template

or See style guide

  1. 1. Design
  2. 2. Confirm design
  3. 3. Sync it
  4. 4. Add assets
  5. 5. Share it

Design

Start from Sketch template

Download Sketch template and start your mockup on actual pixels. Save reusable assets to FabFitFun style guide that can use used over time on other pages for the future.

Download Sketch template

Confirm design

Confirm your design with the product owner

Work with product owner to finalize your design before move on to next step.

Sync it

Sync your design mockup with Craft

Craft offers a very smooth workflow between Sketch and InVision and more. See how it work.

Get Craft plugin for Sketch

Add assets

Add assets to your prototype

Add production ready art assets to your prototype for develpoers. See how to add assets to your prototype.

Share it

Share your InVision prototype (Inspect mode and Assets)

Set up clickable prototypes if needed and make sure all pixels are correct in Inspect mode before handing it over to developers. Invite front-end developers to your prototype so they have access to:

  • Inspect mode to see actual pixels
  • All assets used in design mockup
  • Prototype

Back to style guide

SCROLL TO TOP