13.05. FramerX - React Components in Framer X

13.05. FramerX - React Components in Framer X

(light chiming) (upbeat music)

Hi, my name is Meng and today I wanna show you
how to create React components in Framer X. What really sets Framer X apart is the ability to edit components in code, taking advantage of the power of React and building on top of the work of hundreds of thousands of JavaScript developers who have grown this platform. Now, developers in your team will be able to leverage the knowledge that they have of React to contribute and build on top of what you have designed in Framer X. You can even install NPM libraries like Styled Components for example. You can expose controls like custom overrides to customize them further, and I can't stress enough how vital and expansive this can be. You literally have a browser inside Framer. Now, what is React? Well, React is a component based JavaScript framework that lets you build user interfaces just the same way you would design in Sketch or Framer using components, nested components, but in Framer X you can take this to the next level. When you code for Framer X you're going to need to download Visual Studio Code, or your favorite code editor. The other thing that you need is the Yarn Package Manager which can be installed using Homebrew. So if you copy this, you go to brew.sh, and go to Terminal, paste this code, and it install. After a little while you can basically do the command brew install yarn, so brew install yarn. You can also install Yarn using Node. First of all, you need to download this for your Mac and then install it, and then in Terminal you can do NPM install-g yarn.

Now, I wanna point out that you don't need to install
Yarn if you are not going to install NPM libraries to your code components, but they are super useful, and you can do a lot more stuff. Okay, so let's create our first code component. We're gonna go to Components, click on New, select Code. Let's name it children, and I'll explain why later. Let's Create and Edit. This is going to your code editor, which is VS Code. I'm going to put this window right next to my Framer X window, like this. By the way, the way to do that is to do a three finger swipe up, or you can do a double tap with two fingers on your mouse. You can press Command B to enable or disable the left pane here. I'm also going to make this bigger.

And I'm going to open the folder.
So, the folder shall be the container right here. And this is your root folder for the entire Framer X project.

Like this.
So now, basically our component resides in this file called children.TSX. So, these are all the files that compose the project. We have also the node modules, which means that we can decide to install NPM libraries later. For now, I just wanna show you a little bit about the extensions that we are using. We're using the Material Design Theme. You can also use Framer Syntax color theme. We have the Prettier Code Formatter and then we have the VS Code Styled Components, so that whenever you would use Styled Components we're gonna have access to the same code highlighting as well as the ability to have auto-completion. To install these extensions, you have to search it. So, for example Material Theme. And then you click on install and you will click on reload and you do so for the other extensions as well, such as the Styled Component one. And then going back here we're gonna go back to our file, and if you want to install a new theme you do Shift Command and P, and type on color theme. Press Enter, then you'll find the color themes that you have installed, such as Framer Syntax, and Material Design. Material Design also comes with these really neat icons for your files, and it's really nice. The one that I'm using right now is called Material Theme Ocean. Okay, so that's your basic setup, and we don't need to do anything for now. I'll show how to install a library later, but for now, let's just focus on this very simple component and so let's apply that component somewhere.

Let's drag and drop right here, and resize that.

So this is your component.
The only thing that it allows you to do is just to change the text just like an override. So you can say design and it's gonna change. If we look at the code you see that we have the styling right here. For those who are familiar with CSS this is how you store CSS in a constant in React. Now, notice that the naming is slightly different only for the two words. So, we are not using dash, we're just using camel case instead. So, for one word it's just gonna be the same, but for two words it's gonna use camel case and this CSS is stored into a constant called style which is then applied to the HTML within render. So we have a div. The style is equal to the constant which is called style and then inside that we're using a props called text. For those who are not familiar with React props is for properties, and this is how you pass data within the application. If you look at the default props this is your text and this is the starting data that is set by default. So before we even apply the override here we had something that says hello world and then specific to Framer X we have what's called property controls. This allows you to expose the controls right here. So this one is called text. So we're exposing the control of type string which is a text and then we're giving it a name, a label right here that's called text. I can change this, for example, to title and if I save it's gonna change right here. So this is just for the label, which is right here, but then you have the value and the value is set for the props called text. So basically when the user is changing the value here it's passed to this prop and then it's passed down to the rendering of the HTML, which is the text. Just to give you an example, if I didn't want this to be dynamic I could just say, hey, and then it won't matter what value that I'm passing here. But if I want to make it dynamic I'm gonna use the props. And the same with the CSS. So I'm applying the style and let's say I wanna change the color to be white,

and I save, it's gonna change to white.
The same with the background. If I wanted the background to be black,

make sure to have double quotes.
And now the background is black. The other neat thing that I can do in Framer X is to have children. I know it sounds weird, but I'm gonna put the children right here. And then save. When I do that, I'm going to have this little dot and then let me zoom out a little bit. It works very similarly to the way that you connect links, scroll, or stacks. So I can decide to have children, for example, connecting this to an icon, and then automatically the icon will become part of the content of this component. Let me just make this screen a little bit bigger.

I'm going to connect this to the close icon.
Let's make this component 44 by 44. And then set at the distance of 30 from the right and then the top as well, and voila. I have my close button. I can even change the CSS if I want to. So for example I can decide to have border radius to 10 pixel.

And it's going to apply the border radius.
I can also decide to have no background. So delete this, save, and now my background is gone. Okay, so obviously we haven't really used the props here, and I could have done without the props the controls. I just did the children. But I'm gonna create another component which is definitely going to use those props and those controls. Let's start another one from scratch. Let's go to components and create a new one and then call it course.

And hen it's going to open right here.
It's called course.TSX and I'm going to drag,

let me resize this stack.
And then let me create a frame that surrounds the component, like this. Now, don't forget that when you make a frame everything inside that frame is gonna be inside the group. So the Home Button for example doesn't need to be here.

Let's make this 30 from the cards.
And then I'm going to change the background color to be the same as this one. So, Command C.

Zoom right here.
I'm going to add a title. Top Courses.

40 from the left, 30 from the top.
It's gonna be white.

Pro Display.
Bold. 24. Move this maybe 10 from the text. Okay, so let's deal with the component. Let's make it 180 by 180.

This time instead of using in line styling
I'm going to use Styled Components. In order to install that I'm going to click on Control tilde, so the button right next to the one, and then I'm going to type yarn add styled-components, and then Enter. This is going to install Styled Components to our Framer X project. Once that's done, I can close this and then go right on the third line put import styled from double quotes styled components and you can use auto-completion, by the way, and voila. So, this is how you install a new NPM library and that's super useful because there are so many good ones out there. For this style right here we can just delete it because we won't need it anymore. And here it doesn't find the style anymore. We're going to use Styled Components instead. So instead of the div we're going to set the name of the component. So it's gonna be course container.

And then just make sure to close that as well.
If your text is too long you can press on Option Z and this is going to wrap everything. One thing that I haven't mentioned before is that Framer X use TypeScript. Now, what is TypeScript? Well, basically this is very similar to the way you use Swift. It's type safe, meaning that whenever you use a variable somewhere it needs to know what kind of type that is. It can be a string. Is it a number? Is it an object? Is it something else? And because we are able to specify those things, then the program is able to tell us these errors in real time if it's missing. So, you've noticed that we're getting these red lines here which are really useful because it just means that this does not exist anywhere, right? When I had the style that had the red line it means that the style doesn't exist anymore and therefore it gives me that error and now I can act on that error. So back to the Styled Component. Instead of using divs and then class is equal to something something we're just gonna name the entire thing, the entire div, as a component name, and therefore it cannot clash with other class names, and we can isolate it within this component by doing constant course container is equal to style which is from the library.div, because we're using the type div as a HTML tag. So now we're using back ticks. Press the tilde keys twice like this and what the back ticks allows us to do is to put really rich code like HTML and CSS. In this case we're gonna use pure and simple CSS. So because we deleted the style that we had before we haven't saved it yet, as seen by this dot here. If you have not saved yet you're gonna see this dot, and if you save it you won't see it anymore and then it's gonna apply here. Therefore you can see that there is no style that has been applied to this component called course. So let's try to apply a background color. So background and then black. Save, and now we have a background color, and let's have a height of 100%. We should also have the color for the font to be white. Add a padding of 20 pixels. And let's make the font size to 18. Let's make the font family to Apple system. You can select the one that is suggested by the auto-completion. Now, let's not forget the semicolon at the end, and then save. Set the font weight to bold, and then the border radius to 10. Okay, so we have a really basic card and we would like to be able to have more overrides here. One of them could be the background color. What if I want this component to be customizable, also in term of the background color? First of all, let's add the property control. I'm going to add a bit of indentation because it's easier to read.

Let me make this a little bit wider,
and this time I'm going to have a new prop, but let's set it up here first. It's gonna be called color which is a string. A string is basically a text. And then here by default the color is gonna be black.

I can put comma at the end, and in the property controls
I can put color and then curly brackets type colon control type and then we have a bunch of property controls that we can use, such as Color, boolean, and so on. In this case, I'm gonna use Color, and by the way, make sure that you're using capitals because in programming it's always case sensitive. So I'm gonna use Color and comma the title colon double quotes Background Color. If you save this, you will see that the background color has the color which is clickable and selectable, like this with the opacity. Now, if I change the color you'll notice that it's not really applying to my component. We actually have to apply the prop to our styling right here. Right now it's hard coded to black and it always be black. So, here what I need to do is to pass the prop to my Styled Component. So to do so I'm going to add color is equal to and then curly brackets and then I'm going to pass this props color. So with this prop passed down as color I can apply it to my Styled Component. So let's do that. I'm gonna replace the black with dollar sign curly brackets props and then equal sign right bracket, so, an arrow, and we're gonna have to put props.color.

And if you save you'll see that the props color
has been applied to the component. So that's how you apply an override as a color to your code component and you can change your color and it's gonna apply. Now, I'm going to change the name to React for designers and now I wanna show you how to create a basic CSS transition like the hover. So, let's go here, and do and colon hover curly brackets.

So notice that this is very much like SaaS
where you can nest the CSS inside of the Styled Component. Let's do something like when it's on hover I'm going to get this color. But by default this is going to be black, and at 50% perhaps. So I'm gonna change the background to the color.

Let's test it.

Oh, see that it works.
We can even add a transition. So transition 0.8 second and save.

And now there's a nice transition.
Let's even do CSS transform. So, for example transform. We're going to use scale.

Make sure to have only one set of parentheses
and let's set it to 1.1 comma and then 1.1.

And now it also transitions using scale.
You can even add a second transform such as let's say translate on the Y position and it's gonna be minus five pixels.

So it moves up a little bit.
And the transition can use a cubic bezier and you can use one of the presets. The one that I like to use is 0.2, 0.8, 0.2, and one.

You'll see that the animation is much smoother.
It's faster at the beginning. All right, let's go back. Let's add drop shadows. So, we can do box-shadow zero and then 10 from the Y position 20 in term of lower using RGBA and then parentheses.

So, this is the RGB value plus the alpha.
So zero zero 0.25.

And this is going to apply this drop shadow.
I can even set it as a hover transition 2.5

and make it bigger, more spread out.
So 20 and 40.

So you can see it gives this really nice drop shadow.
The thing is what I'm showing you only applies for the web. This is a technique that is really good for the web but it's not really gonna work well for iOS. If you happen to have a website you can decide to change the option to have a cursor. So now we have a mouse cursor.

Let's go back.
I'm going to try to apply an image as a background instead of a color. So what I'm gonna do is to use the children technique because normally I would want to use the image as a prop, and use the control type image. But it hasn't worked for me, so I'm gonna use the children technique. Let me go right before this.props.texts. So curly brackets and make sure that it's in between the curly brackets. I'm gonna put this.props.children.

So when I save this I see this little dot here
that I can apply to any frame. Let me create a frame with exactly the same size. So 180 by 180.

And apply an image.
I'm going to choose cover react and apply that right here. So we do have a padding. That's because that's the content within these paddings but we can also apply this as a position absolute. In order to do that we need to set the position relative first

to the parent container.
And then within that we can apply a specification of a div inside this container because the children is definitely gonna use a div. The frame is a div. So this frame is going to have a position absolute and then top zero left zero, save, and let's apply the border radius as well. So border radius 10 pixels. So because this div is having a position absolute it's kind of like sitting on top of the text. So I need to make it so that I can select the text and make it use also position absolute. That's gonna be on top of this image div. So this props right here let's put a P around it.

So P and if you wanna make your code cleaner
you can always use indentation.

Like this, and like this.
So we have the children which is a frame and this is a div, and then we have the text which is wrapped inside a P tag. So make sure to open and close. Now, I can select this using the Styled Component and put the position absolute top zero left zero, save it, and we can see that it needs a bit of padding from the left. So left 20. Great, let's test if the transition still works, and it does. Now, let's just put it inside a stack.

And then we can duplicate this to have a second course.
Set the stack to have a padding of 20. And set the space to be from the start, and let's set the padding to 40 instead and the gap is gonna be 20. Now, notice that the drop shadow doesn't exceed this bounding box. So make sure to have the OverFlow to show instead. And now we need to apply an image and a different text right here. So let me create another image.

Change this one to let's say ARKit two.
On this second code component I'm gonna use this image instead and change the text to Learn ARKit two.

So that's it.
That's how you manage to create your own code component, create custom overrides for your component, and really bring the power of CSS and React and install NPM libraries to really make your component come alive. So I hope you enjoyed this lesson. In the next lesson I wanna show you how to create your own transition from one screen to another using overrides on a design component rather than have everything done inside of code component. We'll tap into the Framer X animation framework, how to use Spring, or how to use basic curves as well as linear animations. It's gonna be a lot of fun. I hope to teach you some more, thanks very much. (light chiming)


We're not around right now. But you can send us an email and we'll get back to you, asap.


©2021 RussellCoder

Log in with your credentials

Forgot your details?