Design & Development Workflow

Design Tool Goals

• Screen design features
  • Mockup the visual design
    
     
• Prototyping features
  • Demonstrate interactions

Different Mediums

Many hard problems are best solved when they are addressed backward.”

— Charlie Munger, Vice-Chairman of Berkshire Hathaway

• Painting With Code https://airbnb.design/painting-with-code/

The Existing Solution?

• React-sketchapp (2017)
  • allows you to render React Native components to a Sketch artboard
  • paradigm shift in which the design “source of truth” resides in code
  • can be exported to Sketch as a designer’s starting point, and serve as a visual archive
     
• html-sketchapp
  • turns HTML nodes into Sketch layers or symbols
     
• html-sketchapp-cli
  • generate Sketch libraries from HTML documents and living style guides

The Existing Solution?

New Goals

• Solution for design system without disconnecting the design from code, or adding extra layers in between
   
• Components can be the single source of truth
   
• Designers can truly collaborate with Developers to create consistent components

Component

truly functional product design begins with reusable and interactive UI components

What can you do with Framer X?

• Wireframing 
  • Link paper prototypes
     
• Visual Design
  • images, text, hand sketch to vector, text, layout the UI with Components

Differences from other Designer Tool?

What can you do with Framer X?

Alternatives

• Google's Material Design Tooling + Sketch
  • Material Theme Editor https://material.io/tools/theme-editor/
  • Helps customize branded symbol library and apply global style changes to color, shape, and typography. Available for Sketch.
     
• Galley
  • ​https://material.io/tools/gallery
  • Zeplin-like tool for Material Design, which delivers the meta-data of metrics, color hexcodes, and type styles to the developer

Designer & Developer Workflow

Summary

• Rise of Component-based Design Methodology
   
• Framer X
  • Enable fast prototyping with interactions
  • Support creating new design with existing components
  • Centralized source for approved components, a single source of truth
    ​
• Existing and Alternative Solutions
   
• Revolutionize the Designer / Developer Workflow

Questions