https://github.com/react-figma/primerdemo
📱 A multiplatform React-based design system (demo)
https://github.com/react-figma/primerdemo
Last synced: 11 months ago
JSON representation
📱 A multiplatform React-based design system (demo)
- Host: GitHub
- URL: https://github.com/react-figma/primerdemo
- Owner: react-figma
- Created: 2020-01-14T19:54:31.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-08-31T13:05:59.000Z (over 1 year ago)
- Last Synced: 2025-05-07T01:38:28.394Z (11 months ago)
- Language: TypeScript
- Homepage: https://primerdemo.now.sh
- Size: 3.32 MB
- Stars: 19
- Watchers: 3
- Forks: 5
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Primer Demo
A multiplatform React-based design system inspired by GitHub [Primer](https://primer.style/).
## Demo
#### Web
[Website](https://primerdemo.now.sh/)
Demo GIF
#### Figma
Dulplicate [Community File](https://www.figma.com/community/file/905801857371996928)
[Demo Figma document](https://www.figma.com/file/WCoBWoLG9UQSb9bC9ZLhRl/Untitled)
Demo GIF
#### Native
Demo GIF
## Running
* Web (Storybook React): `yarn storybook:web`
* iOS simulator (Storybook React Native): `yarn storybook:ios`
* Figma plugin (React Figma): `yarn figma:webpack:watch`
## Structure
```
├── .storybook - @storybook/react configuration
├── .storybook-native - @storybook/react-native configuration
├── android - gradle project for React Native app
├── assets - React Native app assets
├── ios - iOS project for React Native app
├── src
│ ├── components
| ├── fonts - fonts for web
| ├── frames - frames for displaying through React Figma
| ├── helpers - frames for displaying through React Figma
| ├── hooks - React Hooks
| ├── styles - global styles for web
| ├── tokens - design system tokens (colors, spacing, etc.)
| ├── wrappers - universal wrappers for base UI elements (buttons, images, etc.)
│ ├── App.tsx - React Figma app
│ ├── code.tsx - entty point for Figma plugin Main-thead
│ ├── ui.html - entty point for Figma plugin UI-thead
│ └── ui.tsx
├── app.json - react-native config file
├── babel.config.js - babel config for react-native
├── figma.d.ts - figma plugin typings
├── figma.webpack.confgi.js - Webpack config for react-figma
├── manifest.json - Figma plugin manifest
├── metro.config.js - config for Metro bundler
├── now.json - config for Zeit Now
├── package.json
├── tsconfig.json
└── yarn.lock
```