https://github.com/shiftsave/framerx-build-system

A starter repo to get started with building a Design System within Framerx using production components
https://github.com/shiftsave/framerx-build-system

Last synced: about 2 months ago
JSON representation

A starter repo to get started with building a Design System within Framerx using production components

• Host: GitHub
• URL: https://github.com/shiftsave/framerx-build-system
• Owner: shiftsave
• License: mit
• Created: 2018-08-28T21:56:18.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2018-10-26T21:31:58.000Z (almost 6 years ago)
• Last Synced: 2024-07-03T13:27:12.073Z (3 months ago)
• Language: CSS
• Size: 1.15 MB
• Stars: 157
• Watchers: 8
• Forks: 25
• Open Issues: 8
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-react-framer-x - Framer X Build System - A build system to transpile React components for use in Framer X - Check out the ([intro blog post](https://blog.prototypr.io/bringing-design-system-components-from-production-into-framer-x-786e89be2250)). (Framer X Components, Tools & Tips / Code Editors)

README

        
# Framer X Build System



This repository contains a build system to transpile React components into a self-contained library for use in Framer X. This was built in order to bridge the gap between the components used in design and their counterparts in production.

### Installation

1. Clone, download or fork this repository

2. `cd framerx-build-system && yarn install`

### Available Commands

#### `yarn build`

Bundles the production codebase into ES6 and copies it into the `/lib` inside Framer X contents.

#### `yarn sync:lib`

Replaces `/lib` inside Framer X contents with the latest version of the build.

#### `yarn sync:src`

replaces the contents of `/src` with the content of the Framer X file.

#### `yarn sync:framerx`

Builds a new Framer X file in case of conflicts or file corruption with the contents of `/lib` and `/src`.