Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/ilyalesik/multiplatform-design-systems-talk

Materials to HolyJS 2020 Moscow talk
https://github.com/ilyalesik/multiplatform-design-systems-talk

holyjs

Last synced: 12 days ago
JSON representation

Materials to HolyJS 2020 Moscow talk

Awesome Lists containing this project

README 

        
# 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](https://holyjs-moscow.ru/en/2020/msk/talks/5udhzhsrgbzzg3r496hmge/)

* [Slides [ru]](https://speakerdeck.com/ilyalesik/kak-sozdat-mul-tiplatformiennuiu-dizain-sistiemu-na-react)

* [Video [ru]](https://www.youtube.com/watch?v=sK0zDRaeDXE)



## Example



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



* [Source Code](https://github.com/react-figma/PrimerDemo)

* [Storybook](https://primerdemo.now.sh/?path=/story/button--primary-button)

* [Figma Community file](https://www.figma.com/community/file/905801857371996928)



## Links



* react-figma

  + [react-figma GitHub](https://github.com/react-figma)

  + [react-figma website](https://react-figma.dev/)

* React Renderers

  + [React Renderers: an Overview](https://dev.to/lessmess/react-renderers-an-overview-34f3)

  + [React Native](https://reactnative.dev/)

  + [react-three-fiber](https://github.com/pmndrs/react-three-fiber)

  + [React 360](https://facebook.github.io/react-360/)

  + [ink](https://github.com/vadimdemedes/ink) — React for interactive command-line apps.

  + [react-hardware](https://github.com/iamdustan/react-hardware)

  + [react-sketchapp](https://github.com/airbnb/react-sketchapp)

  + [react-xd](https://github.com/macintoshhelper/react-xd)

* React Reconciliation

  + [Official doc](https://reactjs.org/docs/reconciliation.html)

  + [react-reconciler](https://www.npmjs.com/package/react-reconciler) — an experimental package for creating custom React renderers.

  + [react-reconciler-talk](https://github.com/LosYear/react-reconciler-talk)

  + [React Reconciler: How to write your own renderer](https://holyjs-moscow.ru/en/2020/msk/talks/6o35zzxqtqwadjvh8kpyt8/) on HolyJS 2020 Moscow.

    - [react-reconciler-talk-v2](https://github.com/LosYear/react-reconciler-talk-v2)

* [Atomic Design by Brad Frost](https://atomicdesign.bradfrost.com/)

* [gambit.gg](https://gambit.gg/) — Esports website by [lessmess](https://lessmess.agency/)

* [Setproduct Design System 2.0 - UI kit](https://www.figma.com/community/file/846510436298829260)

* [Infrastructure as code](https://en.wikipedia.org/wiki/Infrastructure_as_code)

* [Figma Developer Platform](https://www.figma.com/developers)

* [Figma Plugins API](https://www.figma.com/plugin-docs/intro/)

* [styled-components 💅](https://styled-components.com/)

  - [styled-components example](https://github.com/react-figma/react-figma/tree/master/examples/styled-components)

* [GitHub Primer](https://primer.style/)

* [react-figma-boilerplate](https://github.com/react-figma/react-figma-boilerplate) — Boilerplate app for react-figma.

* [Webpack aliasing](https://webpack.js.org/configuration/resolve/)

* [Storybook](https://storybook.js.org/)

* [System UI Theme Specification](https://system-ui.com/theme)

* [react-primitives-box](https://github.com/react-figma/react-primitives-box) — Ergonomic, responsive React layout and grid system.

* Figma Component Variants

  - [Bridging design and code with Variants](https://www.figma.com/blog/bridging-design-and-code-with-variants/)

  - [Using Figma Variants with react-figma](https://dev.to/lessmess/using-figma-variants-with-react-figma-50k0)

* [MDX](https://github.com/mdx-js/mdx)

  - [MDX example](https://github.com/react-figma/react-figma/tree/master/examples/mdx)

* Dimensions API

  - [React Native doc](https://reactnative.dev/docs/dimensions)

  - [Implement Dimensions API #321](https://github.com/react-figma/react-figma/issues/321)

* [[WIP] Figma Code Generator Plugin](https://github.com/react-figma/code-generator)

* [FigmaToCode](https://github.com/bernaferrari/FigmaToCode)

  - [react-native / react-figma / react-primitives supporting #11](https://github.com/bernaferrari/FigmaToCode/issues/11)

* [GPT-3](https://openai.com/blog/openai-api/)

* [experimenting @openAI to @reactjs component to @figmadesign](https://twitter.com/sonnylazuardi/status/1282626069095280642)