How to create a multi-platform design system on React – HolyJS 2020 Moscow

You will learn how using React Native, React Figma, Styled System and other technologies create multiplatform design systems described by a code. The targeted audience of the talk is the product company designers and design system developers.

• Holy.js Talk announcement
• Slides [ru]
• Video [ru]

Example

📱 PrimerDemo — A multiplatform React-based design system inspired by GitHub Primer.

• Source Code
• Storybook
• Figma Community file

Links

• react-figma
  • react-figma GitHub
  • react-figma website
• React Renderers
  • React Renderers: an Overview
  • React Native
  • react-three-fiber
  • React 360
  • ink — React for interactive command-line apps.
  • react-hardware
  • react-sketchapp
  • react-xd
• React Reconciliation
  • Official doc
  • react-reconciler — an experimental package for creating custom React renderers.
  • react-reconciler-talk
  • React Reconciler: How to write your own renderer on HolyJS 2020 Moscow.
    • react-reconciler-talk-v2
• Atomic Design by Brad Frost
• gambit.gg — Esports website by lessmess
• Setproduct Design System 2.0 - UI kit
• Infrastructure as code
• Figma Developer Platform
• Figma Plugins API
• styled-components 💅
  • styled-components example
• GitHub Primer
• react-figma-boilerplate — Boilerplate app for react-figma.
• Webpack aliasing
• Storybook
• System UI Theme Specification
• react-primitives-box — Ergonomic, responsive React layout and grid system.
• Figma Component Variants
  • Bridging design and code with Variants
  • Using Figma Variants with react-figma
• MDX
  • MDX example
• Dimensions API
  • React Native doc
  • Implement Dimensions API #321
• [WIP] Figma Code Generator Plugin
• FigmaToCode
  • react-native / react-figma / react-primitives supporting #11
• GPT-3
• experimenting @openAI to @reactjs component to @figmadesign