Inspired by https://github.com/shiftsave/framerx-build-system I have also setup a project to achieve the following nice design<->development processes:
- Import react components into your FramerX project!
- Export code components and layouts from your FramerX project!
- git version control for FramerX project
We use this project as a boilerplate for new FramerX projects. It helps us to import real developed reactjs components into a FramerX project.
We provided these commands to interact with the FramerX project.
$ npm run push pushes changes to FramerX
$ npm run lib:build builds library for FramerX
$ npm run lib:push pushes library to FramerX
$ npm run src:pull pulls code components from FramerX
$ npm run src:pull pushes code components to FramerX
$ npm run restore recreates FramerX project file
Clone this repository and install dependencies.
$ git clone git@github.com:zauberware/framerx-react-sync.git && cd framerx-react-sync$ npm install
Let's walk through the project structure:
Example components we want to import into FramerX.
The lib folder includes the generated sources from _production. We compile a FramerX friendly and readable folder with babel. That lib folder will be pushed into the FramerX project. This provides code components the ability to access your production components.
code/ is a pulled folder from FramerX project. FramerX uses this folder to store it's code components. We pull this folder that we include them into git. You can also make changes here and push them back into the project.
design/ is pulled folder from FramerX project. FramerX saves created layouts into this folder. We just pull this folder from the project to provide version control for the designs.
Builds a lib folder from _production sources.
$ npm run lib:build
Pushes the lib folder into the FramerX project
$ npm run lib:push
In the _production folder we put some sample components. If you want to use your production resources here you have to create a symlink.
- remove current _production folder
$ rm -rf _production - symlink your project src folder
$ ln -s ~/workspace/your-project/src _production
If you have made changes in the FramerX project you have to pull the changes into code/ and design/.
$ npm run src:pull
If you have made changes in code/ or design and you want to push them into the FramerX project, you can run this command:
$ npm run src:push
.framerx files are just ZIP files. So our pull and push are just zip and unzip.
If you want to add more library support in FramerX you have to click on File > Show project folder and find out the path. Then go with your CLI into that folder. It's a simple node project and you can add libraries like for any other project.
Busted the FramerX project file? You can restore a new styled-components.framerx file with:
$ npm run restore
It bundles code/, design/ and lib/ into a fresh FramerX project (with styled-components presintalled).
If you have opened the project in FramerX and you make a push you sometimes have to reopen the FramerX project. Otherwise it won't show the changes. Maybe there is a "refresh"-Button, but I havn't found it so far.
Script: https://github.com/zauberware/framerx-react-sync
Author website: https://www.zauberware.com
Author: zauberware technologies / Simon Franzen simon@zauberware.com
