ReactFoo Pune

On lessons learned during implementation.

Designing with React

Submitted by Siddharth Kshetrapal (@siddharthkp) on Sunday, 3 December 2017

videocam
Preview video

Technical level

Intermediate

Section

Full talk on success and failure stories with React; code overheads and code rewrite stories with React

Status

Submitted

Vote on this proposal

Login to vote

Total votes:  +2

Abstract

Most of us work with designers and other developers on a daily basis. It isn’t always easy to maintain quality and consistency across teams or even features. Collaboration isn’t always easy with spec handovers, component states, achieving pixel perfection, etc.

Design systems have become really popular in the design world in the past couple of years and for good reason. React’s methodology of thinking in components along with recent tools like react-sketchapp make it feasible for designers and developers to work on a single system.

Outline

[or just watch the video instead]

Most of us work with designers and other developers on a daily basis. It isn’t always easy to maintain quality and consistency across teams or even features. Collaboration isn’t always easy with spec handovers, component states, pixel perfection, etc.

Design systems have become really popular in the design world in the past couple of years and for good reason. React’s methodology of thinking in components along with recent tools like react-sketchapp make it feasible for designers and developers to work on a single system.

In this talk I explain what is a design system (it’s not a just component library*) and try to convince folks about the value of design systems and show the path starting from scratch based on my experience from 2 culturally very different companies.

There are a bunch of technology and people problems to talk about here:

tech:

  • Choice of base stack (React over web-components/vue/etc)
  • Build your own or customize an existing framework like bluekit/react-bootstrap
  • Documentation as a product
  • Packaging and distribution strategies

people problems:

  • How to convince your boss that this is something that we need :),
  • How to drive adoption in other teams (if and why should they refactor their working apps to use this?)
  • How do you keep design assets and code in sync, long term maintainence model, etc.

I feel this is a topic worth talking about because we are the dawn of innovation at design + development tools and the more we embrace each other, the better our workflows will become.

*. Component library is part of the design system, it also includes design tokens that are shared across tech stacks, assets for designers to work with, documentation as a product and brand guidelines

Requirements

an open mind?

Speaker bio

Building design systems @auth0 ∙ ex @practo ∙ Built bundlesize & cost-of-modules ∙ Makes youtube videos ∙ Co-organises @ReactBangalore ∙ plays football, noob surfer

Links

Preview video

https://www.youtube.com/watch?v=NnpEKHwss_w

Comments

Login with Twitter or Google to leave a comment