Support to Framer X project's environment

[davo]

Will you consider adding support Framer X projects to your Choose your project's environment list?

The compiler configuration is similar to the React with TypeScript one, but the folder structure is totally different.

React with TypeScript

│  package.json
│  README.md
│  tsconfig.json
│  tsconfig.test.json
│  tslint.json
│  yarn.lock
├─node_modules
└─src
│  │  App.css
│  │  App.test.tsx
│  │  App.tsx
│  │  index.css
│  │  index.tsx
│  ├─components
│  │  ├─button
│  │  │  Button.tsx
│  │  │  Button.css
│  │  │  index.js
│  │  │  README.md

Framer X (React with TypeScript)

│  package.json
│  README.md
│  tsconfig.json
│  yarn.lock
├─node_modules
└─code
│  │  canvas.tsx
│  ├─components
│  │  ├─button
│  │  │  Button.tsx
│  │  │  Button.css
│  │  │  index.js
│  │  │  README.md
└─design
│  │  document.json
└─metadata
│  │  artwork.png
│  │  icon.png

[itaymendel]

We'd love to have the designers and developers that use Framer share their components via Bit!
I think that both tools can operate well together.

As for the project setup - it seems that Framer uses a React and Typescript as a boilerplate, but has a different directory structure. Can you share a link to an open source project that uses that structure so I can have a look and see how Bit can be used in Framer's config?

[davo]

It's great to hear that you are open to this idea!

Here is a Framer X Folder Example.

[itaymendel]

Thanks for sharing that example!
After playing with it for a few moments - it's possible to share components designed in Framer, and not complicated at all. The React-TS compiler supports it. It's just a matter of the syntax for the bit add command.

I would like to get your opinion on the value of such flow for a designer that uses Bit? (internally we work with other tools, so I'm not fluent in the Framer community and eco-system).

[GiladShoham]

@davo That looks very interesting!

[davo]

@itaymendel that's a really good question and honestly I do not have a straight answer for you, because this is a new territory.

What I know is, there is a large group of curious designers –designers who code, or learning how-to– coming together as a community, they are getting a solid design tool experience to create and share components.

Currently, Framer X have a solution for private components but it's locked into Team accounts, not for individual accounts. Another pricing tier for individual accounts with private components publishing capabilities might be in the pipeline, I do not know, honestly.

But I can see how valuable might be for these type of users to have an alternative outlet.
Plus, you have another feature that makes tons of sense, collections, it's pretty neat.

[itaymendel]

I like the fact that there is a new group of designers that care more about their tooling and integrating into the r&d workflows. I think that using Bit can close some of the gaps that are still present, even for designers that fully adopted the framer-x workflow and methodology.

The only caveat is that it seems that framer uses a proprietary rendering engine for their components. This means that framer-x components will not render on bit.dev. I think that designers will want to see the components, not only the implementation.
Before we go and incorporate an onboarding for framer-x designers, I think that we should have at least some understanding on how to improve their overall experience. Especially in regards to the rendering issue.

Do you think Bit is viable for designers, even though it does not support their rendering? (given time we will get there, but right now I don't have an understanding of the scope of the task).

[davo]

Not sure if I follow, what do you mean by proprietary rendering engine? All the native components that Framer X uses are open source and React based.

I guess it would be a matter of getting the right paths for the Framer dependencies.

https://codesandbox.io/embed/wox93l4jo8?codemirror=1

[itaymendel]

Ok, so it seems I was wrong. The link you shared clarified a few things for me.
I'll try and extend my PoC and see if I can get it to render correctly.

Edit
I figured out what was my issue with rendering the Framer X components. It seems that for some reason the dependency for Framer was not resolved correctly. I fixed that, and here you go -
https://bit.dev/itaymendel/framer-demo/framer/button

As for the steps to reproduce it:

First, clone the project you shared, and install all dependencies. Note, make sure to install the peerDependencies as well.

git clone git@github.com:framer/FramerXFolderExample.git
cd FramerXFolderExample
yarn

Now initialize Bit, set the compiler and track the Framer components:

$ bit init
successfully initialized a bit workspace.

$ bit import bit.envs/compilers/react-typescript --compiler
the following component environments were installed
- bit.envs/compilers/react-typescript@3.0.1

$ bit add MyProject.framerfx/code/Button.tsx --id framer/button
tracking component framer/button:
added MyProject.framerfx/code/Button.tsx

$ bit add MyProject.framerfx/code/canvas.tsx --id framer/canvas
tracking component framer/canvas:
added MyProject.framerfx/code/canvas.tsx

Run bit status and see that framer/button requires the file src/components/Button.tsx:

$ bit status
new components
(use "bit tag --all [version]" to lock a version with all your changes)

     > framer/canvas ... ok
     > framer/button ...  issues found
       untracked file dependencies (use "bit add <file>" to track untracked files as components):
          MyProject.framerfx/code/Button.tsx -> src/components/Button.tsx

So we need to track that file as well.

$ bit add src/components/Button.tsx --id components/button
tracking component components/button:
added src/components/Button.tsx

Now all that is left is to tag and export (make sure that you have a collection already set up for the export and that you have ranbit login to authenticate your computer with the account).

$ bit tag --all
3 component(s) tagged | 3 added, 0 changed, 0 auto-tagged
added components:  framer/button@0.0.1, framer/canvas@0.0.1, components/button@0.0.1

$ bit export <owner>.<collection>
exported 3 components to scope <owner>.<collection>

Head over to the web app and open framer/button.
Paste this example:

import React from 'react';
import { Button } from "@bit/itaymendel.framer-demo.framer.button";

export default (
	<Button/>
)

Done :)