UX Workflow & Tool Review
Framer X
Design & Development Workflow
Design Tool Goals
-
Screen design features
- Mockup the visual design
- Mockup the visual design
-
Prototyping features
- Demonstrate interactions
-
Handoff features aid
- Handing off designs to developers
- Handing off designs to developers
-
Collaboration features
- Facilitate feedback and workflow tracking
All Sounds Good?
What's in Reality?
Different Mediums
Wireframe
Design
Handoff
Implementation
Designer
Developer
Outdated
Out Of Sync
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
- 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
- Link paper prototypes
-
Visual Design
- images, text, hand sketch to vector, text, layout the UI with Components
-
Interaction Design
- High-fidelity Prototyping with / without coding
- High-fidelity Prototyping with / without coding
-
Real Data
- Work with real data from JSON or API
-
Create & Reuse React components
- Designer can design by creating or reusing React Component
- Design once, use forever
Differences from other Designer Tool?
A component in Sketch and Figma are basically just a combination of layers that get rendered as a static image
Framer X, components can be driven by React code, Sketch design can also be pasted in.
Create New Component from Design
Create New Component from React Code
Create Component via Existing Component Library
Export to Web Preview, Canvas, PNG, JPG, WEBP, PDF
CSS / SVG
(copy or inspection via preview)
Override with React Code
React Code from Design?
What can you do with Framer X?
Framer X
DEMO
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
Google's Material Design Tooling
DEMO
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
