Working with bundled

Before we get started, we need to dissipate some haze about the way X works. A .framerx file is a zipped folder bundled as a binary.

When opened, Framer X unzips the file inside macOS’s AutoSave Information folder. On file close, Framer X zips the contents back into the file.

Adding components

We are going to take our component from lib, and wrap it in a new component as a bridge between our production code and Framer X. We need this wrapper to expose Property Controls (We’ll touch on these soon)

The build system we put together includes a sample Button component. We will use this component in this section.

Open -.framerx and create a new Code Component called Button. Framer X will open Button.tsx in Visual Studio Code.

Let’s remove the boilerplate code and add back what we need piece by piece.

We’ll start with the import declarations. We recommend alias import declarations { Button as _Button } this allows us to use the original component name as the name of the Framer X Code Component.

import * as React from "react";
import { Button as _Button } from "../lib"; // <- This is the bundled production code we inserted with yarn build.

Next, let’s define the component and its props. The props in the example below match the props defined in the component from the production folder we bundled with Webpack. Props change the content and visual style of the component, in this case size, type and title.

import * as React from "react";
import { Button as _Button } from "../lib";
enum SIZE_OPTIONS {
EXTRA_SMALL = "xs",
SMALL = "sm",
MEDIUM = "md",
LARGE = "lg"
}
// Define type of property
interface Props {
buttonType?:
| "default"
| "primary"
| "success"
| "warning"
| "danger"
| "toggle";
size: SIZE_OPTIONS;
title: string;
// Width and height of the component when loaded in the canvas
width: number;
height: number;
}
export class Button extends React.Component<Props> {
render() {
return <_Button {...this.props}>{this.props.title}</_Button>;
}
}

Now the component is in Framer X, but you’ll notice it renders a bit off. This is because we haven’t initialized any defaultProps. Let’s initialize some props to have a better default view of the component.

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { Button as _Button } from "../lib";
enum SIZE_OPTIONS {
EXTRA_SMALL = "xs",
SMALL = "sm",
MEDIUM = "md",
LARGE = "lg"
}
// Define type of property
interface Props {
buttonType?:
| "default"
| "primary"
| "success"
| "warning"
| "danger"
| "toggle";
size: SIZE_OPTIONS;
title: string;
// Width and height of the component when loaded in the canvas
width: number;
height: number;
}
export class Button extends React.Component<Props> {
// Set default properties
static defaultProps = {
title: "Button",
size: "md",
buttonType: "default",
width: 68,
height: 28
};
render() {
return <_Button {...this.props}>{this.props.title}</_Button>;
}
}

Voila! the production component is in Framer X! 🎉🎊

Exposing controls

Next, let’s add some Property Controls. Property Controls are one of the most powerful features of Framer X; they allow you to expose controls to interact with the props of your component. See Framer X docs for details.

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { Button as _Button } from "../lib";
enum SIZE_OPTIONS {
EXTRA_SMALL = "xs",
SMALL = "sm",
MEDIUM = "md",
LARGE = "lg"
}
// Define type of property
interface Props {
buttonType?:
| "default"
| "primary"
| "success"
| "warning"
| "danger"
| "toggle";
size: SIZE_OPTIONS;
title: string;
// Width and height of the component when loaded in the canvas
width: number;
height: number;
}
export class Button extends React.Component<Props> {
// Set default properties
static defaultProps = {
title: "Button",
size: "md",
buttonType: "default",
width: 68,
height: 28
};
// Items shown in property panel
static propertyControls: PropertyControls = {
title: { type: ControlType.String, title: "Title" },
buttonType: {
type: ControlType.Enum,
options: ["default", "primary", "success", "warning", "danger", "toggle"],
title: "Button Type"
},
size: {
type: ControlType.SegmentedEnum,
options: ["xs", "sm", "md", "lg"],
title: "Size"
}
};
render() {
return <_Button {...this.props}>{this.props.title}</_Button>;
}
}



Source link https://blog.prototypr.io/-design-system-components-from-production-into-framer-x-786e89be2250?source=rss—-eb297ea1161a—4

LEAVE A REPLY

Please enter your comment!
Please enter your name here