https://github.com/jamsesso/fxsync
Synchronize your production React components with Framer X
https://github.com/jamsesso/fxsync
create-react-app design design-system design-tools framer framerx react
Last synced: 5 months ago
JSON representation
Synchronize your production React components with Framer X
- Host: GitHub
- URL: https://github.com/jamsesso/fxsync
- Owner: jamsesso
- License: mit
- Created: 2019-02-24T14:54:58.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2019-02-26T23:45:52.000Z (over 7 years ago)
- Last Synced: 2025-02-12T09:59:30.369Z (over 1 year ago)
- Topics: create-react-app, design, design-system, design-tools, framer, framerx, react
- Language: JavaScript
- Homepage:
- Size: 69.3 KB
- Stars: 30
- Watchers: 1
- Forks: 1
- Open Issues: 6
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
**fxsync** is a bundler that allows you to import React components from your existing projects into a Framer X file without changes to your existing code.
## Installation
```sh
npm install -g @jamsesso/fxsync
```
**Important:** Node.js >= 10.12.0 is required!
## Usage
### Setup
First, create a `.framerx` file that you want to inject your project's components into.
Next, In your npm project, annotate each component file you want to inject into your Framer X design with the `@framerx ` pragma. For example:
```js
/** @framerx MyProductionButton */
import React from 'react';
function Button({children, onClick}) {
return {children};
}
export default Button;
```
**Important:** The component name in the `@framerx` pragma does not need to match the component name defined in the file, but it must be a valid JSX identifier. Your component must also be the default export in the file.
The name you specify in the pragma is the name that the component will have inside your Framer X design file (in this case it is `MyProductionButton`; see line 1 of the previous example).
### Bundling your Components
Next, run `fxsync` with the path to your npm project (the directory containing the project's `package.json`) and the path to your existing `.framerx` file. This works best if you do not have the Framer file open in Framer while this command is executing.
```sh
fxsync
```
This will build a common-js compatible file named after your npm project (`name` in the `package.json` file) and inject it into your `.framerx` file at `code/lib/.js`.
`fxsync` can be run any number of times against the same `.framerx` file. When your production React code is updated, re-run the `fxsync` bundler to update the components in Framer X.
### Integrating Components into Framer X
Now that your production code is available inside of your Framer X design file, we can use them in our designs.
In Framer X, create a new component from Code. This will generate a file that you can modify. For this example, I am going to create a code component called `MyFramerXButton`:
```ts
import * as React from "react";
import { PropertyControls, ControlType } from "framer";
// Import your production components.
// my-project-name should be replaced by the name from your
// project's package.json file.
import {MyProductionButton} from './fxsync/my-project-name';
type Props = { text: string };
export class MyFramerXButton extends React.Component {
static defaultProps: Props = {
text: "Hello World!"
};
static propertyControls: PropertyControls = {
text: { type: ControlType.String, title: "Text" }
};
render() {
return {this.props.text};
}
}
```
## API
`fxsync` offers an API for running the build in code.
```js
const fxsync = require('fxsync');
fxsync('/path-to-project', '/path-to-design.framerx');
```
## Testing & Issues
This bundler was developed against a project that uses `create-react-app` and `styled-components`. It may not work for every type of project structure at this point.
If you find issues, I will do my best to explain how this bundler needs to be changed in order to support your project's requirements - however, it will likely be up to you to submit a PR with a fix.