Post

Get to Know Framer X: The React UI Creator

Draft updated on Invalid Date
Default avatar

By Emmanuel Yusufu

Get to Know Framer X: The React UI Creator

This tutorial is out of date and no longer maintained.

Introduction

In this post, we will explore Framer X, the new shiny design tool, and try to make sense of its benefits as well as its capabilities.

Prerequisites

This post assumes that you have basic knowledge of React.

What is Framer X?

Framer X is the latest and greatest version of Framer Studio, the prototyping tool.

Framer Studio when initially released gave designers the ability to create realistic app prototype designs and animate very advanced interactions than other design apps at the time.

Framer X, the newest version of Framer introduces the built-in use of React components to allow designers to get closer to super high-fidelity prototyping. Framer’s premise is that code can be used to hack together greater design prototypes.

Framer X also has all the expected static design tool features you need to draw everything from custom icons to intricate illustrations. You could finetune your designs with the advanced path editor, export anything from your canvas, and more.

Why use Framer X?

In most design tools, designs are mostly visual — a picture of a button, slider, or toggle. The big difference Framer X makes is that designs can now be made more interactive. Interactions such as scrolling, clicking, moving, and handling input are now possible, all thanks to React components.

Under the hood, Framer X is built on top of framer.js, an open-source library that does the work of converting React code to interactive designs. The React components that can produce these design interactions can be coded from scratch (by you) or downloaded from the in-app design store.

For developers, designs done in Framer can also easily translate to React Components. Props and all.

Framer X is packed with advanced features. Let’s highlight a few essential ones.

Frames

The Frame tool is used to create a responsive layout in your design. Frames come with preset layouts for popular devices you can select to begin your design. Frames adapt when you resize. They can also be surprisingly used to create UI elements such as buttons and shapes if it is desired for them to be responsive to their environment.

Frames are intuitive. Any frame placed on top of another is automatically indicated as a child of the base layer to create a clear hierarchy.

A Frame can be made by pressing F or from the plus icon on the left.

Stacks

Stacks in Framer X is an awesome layout tool that is useful for working with grids and lists. It works as an expression of Flexbox and CSS Grid technologies. It was made to automatically handle distribution and alignment in your designs.

A Stack can be made by pressing S and then by making a selection on top of all the items that need to be placed within.

Components

In Framer X, Components are reusable items that you can visually compose into larger app screen interfaces. There are two types of components you should be aware of:

  1. Design components: These are static design elements you can reuse in designing a user interface.
  2. Code components: These are also design elements you can reuse in designing a UI but they are built with React components and are interactive. Consider the interactive Youtube component demonstrated below.

Code components

Code components as we mentioned before are React components you build from scratch or install from the Framer X store that allow you to create interactive UI design components.

There is a properties panel on Framer X for changing the properties of selected design elements such as color, border-radius, and so on. When you create an interactive design component with React code, you can specify custom controls that will appear in the properties panel when that interactive component is clicked. To create a new component, you can navigate to the Components panel and click the New Component button located at the bottom.

Select Create from Code then click Create and Edit and you’ll be presented with a new .tsx file which is TypeScript. Using TypeScript with React can have many benefits. More on that here.

The .tsx file will present a simple hello world component via your code editor. It is highly recommended to have VS Code and Prettier installed for TypeScript auto-formatting and completion.

To open the full project folder container for this file, go to File > Open at the top of VS Code and click the folder named container. This is the project folder for the code you will write. The component you created can be found in a subfolder named code.

After creating a code component, its UI appears in the components panel and can be dragged to the canvas.

By default, the width and height of the component are passed to the code component through props.

import * as React from "react";export class Example extends React.Component {
    render() {
      return (
        <div>
          {this.props.width} x {this.props.height}
        </div>
      );
    }
  }

Because the code determines the contents of code components, you cannot directly edit code component contents on the canvas. But if you require your code component to display something from another element in your canvas (such as an image), you can accomplish it in 2 ways:

  • Using props.children:

You can set up your React component to make use of React’s props.children API which when used, makes the children of the components become settable by you.

 import * as React from "react";interface Props {
    width: number;
    height: number;
  }

  export class Example extends React.Component<Props> {
    render() {
      return (
        <div style={{width: this.props.width, height: this.props.height}}>
          <h1>Hello</h1>
          {this.props.children}
        </div>
      );
    }
  }

Framer detects you are using the props.children property in your render method and automatically adds a connector to each instance of the component on your canvas (a purple dot on the right side, like the scroll tool). You can drag a connection from this connector to any Frame on the canvas and it will use it as its children to render.

  • importing components by their name from the canvas

You can easily import any named design component into your code and make use of them there. For instance, if you have a component called Card:

import * as React from "react";
  import { Card } from "./canvas";export class Test extends React.Component {
    render() {
      return <Card title="Koen"/>;
    }
  }

Customizing the Properties panel

As earlier mentioned, you can set what settings show up on the properties panel of Framer X for modifying your interactive design component’s value. Remember that you cannot modify the contents of your components from FramerX but only from the code.

We can use propertyControls to allow customization of the user interface of your component, directly within our properties panel. We just need to add a static propertyControls method to your class with a descriptor.

import * as React from "react";
  import { PropertyControls, ControlType } from "framer";

  interface Props { text: string; }

  export class Example extends React.Component<props> {

    static defaultProps = { text: "Hello World!", };
    static propertyControls: PropertyControls = {
      text: { type: ControlType.String, title: "Text" },
    };

    render() {
      return <div>{this.props.text}</div>;
    }
  }

From Framer X, you can modify values such as:

  • Boolean
  • Number
  • String
  • Color
  • Image
  • File
  • Enum
  • SegmentedEnum
  • FusedNumber

I do not intend to rehash the documentation but how to go about this can be found in the documentation.

Conclusion

Framer X is a great tool to bridge the gap between designer and developer. Code components allow designers and developers to talk in a common language. Instead of creating a design and then having a developer translate it to code, a lot of the core work is already done thanks to Framer X.

Give it a shot!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Emmanuel Yusufu

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel