Creating the Message Box React Component in Framer X
Framer X is the new tool on the block for designers. It’s pretty powerful for creating static and interactive designs while even offering the ability to create fully functional prototypes. Oh, and let’s not forget it now allows you to create React components. But you knew all of this, because there has been non-stop talk about Framer X since they released it into beta.
Having built some React applications in the past, I wanted to brush up on my skills and design a React component for other designers to use. My goal was to create something simple that could be highly functional. I set out to design a message box that could be utilized to display alerts, be used for toasts or simply display generic messages. Message box allows you to include a title and message, control the radius, borders, and padding, while also customizing various states (i.e. default, info, success, warning and error.)
I couldn’t find much documentation on creating and publishing Framer X components, let alone best practices, but that’s to be expected with a beta product. Luckily I work with brilliant designers who helped me get a good start. (Thanks David and Ivan!) I wrote this post to share how I went about creating Message Box, to reflect on my experience, and possibly help out other designers who are getting started. You can view the GitHub Repo for Message Box here to follow along.
Creating the Component & Setting Up Structure
First, I needed to create the component and I did this by navigating to the Component tab, and selecting “New”. Then I gave it the title “Message Box” and selected “from Code”. This opened up the code editor with my Message Box JSX file. Framer’s documentation also outlines this process here. I then rearrange the structure of the code so it was easier for me to read. I’ll walk you through my order and explain what it does.
1. Including Frame from framer
Once I opened up the JSX file, I included Frame from framer.
import { PropertyControls, ControlType, Frame } from "framer";
In the return statement, I wrapped my div in <Frame></Frame> and included width, height and style attributes. This allows me to control the bounding frame around my component so it resizes properly.
// Styling for component
const style: React.CSSProperties = {
backgroundColor: "rgba(255,255,255,0)",
}return (
<Frame width={width} height={height} style={style}>
<div style={messageBoxStyle}>
<div style={titleStyle}>{title}</div>
<div style={messageStyle}>{message}</div>
</div>
</Frame>
)
You’ll also notice I included a style attribute. This removes a light blue background that appears as the frame background.
2. Define type of properties
Outside of my component class, I defined the type of properties my component expects. This is pure React and allows you to catch a lot of bugs through typechecking. Their documentation does a good job of explaining why you should do this here.
3. Set Default Properties
Default properties need to be included, otherwise the component won’t render. These default properties are used to style the component.
4. Items Show in Property Panel
Users will want to modify the components styling, and there are plenty of ways to customize Message Box! In order to do this, I needed to show these controls in the property panel in the Framer UI. However, I didn’t want to show all controls for each state, so I opted to hide the controls which were irrelevant. The documentation has a great section on exposing and hiding controls here.
5. Save props as variables
Using destructuring, I saved each prop as a variable from this.props. This allows me to use the props without having to create a ton of const variables or variables that begin with this.props.
6. Custom variables
I set up my own custom variables that I use for the background states and border colors. These are let variables, with the intention of having them update as users modify their properties.
7. Switch Statement
I set up a switch statement that would identify the current state (i.e. general, info, success, warning, error) and update the component respectively. The switch statement takes the new values from messageBoxBackground = stateDefaultBackground and messageBoxBorderColor = stateDefaultBorderColor and updates them.
8. CSS Styling
Styling the component was easy by using inline styling in React with React.CSSProperties. I gave the component, title and message their own style attributes so the user could modify it easily.
Publishing the Component
Once I felt that the component was in a good spot to share with the community, I had to figure out how to publish it. There doesn’t seem to be any documentation, so I hunted around the UI to figure out my way. These are the things I did to publish my Message Box component.
Add a Title
After navigating to the Store tab in Framer, I clicked on the “Publish” button. This allowed me to enter a title for me component.
Update Artwork
After I entered a title, I then clicked on the ‘Edit Artwork’ button. This opened up a Finder window on my mac, which took me to my component file. Here I was able to update my own artwork and icon.
Update Readme
Clicking on ‘Edit readme’ button opens up the readme.md file. I went ahead and included a small description of what this component does, it’s features, contact information and a log list that I can update as I continue to develop it.
Add Tags
Tags help to categorize your component and increases discoverability in the Framer store. In order to add tags, you need to edit the package.json file and include the following:
"keywords": [
"tag 1",
"tag 2"
] Closing Thoughts
It’s pretty easy to create a React component in Framer and publish it in the Framer store. Even if you don’t know React you can still create a design component, however I do think designers can benefit from learning JavaScript. There are plenty of courses online to get you started. My favorite is Codecademy Learn React 101 course.
I’m very excited to see the evolution of Framer X as they continue to make the tool more powerful and see how designers and engineers contribute to the Framer store and community. I hope this quick explanation on how I created Message Box has helped you get you started in creating your own Framer Components.
Don’t forget to download Message Box and check it out for yourself!
