jacopocolo/guide.md

## guide.md

      
    Raw
  

              guide.md
            
          
    Quick guide on how to get started with Framer X and the collab-ui components

This guide assumes that you have yarn and a code editor installed on your computer (Visual Studio Code is the recommended one for Framer X, use that). If you don't, get installing:

Yarn: https://yarnpkg.com/en/
Visual Studio Code: https://code.visualstudio.com/

One you are done:


Create a new project in Framer X


Save it


Go to File > Show project folder.


The safest way I found to get Framer to import collab-ui is to edit the package.json file you see in the folder. I tested multiple configurations but I only managed to get one to work. So, we'll use that. Open the package.json with Visual Studio, delete the content and replace it with the content you find here: https://gist.github.com/jacopocolo/331198dd021ada9fc810b94feca81972. Save the file with cmd+S.


Now we need to install collab-ui to the nodes_modules folder. Easiest way: still in Visual Studio, click on Terminal in the menubar to open the terminal panel. Click in the terminal panel and write cd and then space. Then, drag the package.json tab in the panel to auto populate the location. Click again in the terminal panel to reset your cursor, delete "package.json" from the string you just pasted and hit return (your command will look like this: cd /Users/jcolo/Library/Autosave\ Information/Framer-202FFC4B-CB8A-4FAF-B1F2-352B4463C445/container/). You are now in your project folder.


To install the collab-ui and all the necessary dependencies we just need to type yarn in the terminal and hit return. Yarn will take care of everything.


Now switch back to Framer X. Let's add a button!


Go to Components in the sidebar (third icon from the top) > New > From Code.


Right click on the component > Edit Code.


Let's import a button from collab-ui. Under import * as React from "react"; write import Button from "@collab-ui/react/lib/button".


Underneath, add: import "@collab-ui/core/css/collab-ui.min.css".


Now we need to tell the component to render our button. In the last function in the code (render()) remove the code you see after return and add the code for the collab-ui button:


<div className="container">
  <Button name="primary" size="large">Welcome to Collab UI React !</Button>
</div>

If, as you probably do, want to maintain the ability to override text in the button, delete “Welcome to Collab UI React!” From the button and swap it with: {this.props.text}.

In Framer X, drag and drop the component into a frame (Framer's way of calling Artboards) and you are done.