Framer X Beta overview and examples

Hello guys. Today I would like to overview Framer X Beta and break down a few examples.

But first, let me introduce myself 🙂I’m a product designer in Farfetch. Together with Alexander Artsvuni we are currently working on prototyping Kit, we have ambitious goals, and we are trying to make prototyping easier and better — we are building a live design system, interactive. We already made a prototyping Kit in legacy Framer and now it’s time for Framer X.

It will be a temporary article with a very short lifecycle (I think) and mostly technical. If you are looking for generalising article — what is Framer X, who is Framer X for etc. I would suggest you an article by John Traver or go to the end of the article and read the conclusion.

Framer X: to future or not to future

So, we will talk about Framer X Beta, which means that the Framer guys are still working on it and a lot of things could be changed.

Framer X is the place where design meets code 🙂 React.js in particularly.

Current Beta is 5, and the new version has several cool features that community asked for.

Table of contents

• Tools
• VS code
• Prettier
• Console and inspector
• How to open a project in VS code
• Problems and Terminal
• Basic things about React
• Basic component structure
• How to contribute to Github with Framer X
• Installing external modules via Yarn
• Installation and work with Styled-components
• Load local fonts with Styled-Components
• Switch component
• Tabs component
• Feedback and Help
• In conclusion

Tools

Besides Framer X we will also need to install additional tools like code editor or IDE (integrated development environment).

Visual Studio Code

Visual Studio Code - Code Editing. Redefined

Visual Studio Code or VS Code is a source code editor developed by Microsoft. This IDE is better than Sublime Text or Atom because it has internal code validators, and also, TypeScript was made by Microsoft, so it will logical to use VS Code. VS Code is a very customizable app with a wide variety of extensions.

Prettier

Prettier - Code formatter - Visual Studio Marketplace

This VS Code plugin will make your code beautiful, and you don’t need to think about code layout, forgotten comas, and semicolons so much. Just press ⌘S.

Console and inspector are your best friends

Only in this place you can understand what went wrong. Don’t try to write a working component without a console. Break down your component on several pieces and test each of it; try to transfer values in the console first, design and animation are the last things.

How to open a project in VS Code

Open Framer X → Open (create) your project → Press ⌥⌘P → Drag’n’Drop “container” folder into VS Code → Done!

Problems and Terminal

These are two important things to debug errors and install external modules.

Basic things about React

What is React, how to build a simple React component, what is JSX, and much more can all be found here —

Hello World - React

Basic component structure

Let’s break down this component. Framer components are a little bit different from basic React components on ES6 because the Framer X uses preprocessor TypeScript which allows us to write an optional static typing code. So, the syntax is a little bit different and ES6 React components has a few

Line 1–2. Import two general scripts — React itself and two required modules from framer PropertyControls and ControlType;

Line 4–8. Due to Framer X using TypeScript, we need to indicate the types of our future props before we will create a component. Props which mean properties, and they are static instead of State, but the he same will we need to do for states as well;

If you doubt about your prop type you can use type any, but always try to define your type, because TypeScript stands for strict type definition, unlike JS;

Line 10. Declare our component. In this line, we define the component name, telling that we need to export this component and passing Props into it;

Line 12–17. Define default Props;

Line 19–22. In this code, we define what controls we want to see on the inspector panel. More about property controls here:

Code Components

And here:

Setting Props in Framer X

Line 24. This is a place where we actually render our component. It’s an HTML layout of the component. Also, we are passing here Props and styles;

Line 27. Style attribute. We could write multiple inline styles by using Spread operator or Object.assign(). Instead of Spread operator Assign method will work more stable;

Spread operator

style={{                    
    ...{ background: this.props.tintColor },
    ...basicCompStyle                
}}

Object.assign() method

style={Object.assign(               
    { background: this.props.tintColor },
    basicCompStyle                
)}

Line 38. They are style objects. No need to write all your styles in render function. If you will write styles separately it will allow you to focus on more on functional things of your component. I prefer to write them in the end, but of course, it depends;

How to contribute to Github with Framer X

Carefully :-)

FAQ - Framer X

Because Framer X now has a single file or binary structure instead of folder structure, we can’t make little changes with different files and scripts in this file.

To make a contribution possible, we need also to have several folders for each contributor and the one master file which will be updated by the maintainer of the project. But if you know a better way let me know ;-)

Let’s break down a few components. But first we need to install external package to make our work easier, and this is it very cool as you can bring all power of React and NPM into your projects. And I hope guys in Framer understand it ;-)

Installing external modules via Yarn

This is still very fragile but you can open a Framer X project, File > Show Package and use the terminal to use yarn add <package> .

Installation and work with Styled-components

styled-components

Styled-components lets you write actual CSS in your JavaScript. This means you can use all the features of CSS like media queries, all pseudo-selectors, nesting, etc. Also, Styled-components supports LESS syntax.

Furthermore, Styled-component is not just a way to write a native CSS, it is also a conditional CSS.

Here’s a short video on how to install and write simple styled components.

Load local fonts with Styled-Components

Framer X so far doesn’t have an appropriate way to load custom local fonts (not google or some any cloud fonts, with web-fonts is pretty simple).

We will use injectgGobal API method.

A helper method to write global CSS. It does not return a component, but adds the styles to the stylesheet directly.

First we need to import it:

import styled, { injectGlobal } from "styled-components";

Next we need to add our @font-face rule

injectGlobal`
@font-face {
    font-family: "Polaris";
    font-weight: 500;
    src: local('Polaris Book'), 
         local('Polaris-Book'), 
         url(/code/fonts/Polaris-Book.woff) format("woff");
}
@font-face {
    font-family: "Polaris-Bold";
    font-weight: 700;
    src: local('Polaris Bold'), 
         local('Polaris-Bold'), 
         url(/code/fonts/Polaris-Bold.woff) format("woff");
}
@font-face {
    font-family: "PolarisCondensed-Bold";
    font-weight: 700;
    src: local('Polaris Condensed Bold'), 
         local('PolarisCondensed-Bold'),
         url(/code/fonts/PolarisCondensed-Bold.woff) format("woff");
}
`;

To test a local font we should delete a local rule from @font-face otherwise your custom font wouldn’t be downloaded, browser will take the font directly from the OS.

injectGlobal`
@font-face {
    font-family: "Polaris";
    font-weight: 500;
    src: url(/code/fonts/Polaris-Book.woff) format("woff");
}
@font-face {
    font-family: "Polaris-Bold";
    font-weight: 700;
    src: url(/code/fonts/Polaris-Bold.woff) format("woff");
}
@font-face {
    font-family: "PolarisCondensed-Bold";
    font-weight: 700;
    src: url(/code/fonts/PolarisCondensed-Bold.woff) format("woff");
}
`;

And, also, note the path to fonts. It’s very important — one extra dot or slash and your font wouldn’t download.

A path to a font. Injecting a @font-face rule with Styled-Components

After you successfully tested your custom font, don’t forget to return a local rule to the @font-face rule.

Now let’s try to explain a few components, how they work.

Switch component

The component in action

I’ll pass things that we already know from the BaseComponent if you don’t mind :-)

Line 12–14. States. What is it and what is the difference? To me the main difference is that “props” should not be changed while “states” can be changed — Mutable.

Here are two articles with a good explanation:

Props and State in React Native explained in Simple English

uberVU/react-guide

So, in the Switch component we have only one state what we need to manage — Off or On. Like Props, in TypeScript, we also need to define a state type — on or off is a boolean type — and the the same property we have in props as we will use it in PropertyControls.

interface States {
    enabled: boolean;
}

Line 30–32. Setting up the initial state it can’t be a null object.

Line 34–38. This piece about updating state based on props. We are binding “enabled” prop with “enabled” state.

Update on Async Rendering - React Blog

componentWillReceiveProps(props: Props) {
    if (props.enabled !== this.props.enabled) {
        this.setState({ enabled: props.enabled });
    }
}

Line 40–44. handleClick function is a function where we will change the state. We will use this function with onClick event.

handleClick = () => {
    this.setState({
        enabled: !this.state.enabled
    });
};

Here !this.state.enabled is an easy way to reverse a boolean value from true to false and vice versa.

But where we change the style, colours and elements positions?

Line 46–59. Conditional CSS styles

<div onClick={this.handleClick}
    style={Object.assign({
         background: this.state.enabled 
                     ? this.props.tintColor
                     : "#DFE2E3"
         }, toggleCompStyle )}>
    <div style={Object.assign({
            left: this.state.enabled
                  ? this.props.width - 38 + "px"
                  : "6px",
                  boxShadow: "0 1px 5px 0 rgba(0,0,0,0.25)"
            }, toggleElStyle )}/>
</div>

What the heck is going on here? I think the picture will be better than a text:

Basically, we could change any property based on “enabled” state. And in order to make a smooth transition we need to add the CSS transition property, for instance:

const toggleCompStyle: React.CSSProperties = {
    width: "100%",
    height: "44px",
    borderRadius: "40px",
    position: "relative",
    transition: "all 0.2s" 
};

This is it. Our component is ready :-)

Tabs component

Another interesting component here. It’s much more complicated comparing to Switch component.

What we want to do here is:

1. Adjustable amount of tabs
2. Responsive
3. Place our own text (of course)
4. The Adjustable animating underline for each tab item

In this component we will use next external modules:

• React-DOM
• Styled-components

We will install them through VS code terminal (watch section “Installation and work with Styled-components” above).

The whole code:

Line 1–5. Import all required modules and variables;

Line 8–20. Here we define our future props:

• amount — items amount;
• lineWidth — the width of the underline;
• lineLeft — offset from the left side;
• item1 etc. — all items for the Tabs. I thought that five will be enough.

Line 19–21. Define states types. In this case we will have an object inside lineProps and this object will contain underline width and underline offset;

Line 20–53. We create styled components. The idea of styled components is to use styles as an integral part of a component. In this case, we could also make our component without styled-component, but it’s good to try it.

Note that in the component TabLine we are using props lineLeft and lineWidth, and we will update these values by lineProps state;

Line 57–67. Inside the component default props, nothing special here. For the first three items we have certain values, and for the rest, it is generic because we will show by default only three items;

Line 69–116. First control will be amount. It will have a number type. Minimum items on the Tabs is two and max is five.

First two items —item1 and item2 seem usual but for the rest, we are passing additional method . This function, “hidden”, allows us to hide a control base on boolean property condition — true or false. And we will hide each of these item controls if the amount control has less value than the position on the list of the specific item;

Code Components

Line 108–113. Define lineProps state;

Line 115–117. In order to get a DOM element in React we need to create a Ref attribute. This attribute we will apply to the parent Tabs element.

Refs and the DOM - React

Also, we create itemsArray. In this array we will store all our items from amount control.

And currentItem is a selected item by default. For us, it will be the first one;

Line 118–136. In order to get underline new width and offset, we need two methods.

First, getLineProps returns offset and width of the selected component as an objects. We will use this method after or before component will be mounted.We need this method for simultaneous update between the Framer preview and the canvas.

The second, updateCurrentTab we need are for the onClick event. Each time when a user clicks, we will capture the width and clicked item offset;

Line 139–150. Next part is dedicated to the component lifecycle.

componentWillReciveProps. For receiving new props from Framer controls before update. It’s our connection between controls and the component. We update component state through this method; any time when you change something by controls, this method will be called. Inside it, we clear our itemsArray on each update by controls and push new items inside it based on amount value.

componentWillMount.Occurs only once when component will mount :-) So we also need to push here items inside itemsArrray.

componentDidUpdate. In this phase we are checking previous state and current state of the underline, and if it was changed we are setting new props for the underline.

This is the order of work methods in console.

Line 170–190. The last part I will explain in the picture:

And done, our component is ready.

👉👉👉 Download these components 🎉🎉🎉

Feedback and Help

If you already have an invite and have a question about code how to make something in Framer X or notice a bug keep in mind Facebook group. Smart, kind and intelligent people are always ready to help you :-)

In conclusion

I really like Framer X. Not only because it’s new but because Framer X, for me, is personally much better than legacy Framer app and that’s why:

• Framer X does not have “code abomination” under the hood. If you create a div element it will be just one, your div. In legacy Framer, in will be a div wrapped in a div inside a div wrapped in another div, which was very harmful to performance.
• All new standards. Yeah, perhaps we don’t have cool CoffeeScript syntax, but we became much closer to modern development and can use all advantages from it (I hope the will keep this approach). yarn add <somepackage> yes, please.
• Opportunity to work with native HTML elements. If you need an input —no problemo, just create it as a usual HTML tag. In legacy Framer, oh boy, you have to install an external module for this.

Of course, someone could argue with it and say, “No! I want my old Framer, the animation was much easier here.” Yeah, it might be, but Framer always was about something more than a simple animation. Сhanges are good, it means that we think about the future.

Thank you 🙏

P.S don’t forget to clap-clap-clap 👏. Also, any improvements, bugs or suggestions you can leave in the comment section below 😉