Prototyping With Framer

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

Jason: Hello, everyone. And welcome to another episode of Learn With Jason. Today on the show, we have Amy Dutton. Thank you so much for being here today.

Amy: Yeah, thanks for having me. I really appreciate it.

Jason: I'm super excited to have you on the show. I'm super excited to do the work we're going to do. But before we talk about that, I want to talk about you. For people who aren't familiar with your work, could you give us a little background?

Amy: Yeah, sure. I'm a senior UI/UX designer and front-end developer at Zeal, a software consultancy in Southern Oregon. I've worked with them for about five years.

Jason: Nice. I didn't realize -- are you in southern Oregon?

Amy: No, it's a remote team. I'm actually in Nashville. Just moved here from Chicago.

Jason: You know, I've only been to Nashville once, but I had such a good time when I was there. I used to be a musician, so Nashville has a special place in my heart because everything is musical. I remember when I went there, I walked into a taco shop and saw one of the best bands I've ever seen opening the second stage of the taco shop. It was the weirdest thing.

Amy: That's awesome. That's awesome. Yeah, the live music is fantastic. I think whenever I'm traveling, my favorite part is coming into the Nashville airport. There's live music in the airport. I don't listen to tons of country, but just that country music coming into the airport feels like home.

Jason: Yeah, yeah. What a blast. Well, great. So today we're going to do something that's a little different for Learn With Jason, but I actually think it's really exciting and very relevant to what a lot of us are -- honestly, it's going to be something I think will help us out a lot, which is prototyping. Specifically, how we can use Framer for prototyping. So I guess the first question I would ask is when you're talking about prototyping, what do you kind of mean? What is prototyping for you?

Amy: Yeah, so I'll kind of talk a little about the design process. That might help explain how prototyping fits into that. And then the dev flow. Ultimately, when I'm working on a project, I might design something out in Figma or Sketch, tools you might be more familiar with on the design side. Then moving into Framer, that allows me to prototype it. So a lot of times when I'm presenting to, say, a client, it feels like a lot of smoke and mirrors. Like imagine this happening. Some clients, that's easy to do. Sometimes it's very hard to do. So the benefit with prototyping and with Framer is I can show them what that looks like without having to necessarily do development work. So it's almost cheap because they can get a feel for how that user experience is going to look before we actually spend dev dollars and dev time actually building something out.

Jason: Nice. Yeah, and that -- I really like that as a general approach, too. I think as an industry, we have a tendency to want to start everything by coding, and a lot of times, you know, what really demotivates me as a developer is when I have a good idea and I think it's a good idea, and I immediately start coding it. When I start coding it, I realize all the things I didn't consider. Then I realize I'm going to have to undo all my work. Now I'm demotivated and don't want to do it anymore. My idea dies. So prototyping is a way that we can avoid that a little bit. It gives us the ability to -- yeah, okay.

Amy: Or even from a developer standpoint, I know it's demotivating when you start on a story or a task, and then all the sudden the stakeholders come back like this isn't what I thought was going to happen. Can you rework this? You're like, I just spent all this time coding it, and now I'm going to have to refactor. A lot of times prototyping helps take that out because they're able to experience it. The cool part about Framer is you can actually put the app on your phone and interact within your phone as if it's a real app.

Jason: Oh, interesting. So let's talk about Framer specifically. Also, we're about to get drowned in boops here.

Amy: I love it.

Jason: So is Framer a -- I've heard it talked about as a no-code tool. I guess I have a few questions. So maybe the first one is when somebody -- (Laughter)

Amy: I love this.

Jason: Hello, chat. We just have to kind of get up to the top.

Amy: I feel like I should be swimming, yeah.

Jason: So when somebody talks about no code, can you talk a little bit about what that means?

Amy: Sure. And I think there's several different approaches to no code. So when I think no code, a lot of times I'm thinking, say, web flow, where you can create something without using code, but you can get a website up. In the case of web flow, you're dragging and dropping components. You're using an editor to style items. You're not having to pull up, say, VS Code and write out CSS and HTML and JavaScript and all those things. So Framer uses some of that, and they've kind of moved more into that no-code realm recently, but the cool part that kind of made me fall in love with it is I can actually write custom React components and interact with those within my design. So all the sudden it's not just no code, there's also code and design.

Jason: So I've heard that referred to as low code. What you're saying is you can use custom React when you have something specific that you want to try, but you don't have to. You can do most of it without code.

Amy: That's right.

Jason: Fascinating. Okay. So that's really exciting.

Amy: And we'll kind of get into this a little bit more, but I actually had a conversation with a guy from Spotify. This is kind of inspiring what we'll be working on later. But they actually have duplicated a majority of their code base, from what I understand, into Framer components. And they actually hook into the Spotify API when they're prototyping. So they're using a lot of the same elements and components that their developers are using but in design.

Jason: That's fascinating. I didn't even consider that you could hook into the API. So when they're prototyping, their prototypes -- they, like, work?

Amy: Yeah, and you can basically do that. From the conversations I've had with the Framer team, they're trying to close that gap even more. So I think that that's eventually on the horizon where you could maybe even -- they haven't said that exactly, but maybe you could deploy an app from Framer into, say, the iTunes store or whatever. Google Play.

Jason: Yeah. Sorry. Just clearing some nonsense from the chat. Okay. All right. So I think this is -- and maybe this is the best part to just kind of switch it on over and get a sense of what we're actually doing. So let's switch views here and head over to our paraprogramming view. First and foremost, everyone make sure that you go and follow Amy on Twitter. You can go check that out. So make sure you go give her a follow. Lots of good information there. You go by selfteachme. So do you do educational content on your own?

Amy: Yeah, trying to get more into that. I have a YouTube channel called Self Teach Me. I talk about design and development there. There's a lot of front-end stuff where we're building one-off components. I've been doing that a little over a year. I'm also collaborating with James and we're doing a podcast together called Compressed FM. That launched about a month ago.

Jason: Very cool. Where do we find that?

Amy: You can go to compressed.fm.

Jason: Okay. We'll make sure all of this shows up in the show notes. Drop links in here as well. Great. So also, while we're talking about cool things, keep in mind that you can always watch the show with live captions. We've got Rachel with us today helping us out. That is at the home page of learnwithjason.dev. Rachel is here from White Coat Captioning, and as always, they are helping make this show a little more accessible. The captions are made possible through the support of our sponsors. Netlify, Fauna, Auth0, and Hasura are all kicking in to make this show more accessible to more people. Means a lot to me. As you're checking out the captions, remember you can click on these to learn more about each of these generous sponsors. And today we're going to be working with Framer. So let me go to framer.com. Let's talk a little bit about -- oh, goodness. We've got subs all over the place. Thank you very much to spacegrip for the sub. Thank you for gifting five subs. What up? Welcome to the boop crew, y'all. You can now help Cassidy with her shenanigans. So Framer is promising, like, design how it works. I like that as a thought. That plays back to what you were saying about how you're not just giving someone a visual. You're giving someone an interaction. You're letting someone test out the way something works.

Amy: That's right.

Jason: This is really exciting. Okay.

Amy: And let me clarify for anybody that's heard of Framer. There's Framer Motion and Framer. The two are actually connected. I think you've had is it Matthew Perry who wrote Framer Motion, on your show before, talking about it. So that's like the open-source coding side of things. This is part of the engine underneath Framer that helps make all the interactions work.

Jason: Yeah, yeah. And if you want to watch that show, we have it on -- let's see. It would be here. Here it is. Framer Motion. You can watch that episode here and get a sense of how the animations work under the hood. Really, really cool stuff in this resource library. But, okay, so we have Framer here, framer.com. You can check that out. Then you, ahead of time, set up a project for us that you invited me to. So I'm in my Framer account now. I can see here that we've got a bunch of -- I've got tutorials and smart components. But today I'm relying on you, so I'm not going to look at any of the resources. I'm just going to scroll down to this project.

Amy: It really is an empty project. There's nothing there but a blank screen. So we're going to have fun.

Jason: All right. So I'm actually really excited because I've never done any of this before. I've been vaguely aware of Framer for a long time, but I've never had the chance to dig into it. So if I want to get started -- or maybe we should talk about what we're going to do first.

Amy: Yeah, so we're going to do a Spotify clone. So if you have Spotify on your phone, it should look similar to that. We're going to call it Boopify. You're welcome.

Jason: (Laughter)

Amy: Yeah, so we can do a whole bunch of stuff. We can just kind of start at the top and kind of work our way down. We're going to also be using Airtable's API to bring in some data.

Jason: Oh, interesting. Okay. Yeah, I love this. I'm not going to lie, I already feel like I underestimated Framer. Didn't even occur to me that APIs were an option.

Amy: Yeah.

Jason: I see that --

Amy: Sorry about the dog.

Jason: No worries. I see we've upset them by underestimating Framer.

Amy: Yes. Okay. So let's -- shoot. Actually, I'm going to let him out.

Jason: No worries. While she's doing that, I'm going to poke at some of the buttons. So let's see. We've got a layer. This looks familiar. It's very like Figma, Photoshop-y.

Amy: So we can start with design. But let's actually start with development. I think that's where majority of your audience is going to be coming from. The cool part is -- I don't know if you can see my cursor. That's the other cool thing. Here we go.

Jason: Wow!

Amy: Yeah, so you can see me in there too, so you can collaborate on stuff. I'm going to just hang out in the corner and let you drive. If you click on -- you don't have it in your view right now. If you go to -- let's see, I think it's under -- um, I'm trying to remember because I turned it on. You have to click on something in order to see their code tab.

Jason: Oh, okay. Let's see. View, show. Pixel grid. Let's see, tool.

Amy: You do have code down there. There you go. So if you go to code, it's right above preferences. Almost at the bottom. There's an option to always show code. So if you click on that, that'll create a code tab on the left side bar. So now we can just click on create a code file.

Jason: Okay.

Amy: So that's one way to go about doing it. If you have -- I don't know if you use Spotify or not, but at the top of their app, they have this good morning welcome message because it's in the morning. Here at the top. So we're going to create that in code, and we're going to change it so it'll say good morning, good afternoon, or good evening, depending on what time of the day it is. So let's just call this welcome message.

Jason: And you do it like a --

Amy: That's right. Actually, they usually use underscores. Then the second word is lower case. They use TypeScript. You can use as much or little TypeScript as you want. So if you do TSX.

Jason: Like that then?

Amy: Capital W.

Jason: Got it.

Amy: You're good.

Jason: Okay.

Amy: So it gives you some boilerplate code right off the bat. I'll talk through this just a little bit, give you an idea of what you're working with. You're importing React at the top. That looks normal. Then the second line, they have import frame, add property controls, control type from Framer. That's part of the Framer library. We'll talk a little bit more about that, but the cool part is you can -- when you create props, when you have your design component, you can actually override that within their Wizzy Wig tools. It's actually just props you're passing in. So we'll get into that a little bit. And let me actually throw this in here a little bit more. When I was doing this with a client project, we were on a very tight dev timeline, as most projects are. So one of the things that -- one of the benefits was we had it so I was creating React components and doing this front-end work and just hand it off to the developers. So with minimal refactoring, they were able to move a little faster.

Jason: Yeah, that's really slick it just kind of gives you just about everything. So with this frame, if I was going to take this out and move it somewhere else, I can just drop this into a div and it works?

Amy: Yeah, so Frame is essentially a div you can put properties on. It has a background size. There's a few attributes they have built in. But everything you do in Framer is wrapped inside a frame.

Jason: Okay, cool. So we've got some default props here. Property controls. Now, this is not a React thing. This is a Framer thing.

Amy: That's right.

Jason: And this is what gives us overrides?

Amy: That's right. So you were to refactor this to pull into a project, this is one of the pieces you would take out and refactor. This is really so you can use it within their UI.

Jason: Got it. Okay. Cool. So if we want to do this, then I want --

Amy: Let's start by taking out that -- usually I'll take out that center frame right there. Yep. And all the text that you pull in with Framer is centered by default, so we want to wrap it with a span. So if you start with a regular HTML span tag. Then let's pass in a prop called message, and that'll be -- or I guess not a prop, but a constant.

Jason: Like that?

Amy: Yes, yes. That's curly brackets. Let me show you how to do this the design way. Then I'll show you how to do it the dynamic way.

Jason: Okay.

Amy: So when you're destructuring, let's add message to that list. Perfect. Then if you scroll down to the bottom where we have our add property controls, let's add message to that list as well.

Jason: Okay. And that's going to be a type.

Amy: That's right.

Jason: Let's see. We've got our control type. And what are our options?

Amy: So this is the great thing about using TypeScript. If you go to their website and look at their API, you can look at the details. But we want a string. The title is just going to be the label that we have access to in the side bar. So you can add another item there. Perfect. And we can just call it message so it all matches.

Jason: Call it message. Got it. Okay.

Amy: Cool. So now if you click on your layers tab on the left, on your side bar --

Jason: Do I need to add a default or anything?

Amy: We can, yeah. Let's add one.

Jason: Okay.

Amy: So we'll say -- yep, message.

Jason: And good morning is what it says?

Amy: That's fine, yep.

Jason: Okay. So then I can go back to my layers.

Amy: That's right.

Jason: Do I need to hit save or anything on this?

Amy: No, it auto saves. Yep. So if you go to layers, now on left you'll see under components you have this component you created. It automatically appears. So you can just drag and drop that on the canvas. And it says good morning. Cool.

Jason: That's super cool. So now I can kind of set this up where it needs to be. It looks like I can resize things.

Amy: That's right.

Jason: Cool. All right.

Amy: So if you scroll down on the right panel where you have this kind of Wizzy Wig tools, you'll see there's a section for message. We hotwired that in. So you can change it and it will override.

Jason: Look at that. That is glorious. So yeah, we can go in and make changes. We've got -- how do you do, like -- I guess the size we didn't actually put in there. So we'd have to make that a prop if we wanted to configure it or anything.

Amy: Well, they have built in width and height. You can see that at the top. You can also -- a lot of times I'll go ahead and add in the dimensions for width and height if I know what they are, just so when I drop it in, it's already the size that I want the component to be.

Jason: And you would do that in the code?

Amy: That's right. I usually do that in the code.

Jason: Nice.

Amy: Scroll up where it has your defaults. You have a width right there. So that's what the default is going to be.

Jason: Nice. So we can set this -- I think it was 330. And this is just a message, so --

Amy: Probably 45 or something.

Jason: Okay. Let's call it 45.

Amy: While we're here, actually before you go back over, if you scroll up, you can -- oh, you don't have it here. You can add -- you can style just like you would within React by adding a style object.

Jason: Okay. So then we can do like a font size, and we'll make it, I don't know, like 24. That should be big enough. Then we can do a font weight of bold, and that's probably good enough for now.

Amy: Yep.

Jason: So when we come back out, hey, look at that. And if I drag a new one in, it'll be auto sized now?

Amy: Yes.

Jason: Look at it go.

Amy: Look at you.

Jason: Beautiful. And check that out. The overrides are individual. So each one has its own. That's really handy.

Amy: That's right.

Jason: So I'm going to get rid of this one that wasn't auto sized and bring in the one that is.

Amy: Cool. So that gives you an idea of how to do it with design or kind of no code, if you were handing it off to somebody that didn't know code. So you could have a developer come in and set up some of these components and then a designer that doesn't necessarily know code come in and modify and set up the overrides how they need to.

Jason: Yeah.

Amy: Okay. So let's make it more dynamic. So if you go back to the component itself, yep, in the code, and let's change this so we're no longer going to be passing in the prop, but let's set it to check for the time. Then based on the time, say good morning, good afternoon, or good evening.

Jason: Okay. So we need to get the time.

Amy: That's right. So this works just like normal React. Yep.

Jason: Okay. So to do that, do you want to use like a date object?

Amy: Yeah, just say new date. New date is great. Then maybe below that we can just say get hours on it. We won't worry about anything crazy.

Jason: Okay. So to get the hours --

Amy: You can just say const hours equals date.gethours. Let's wrap that in a number to cast it to a number. Make sure that we're getting the right thing.

Jason: Okay.

Amy: Perfect. Then let's just add -- let's see.

Jason: Or I guess it would be like a --

Amy: We can do that, or we can create a function called get message. Whichever way.

Jason: Yeah, let's do that. Get message, and we can pass in the hours, and we'll say if hours is -- is it 24-hour time?

Amy: Yes, yes.

Jason: So if it's less than -- let's see. When does it switch to afternoon? 12:00?

Amy: Yeah, or if it's less than 12:00, it would be 11:00, so less than 13.

Jason: Okay. Then else if hours is less than 18?

Amy: Yes, 18. That's before 5:00. You can just say return good afternoon. Then have our else say good evening.

Jason: Okay. So then instead of using this, we'll get message hours. Then we can drop this one out.

Amy: That's right. And you can get rid of the -- that's right.

Jason: Okay. All right. So let's see what time it is.

Amy: It should say good morning, just like the default. But that's working.

Jason: That's great. If we change this a little bit, we could split this out a little bit, and it should say good afternoon now.

Amy: That's right.

Jason: There it goes. Excellent. I mean, this is great. I love that this kind of just works and doesn't have a whole lot of magic Framer code. The vast majority of what we're doing here is writing JavaScript, and that feels -- yeah, that feels great.

Amy: Yeah, and I think that's the other thing that was appealing to me about this. I know React, and then jumping in didn't take a lot in terms of getting up to speed with Framer. Really, that section at the bottom where we created that custom type is really the only custom Framer code.

Jason: Yeah, because even this is React.

Amy: That's right.

Jason: Yeah, great. And can we get away with like defaults? Like if we destructured --

You hackers. You dirty hackers.

Jason: But so if we did something like this, like with the defaults like that, that works. They're not going to, like, fight us on that? We can kind of do it whatever way we want?

Amy: That's a good question. I'm not sure. We can try.

Jason: Yeah, let's try it with a different value here. So we're not really using that anymore. We can call it test and give it a test value. I'm going to stop destructuring props because we're not using it. And then we're going to also drop our test value in here. Let's see what happens. Oh, I should probably stop trying to do defaults down here. And we will instead have a test, and it'll have string. Then we can drop this. You know what I really liked about that is it just gave us the underlines showing it had invalid things. And let's see, my test value is not showing up. Is it not showing up because I did something wrong? No, let's see. Oh, it doesn't pick up those defaults.

Amy: Didn't like that, yeah.

Jason: So we do need to use the default props to get the values to come through, but that's okay. So we can put that back down here. Say welcome message, default props. Then test value.

Amy: Perfect.

Jason: Then we get a value. If I delete this, that still doesn't do it.

Amy: It overrides. Well, it did the override. I bet if you drag a new --

Jason: Oh, like it'll -- oh, I understand. Great, great, great. Then I just realized that I also deleted my default width and height when I did this. Oh, no. What have I done?

Amy: Perfect.

Jason: Okay. So now we should have -- if I bring one of these over, it's the right height and width. It's got these default values. Good. All right. We're all happy. I'm going to just go ahead and get rid of my test stuff so we don't lose it. Since we're not using the props at all now, I can drop those out. Get rid of this one and get rid of this one. Okay. Everybody is happy.

Amy: Cool. Okay. So if we're just ripping it off this Spotify app, let me show you another feature of Framer. There's a whole bunch of built-in components. If you don't want to code your own, you can just pull in existing components they have. There's an insert menu at the top with the plus button. Here you can just search for any component. So there's some that the Framer team has built that you can drop in, and there's also third-party components that you can drop in. So that's also a note. If you want to release your own components, you can create those and submit them.

Jason: Oh, cool.

Amy: So we're going to search for Feather. It's just an icon component set. You can hit return or click on the insert button to install it. And you can see it dropped that little home icon. You'll also notice it's in the component section on the left now, in addition to our coded component. So we can drag as many of those home buttons in as we want. Then we can also change the icon. So if you scroll down to where they have the props --

Jason: Oh, here, the name. Got it.

Amy: Yeah, so we can change the name. I think there's one for gear. It might be settings. Maybe it's settings. Yeah. So you have a gear icon. Then we can duplicate that. You can change the color if you want to do that.

Jason: Okay, yeah. Let's make it -- I don't know, let's choose like a dark purple. Get our contrast there.

Amy: That's right. Then you can also duplicate that and do one for the -- they have like a history button here for recently played. So I think the icon is called maybe rotate or circle.

Jason: Rotate. Let's see. We want counterclockwise, right?

Amy: That's right.

Jason: Okay.

Amy: So we got our two icons. If you click on the gear icon again and click on color, you can save that color to a color palette so you're not having to constantly go back and check it. You'll want to click on that plus button. That'll make it easy to grab.

Jason: Ooh, okay. Nice. So then when I go here --

Amy: That's right.

Jason: I can just choose my dark purple. Perfect. That's great.

Amy: Yep. Okay. Let's see. Let's create the next section. I'll show you how to set up the navigation in a minute once we get more screens. They have this grid at the top. Let me pull this up. They have a grid at the top of quick to find stuff. Then we also have a -- this is a horizontal scroll. Mine says essential news podcasts. I'm sure it'll say different things for different people. So the first thing, let's do this section at the top.

Jason: And is there a component that'll do that?

Amy: Not a drop-in one. We can go ahead and just create one ourselves.

Jason: Okay. Do we want to do that with code or not code?

Amy: Let's do it just with design first because I think that'll just kind of set up these elements. So if you create -- let me kind of talk through the top bar a little bit. That'll help give some context. So moving left to right, you have a screen. That's just if you have -- what this is, you have your dashboard. You can change the size of it. This one is iPhone 12 mini, but you can do a regular iPhone. You can also do a desktop if you want to prototype on a desktop. There's several different options there.

Jason: Mm-hmm, yeah. So we have all those options. Then we've got frames.

Amy: That's right. So these are just like divs, if you want to think about it in terms of code. So basically everything you do will be wrapped with a div. Then we have text. So the text is what you think it is. Then scroll is a scrollable area. So you can either be horizontal, vertical, or both. What you would essentially do, and we'll do it in a minute when we have our horizontal scrolling element, is you set it up in your screen and then connect it to content. So you would, say, have another frame you would connect it to.

Jason: Okay. So the first thing we want to do, is if I have this frame, I want to create our little element, like our card.

Amy: That's perfect.

Jason: So about like that. Then inside of this, I need to do a shape.

Amy: Well, we can go ahead and give it a background color. Or we can stick with the lying blue. Yeah, it's right there, fill.

Jason: So if I take my dark purple but I want to change it a little bit --

Amy: I think you'd have to go back to, yeah, choose custom. So right now, this is fine, but you're changing all of them.

Jason: Oh, cancel. So let's not do that.

Amy: So at the very bottom, it says choose custom. Click on that and then choose custom.

Jason: Okay. So that should give us a nice -- I guess we can make it even lighter since we're going to put text in it and stuff.

Amy: Yep, that's perfect. And let's drop an image in. So you want to create another frame.

Jason: Like inside of it.

Amy: That's right. Perfect. And then I think you can just -- under fill, you might be able to select an image to drop in.

Jason: Fill, image, drop image. Let's see if I have anything in here. I don't. Let's go to Unsplash and get -- this is always a good one. So we'll drop in here. Then I go to image, fill, drop image.

Amy: Perfect.

Jason: We want to fill. Oh, good, there's already an Unsplash button. That's so much easier than what I just did. We'll be able to do that for the rest of them.

Amy: Then you can grab a text element, which is at the top. And we can just type in our title.

Jason: Okay. And are these like album names? I forget what's up there.

Amy: It depends, I think, on what type of content it is. So I have -- in mine, I just have artists. Then I have like my daily mix.

Jason: Okay.

Amy: There's another one -- I think that's all that's in mine.

Jason: Okay. So we probably want this to be a little bit smaller. I forget exactly how this works.

Amy: Yeah, you're right. You're totally right.

Jason: Now that I have this, this is all --

Amy: So it's already in that frame, right. So let's give that frame a name, so you can double click on it, I think, to name it.

Jason: So we'll call this, like, top card. Like this?

Amy: Yes, that's right. Then we can also turn that into a component. So along the top, we have -- I think it says interaction, and then component. Yep. So you can click on component, and that will turn that item into a component.

Jason: Ooh, cool. Okay.

Amy: So let's talk about this view for a second before we go back. You can create a hover state, which this is a phone, so you don't really need. I guess you can do a press state. Then to the right is a variant. A variant would be if you wanted to modify it for any reason. So actually, when we get to the details screen, we'll create a follow button that will toggle on and off. So in that case, we'll use a toggle. I mean, the variant, to show the different toggle states.

Jason: And do I need to do --

Amy: We don't need to do anything here. Actually, we can rename these items. Scroll down on the right. It'll show you -- where was this? I was hunting for this a minute ago. Maybe if you double click on that item. I think I can -- oh, I know where it is. I think.

Jason: I think I just did it.

Amy: Yeah, perfect. So you can name each of these elements that you're working with, and this gives it a label in the side bar.

Jason: Okay. I don't feel like these are correct, but we're going to go with it.

Amy: Yeah, you're good. So if you click on page -- yeah, right there -- it has breadcrumbs in the top area of your canvas. So now if you scroll down on the right, you'll see on your right-side bar, there's that top card and has those items we set up. So you can override each of those. Yep, drag another one on there and just change the content on the right side.

Jason: Okay. So daily mix. I'll have to fix that. We can go Unsplash and -- oh, that's so good. If I click into this --

Amy: If you want to edit it, yeah, just double click. There's a new feature they actually released this week called Grow. It's right where your cursor is. We want it to grow vertically.

Jason: Okay.

Amy: That should work if we go back.

Jason: Hey! Look at that. Beauty. Okay. So then we can take these and pull them down.

Amy: That's right.

Jason: And let's see. We'll go to this one. What are some other ones we want here?

Amy: Let's do podcasts for one.

Jason: Podcasts, okay. Okay. And we can pick a couple more of these. Then for this one -- beautiful. Okay. Not perfect, but it'll do.

Amy: Yeah. And I think if you resize it, it'll automatically fill the way that it's supposed to.

Jason: Like resize the card?

Amy: Yeah, I think so. We might have -- yeah, I think we have it set to fixed width. So you'd have to set that within the -- yeah. You can actually expand this particular frame.

Jason: Oh, is it like relative? Or does that --

Amy: Yeah, you could do relative. I think that might work. I'm not sure.

Jason: Let's see what happens if I click that button.

Jason: It kind of worked. Yeah, that mostly worked. Not exactly what we were looking for.

Amy: We had it set to 30%. So if we increased the percentage that it was.

Jason: Oh, I got it. Okay. So let's maybe do -- maybe we can just make this -- wait, why can't I make that bigger? There we go. So we'll make this a little wider. Make this a little wider. Then I think we can keep that fixed, and that should solve the problem. Yeah, okay. So then we can take this whole thing -- no problems are made. We are done. Okay. So, you know, that's -- whoops, whoa. What have I done? Not that. Let's go here. Make these match a little bit.

Amy: Perfect.

Jason: Okay. I feel okay with that. We're looking app-like.

Amy: That's right. Okay, let's -- oh, yeah, you can straighten those. There are alignment tools on the right side. If you select those guys --

Jason: Oooh.

Amy: So it automatically aligns.

Jason: Beautiful. That's exactly what we want there. Good.

Amy: Okay. So let's add this next one that has horizontal scrolling. This one we're going to actually use the data component and hook into Airtable's API.

Jason: Okay. So I need to go to code then, right?

Amy: Actually, we can do all this with no code.

Jason: Ooh, okay.

Amy: Getting crazy.

Jason: So you said the data?

Amy: Yes, and it's that top one. Data component. So we want to install that.

Jason: Okay. Come on.

Amy: It's thinking about it. There we go.

Jason: Data component. So I'm going to drag one of these out here.

Amy: There's a few things on this card it'll tell you to do.

Jason: Okay. Let me make this smaller so I can see what's going on. Using the connector on the canvas or the properties panel, connect your smart component. For every row in your data, this component will be rendered. Okay. So that's over here.

Amy: That's right. Or you have these -- if you look as part of that frame, you get these little noodles that come out of that. If you click and drag, yep.

Jason: I love that these are called noodles.

Amy: Well, I just made that up. I don't know if that's an official term.

Jason: I mean, it's cannon now on this show. We will never not call these noodles. Okay. So that's fun. But we don't have -- like, how would --

Amy: We don't have anything yet.

Jason: Yeah, how would we do that? Or I guess I should ask you what is the right way to connect?

Amy: So there's two other things here. I think it might be easier if we just do the two other things first. They'll require the least amount of work. The second one is to connect a loading state. The third is to connect an empty state. So if you go to the top and grab a new frame, you can create that loading state first.

Jason: Okay. So I've got a new frame. Do I just drag this wherever?

Amy: That's right. Perfect. We can resize it, and we can add -- yes. That's perfect. So if we just add loading, or if you wanted to do a spinner, I'm sure you could drop something in. There's also a component for a loading animation you could drop in.

Jason: Yeah, to make sure we don't run out of time, I'm not going to design this much.

Amy: Yeah, you're good.

Jason: Okay. So I've got this. Now, if I use a noodle to connect this, does it ask me what I want to connect it as?

Amy: That's right. So that will pop up, and we want loading state.

Jason: Oh, wow! Okay. So I'm going to get another frame. And I'm going to drop this in here, and we're going to say this one will have some text that'll say --

Amy: Can't find. None found. Because this is the empty state.

Jason: Okay. Then we'll just make this all fit the way that we want it to. So centered, centered. I'm going to click this thing again. Let's get another noodle. Empty state.

Amy: And the cool thing about this component is if you scroll back over, it checked off the things we've already done.

Jason: Oh, cool. That's helpful.

Amy: And it's just that particular one because it's a third-party component. So let's create that piece that's going to duplicate. So we want to have another frame. So you kind of get the idea. A lot of these pieces start with frames. Then we want to drop another frame in for our image.

Jason: Okay. And these are kind of squarish, right?

Amy: Yeah, and they'll be a little smaller because you'll be able to fit three or four across.

Jason: Okay. So let's do like 100 by 100 as our size. Or actually, we need like a square album and a name under it?

Amy: That's right, that's right.

Jason: So let's maybe do like 130. So I'll put a frame inside.

Amy: Grab an Unsplash picture.

Jason: Okay. Fill, go to image. And we're going to use Unsplash. And let's get -- sure, tequila. This is going to be party music.

Amy: Perfect.

Jason: Then for our text here, we can do -- is it just one line of text?

Amy: It is just -- yeah. So it's going to be the artist name or the album name or whatever. Yeah, that's perfect.

Jason: Okay. And is that everything that we need for this?

Amy: Mm-hmm. That's right. So let's go ahead and change the names of everything.

Jason: Okay.

Amy: I'm going to give you specific -- actually, let me send you this really quick. This is for Airtable. That way you can see. Grab the link for this, copy. And I'll send this to you on Twitter.

Jason: Okay.

Amy: There you go.

Jason: Okay, grab it here. There it is. Okay. So I have -- copy link. I have the link.

Amy: Perfect.

Jason: Oh, that's a Twitter link. Hold on one second.

Amy: Oh, did I hand you the wrong thing?

Jason: No, no, just the Twitter shortener did the thing. So here's our Airtable.

Amy: Perfect. So a few of my favorite podcasts. But you can see these columns are name, cover, and type. So this is what we'd be pulling in. So we want the names of our props to match these column names.

Jason: Ah, okay. Okay. So when I come back over here, I want -- so I need to make this into a component first, right?

Amy: That's right. That's right.

Jason: So we will call this, um, cover card or something.

Amy: That's right.

Jason: Then I want to rename this to be a name. This is going to be cover.

Amy: That's right.

Jason: Do we need something for the type?

Amy: We can add it if you want to add a second line, but we can just -- or we can skip that part. It doesn't matter. It operates the exact same way.

Jason: Okay. Yeah, we can skip it. That's okay. Then do I add a noodle at this point?

Amy: That's right.

Jason: Okay. Let's add a noodle.

Amy: And it will say we want this to be our list item.

Jason: Okay. Perfect.

Amy: So it's pulling those in, but we don't have -- yeah, we haven't hooked it up to an API yet. So here we have this data source, and you can connect it to different things. You'll see right now it's set to API. You can also do a file. We're going to pick Airtable. The URL is just that API key. I can show you where you would go to grab it, but then I'll send you the actual thing.

Jason: Sorry, which thing am I grabbing? Just this one?

Amy: Well, we have to pass in the API key as well. So I was just going to pass you what that should be in order to work. But I was going to show for anybody that's watching and curious where to grab that URL, where they would need to go. I just searched Airtable API, and it came up with this page of all my bases. Then it just said -- yeah, that's exactly what I clicked on. Since I have bases actually on this page, it listed all of them out. So I just clicked on the appropriate one, and it gave me the URL that I needed to grab.

Jason: Okay. So let me do Airtable API again. Then we should get to the right place. So here's a list of all my things.

Amy: That's right.

Jason: I'm not sure if I have any -- oh, here. Thanksgiving. These are just recipes. So once we're in here, then you've got this show API key.

Amy: That's right. And it also -- if you scroll down, you'll get to some code on the right side. Oh, there you go. It'll say, like, there's the URL. The second example, it has that whole long URL, and then it says API key. So you plug in your API key there.

Jason: Got it. Okay.

Amy: Actually, you know what, I have access to this because I can collaborate. So I can just plug in the URL.

Jason: Perfect. That way we won't see your API key on here. So let me get out of -- I guess I won't be able to see it.

Amy: I'll delete it once this is over. But as soon as I hit --

Jason: Hey, look at that!

Amy: Yeah, so it automatically plugged everything in.

Jason: I mean, that's like so much easier. I'm not going to lie, I thought this was going to be harder. I was like, got to optimize for time. We're going to run out of time. Okay. So then if I take these and just make these all about the same size and make this about the same size, then we know that we've got all of these ready to rock.

Amy: So right now this is set to scroll vertically. We can set that to scroll horizontally. If you scroll down on the side bar, there's a few options here.

Jason: Scrollable.

Amy: Yep, we can keep that as true. There should be an option -- yeah, layout, kind of towards the top. Right now it's set to -- you have to scroll up a little bit. Right there. Perfect.

Jason: Oh, cool. Okay. So then I can make this -- let's make this one 130 pixels tall. And look at that. Okay.

Amy: You can also set up padding in here, too, which is pretty cool. So on the right, you can set the spacing in between each of those items. So you can make that actually flush with the whole width of it and just update the padding so that it's not --

Jason: Oh, I understand. Okay.

Amy: Yeah, so if you scroll down, there's one right there for padding. There's also one for gap. So you can even set the gap in between each of those items.

Jason: Okay. So let's do a gap. Nice. Then we can add a little bit of padding. Probably a little less on the gap. So you can see there's more to do.

Amy: So let's preview this. You can either click on the play button at the top, is one way to get there. So we have our phone. Now you can scrub -- yep.

Jason: How cool is that? We just got that working. I mean, I feel like this is one of those things that it gets -- it's easy to say, like, it'll take me longer to mock this up than it would to code it. There's zero chance that's true with what we've just done.

Amy: That's so true. And if you think about it, if you are a designer on Spotify's team, the fact that you're actually working with live data. So it's not trying to patch stuff in. You can see exactly what it would look like.

Jason: And I just shared -- I copied this link and just shared it. I think y'all should be able to now try this. Like, you should be able to see our prototype. It doesn't do anything yet, but it's pretty cool that you can see this and scroll it.

Amy: And actually, if you go up to the top and click on mobile, it's kind of the box. That's the QR code you can just hold up with your phone and scan.

Jason: Okay. Hold on. I'm going to do --

Amy: Let me double check. You might have to have the Framer app on your phone.

Jason: Open in Safari. Let's see what just happened. It wants me to log in. I think it's going to make me use the app. Okay. I'm going to have to do my password and stuff. I'm not going to do that on my phone. But yeah, this is really slick, that that just works. So then we can put it on different devices. So had I done a mock-up on other dices, we would have been able to see that.

Amy: That's right. And you can change how it's displayed. If you don't want the frame of the phone to be there, you can change how that looks.

Jason: Oh, that's cool. That's very cool. Okay. And you've got settings.

Amy: If you wanted a hand in there, you could add that.

Jason: Nice. I love it. That's really funny. Okay. I like that. So then we can close this back up and come back in here. And we've got our mock-up. I really am kind of blown away by how fast this happened.

Amy: Yeah, it's awesome, right? Let's add another page so you can kind of get a feel for interactivity. So we want to go to screen at the top. It should just automatically -- oh, yeah, we want mini -- iPhone 12 mini.

Jason: Okay. Then I can put that down here.

Amy: Yep, wherever you want. And for this one, let's add, say, an album cover. So we just want a square. Perfect. You can drop it in.

Jason: I guess I can pull it down a little bit so the notch doesn't get us. Then we're going to do an image. Are you wanting to hook this up to like the --

Amy: We could, but let's -- I'll just keep it simple.

Jason: Okay.

Amy: So we can just grab an Unsplash image for this. The big thing is I just want to show navigation. Then I'll show you with the variant how to get that toggle button working.

Jason: Got it, okay. So we have our album cover. Did you want some text or something?

Amy: Sure.

Jason: And we can make this bigger. Let's make it, I don't know, 36. That seems good. All right. We're happy.

Amy: Cool. While we're here, let's create our follow button with our variant. So if you grab another frame at the top and drop it on that screen. Perfect. So let's add -- let's take away the background. So if you go over to the right, take off the tint -- or yeah, the fill. We want to add a border. So that's right below it.

Jason: Okay.

Amy: Just make that whatever color.

Jason: These?

Amy: Those are if you want to add --

Jason: Oh, individual ones. I get it. Great. Oh, and you can set a radius. So we'll make it very Spotify-y by rounding it.

Amy: Perfect. And let's add some text inside it.

Jason: Okay.

Amy: You can center that.

Jason: Everybody want to watch me try to vertically center text by eye? Close enough.

Amy: Awesome. Then if you grab the frame for that big button --

Jason: Make it a component, right?

Amy: That's right. And that should shoot us into the component view.

Jason: Okay.

Amy: And then -- yep. You want to click on the right side for a variant. Duplicate it. So now you can just select the frame and change -- maybe give it a background color so it's inverted.

Jason: Okay. We can use our dark purple. Then we'll set this to be white.

Amy: You can just type the text to say following since you're toggling it on or off.

Jason: Oh, wait. Yes. Oops.

Amy: Not sure if that'll change -- that changed the first one too.

Jason: No! Okay. So let me try that again.

Amy: Maybe if you click on the variant in the left, where it says variant two. You could go in and name all these. Up a little on the left. Right there. Now you should be able to change it, I think, in the side bar. Once you have your components.

Jason: Side bar.

Amy: Sorry, if you click variant two.

Jason: Oh, I have to click on -- oh, I got it, I got it.

Amy: Did it give you that as an option?

Jason: Do we have to add it first?

Amy: You should -- let's see. I think you do it right there within the variant screen.

Jason: Title is follow. Right? So that should be there. Then I've got variant two.

Amy: Let me see if this will -- nope. Where is that? Button text. That's right. Oh, I know what it is. Sorry. If you select that and then in the right sidebar, scroll down to where those props were. Then I think if you clear that out. So it says button text in purple, where it says content. Button text. If you click X, then it's no longer connected as a prop.

Jason: Oh, I got it, I got it. Perfect.

Amy: Yep, perfect. So then you can click on page one in your breadcrumbs. That'll take you out of that. Oh, I messed up. Sorry. Double click on the follow button again to go back into that component view. You want to grab that little lightning bolt to create a noodle. You want to drag it over. Yep. So we want to say on tap that it'll go to that next screen. Or the next button.

Jason: Okay. Then do we want to do the same thing the other way?

Amy: That's right.

Jason: Does it do that automatically?

Amy: What do you mean?

Jason: Sorry, I saw like -- it looked like it was routing to itself, but I think it --

Amy: Oh, right. You just would drag it. So there's two ways to get to that interaction screen. You can either grab it from that lightning bolt, or if you have a frame connected, at the very top of the right-side panel, there's an interaction menu and you can choose a bunch of different stuff.

Jason: Oh, I got it. Okay, okay. All right.

Amy: So if you click on -- see if you can click on that frame, the screen, sorry. And then there's a play button there. You can click on that, and it'll launch us into that preview. And you should be able to click to toggle.

Jason: Nice. Okay. That's really -- it Tevin looks nice.

Amy: Yeah, they have a little animation in there by default.

Jason: Yeah, okay. So that's great. Then if I want to hook these up, I'm going to take a guess -- oh, wait. Here's a question. Do I connect this one as like the on tap?

Amy: For this particular component, you were right the first time. So we're just going to grab the entire thing, yep, and grab the noodle. Yep. And say when you tap, we want it to be instant. And you can set it to push. So there's several different things built in. I can talk about them really quick. So magic is really cool. If you have the same element on both screens, it'll automatically animate. So you could set it -- eventually if you had, say, the album in the list and you wanted to move it so it grows, you just say magic and it would automatically recognize that if it has the same name and animate between the two.

Jason: That's cool. And then push is like the phone kind of page thing?

Amy: That's right. And those are really the main ones that I use.

Jason: Okay. Let's try this so we can see it happen.

Amy: So the push one, you have the option to change which direction it's going. So with this one, it's -- yeah, that's the correct one.

Jason: Okay. So let's try that. Then if I come out here -- so I'll just play. Then I click any of these.

Amy: That's right. It goes over. So we just want to add a back button to be able to get back. But you do the exact same thing.

Jason: Okay. So then here I come in, and I can get a feather.

Amy: That's right.

Jason: And we'll set this to probably like arrow back or something.

Amy: Yeah, there's a chevron left.

Jason: Chevron left. Perfect. And then we'll make the color on that our dark purple. We'll get the text and say go back. Need to make that -- nope. Need to make that dark purple as well. Let's make that text a lot smaller. Okay, maybe not that small. So now if we take this, we have to turn this into a component.

Amy: Right. That's right. You want to grab the whole thing. So, yep, I think that'll work.

Jason: Do the thing. Let's go back button. It did. Hooray.

Amy: You're on top of it. So we go back to page one. You should get a noodle.

Jason: Interaction. Here. Then we would push the other way.

Amy: That's right.

Jason: Okay. So let's try that again. We go back, we go forward. We go back. I love it. I mean, how cool is it that we're able to put this together this quickly? You know, I feel like that's a really strong kind of -- it shows the value of this type of rapid prototyping because a lot of times I feel like something that I've noticed is that a lot of times when we're developing, we think about particular states. We think about how do we get this thing on screen, but then when we start developing, we realize we had to move from like point A to point B to point C, and no one ever considered what point B was. So showing these interactions and actually having to move through the app, we might realize, okay, I clicked this. Oh, wait, I don't have any way to go back. You know, we just realize, oh, crap, we have to add a go back button. As soon as we realize that, now we go, oh, well, we actually have to design that. We need to figure out what that looks like because we didn't really consider what that would do.

Amy: That's right. And all that stuff comes out in the interactivity when you're manipulating it, versus with Figma, having this static art board. I know Figma has created some prototyping tools, but they're not like this where you can create code and design.

Jason: Yeah, I mean, I know we've talked about it a bunch, but the fact that we can pull in live data here -- and you know, if we change this Airtable, it'll just update here. That is so dang cool. And I can just -- I mean, I'm already kind of spinning on like all the ways that I could use this to unblock our design team, to unblock our dev team, to make sure that if somebody's got an idea, we don't have to spend weeks prototyping it. We can spend a day prototyping it. And really get through those interactions. That's just -- so many cool things we can do.

Amy: And like I said, if you are trying to hand it off to a dev team, you can even hand off those React components. So they're further down the road than trying to code these front-end elements from scratch.

Jason: Yeah. Question in the chat. Is this compatible with React Native?

Amy: That's a good question. Honestly, I've not done the conversion myself. I've just handed it off to another developer.

Jason: Let's check. Can I make real apps? Well, that seems a little dismissive. (Laughter) But, let's see. React project -- I don't know. The answer is I don't know.

Amy: Yeah.

Jason: I'm seeing a comment in the chat that says no.

Amy: Okay.

Jason: Okay, so we have a very cool, like -- we've got a prototype. That prototype is pulling in real data. We have the ability to, you know, simulate scrolling, interactions. We've got these different states. We can show whether or not we're following or not following somebody. Is there anything else you wanted to make sure we cover today?

Amy: Yeah, I'd just highlight a few things in the components that you can pull in. If you look at the insert menu, there's options there for, say, a bottom sheet.

Jason: Bottom sheet.

Amy: Yes. So this is -- you've probably seen it like with Google Maps, where if you click on something, that window will fly up and you can kind of drag it wherever you want the placement to be and get it to hide. So there's tons of things here. The one that really blew me away that is not related to our Spotify app is there's one for a camera where you can even interact with the camera in your prototype.

Jason: What?

Amy: Yeah. So if you do that, it'll even trigger like your web cam, or if you're on your phone, it'll trigger your camera on your phone and kind of interact with it as if you pulled that up within the app.

Jason: That's extremely cool. I see some Mapbox stuff here. More camera things. This is really, really cool. More questions in the chat. Dom, when you're asking about the code, are you asking if you can just like see it right now? So this is the welcome message that we coded up. When we want to see the code for one of these other ones, are those --

Amy: There is a hand-off. I don't think it tells you everything that's in that particular component, but there is a hand-off view. Let me see if I can find it really quick.

Jason: Code.

Amy: It says if you're on the viewer of a project, the right panel of the Framer interface will display an export handoff panel. So that just shows you the props, I think. It doesn't tell you everything, but it does kind of give you at least a small look.

Jason: It looks like I can actually export using the desktop app here. So this is -- yeah, this is pretty slick that we can see, you know, those basic pieces. And Ashish in the chat is saying you can export the entire project, and it'll work like a normal React project. So if we do that, then we could -- let's see.

Amy: And I actually have done that from the desktop app. I've exported it as HTML, then I could just stick on Dropbox and hand off to somebody.

Jason: Nice, nice. That's really cool. I mean, this is really handy stuff. I've seen the videos, right, I've seen the Framer promo videos. They always look amazing. It's the kind of thing you look at and go, nah, that's too good to be true. But seeing it in action, it's like, well, okay, I can actually see this making its way into my daily workflow and becoming a part of the way we do projects.

Amy: Yeah.

Jason: So where would you recommend somebody goes if they want to dig into more of this? Like are there good resources for somebody who wants to give this a try?

Amy: Yeah, so the Framer site is great. It has some fantastic documentation. There's even a -- you can link this up. I think a document for if you're a designer and just trying to learn React, there's a guide on there that explains React for designers, how to get started. Framer also has their own stream on YouTube that's pretty good. They'll talk through different projects. I'm part of the Framer Discord.

Jason: Framer Discord. Here's the community. So there's a link there if you want to get into it. You said they're on YouTube as well?

Amy: That's right. And I also just want to shout out to their support team or just their team in general. They have been so incredibly responsive -- (Loud music)

Jason: Oh, my goodness! All right. Getting right into it.

Amy: They've been so incredibly responsive and helpful. Like any time I've posted anything on Twitter, I've gone back and forth with some of their development team, talked to the founder. Just really, really great people.

Jason: Yeah, yeah. I mean, that's always such a good thing to hear. I feel like when you get a chance to work with a company and the tool is good and also the people building the tool seem to genuinely care and they're really putting the effort in, you feel that in their support. That's one of my favorite things. Like, I'm always going to pull for the company that seems like they are genuinely invested in the success of their community.

Amy: Yes. 100%.

Jason: Versus trying to do their thing and see how much money they can extract from the community. Yeah, that's really, really cool. Follow-up question is around React. Is Framer React only?

Amy: As far as I know, yes.

Jason: Okay. Cool.

Amy: The older versions of it used Coffee Script. But the new version is all on React.

Jason: Yeah, and I mean, like, this is one of those things. You make these trade-offs. If you're prescriptive, you can be really creative because you control variables. If you try to be general purpose, then you leave a lot of that creativity in the hands of the people building the thing. So I think that's a discussion to have with your team. Are you willing to make those trade-offs? Does this add enough productivity that it's worth adopting react and accepting those guidelines? What kind of project would you say this is recommended for? Like is it for building web apps only? Would you use it for building something else? Would you use it for only prototypes and throw that away so that you could then like write the code in whatever language? What's your general kind of take on this?

Amy: Yeah, I think definitely prototypes. Any time -- I don't know. To me, the biggest benefit with prototyping is always communication and trying to explain something. A lot of times, especially with design, it's easier to communicate when you have something to show somebody than just asking them to envision or imagine. So this is great for showing somebody exactly what you have in mind so that they can experiment with it. I think it would work great for whether that's a desktop app or a mobile app. I don't think it really matters.

Jason: Yeah, yeah. Well, I mean, I'm very excited about this. Chat, what other questions do you have? Fire them off. While you're doing that, I'm going to just start throwing links at you to go and follow Amy. So make sure you go check out Amy on Twitter. Make sure you check out Amy on YouTube. You have compressed.fm, a new podcast with James Q Quick.

Amy: That's right.

Jason: Anywhere else you want people to go to follow you?

Amy: That's perfect.

Jason: Excellent.

Amy: Those three things. And feel free to reach out to me on Twitter, especially if you start messing with Framer and have questions. I'm happy to help.

Jason: Yeah, absolutely. Use Twitter. Twitter is such a good -- it's such a good resource for genuinely connecting with people. That's where you and I met. That's where I met the vast majority of the people who have come on and taught on Learn With Jason. It's been a huge networking resource for me. It's honestly responsible for probably a frightening portion of my career. (Laughter) But yeah, I mean, this has been great. And just to do a quick recap, before we sign off, we were, in the span of about an hour, I would say, able to put together a prototype for a Spotify clone. So we got this intelligent component that is written with real code, and this checks the time and then returns a greeting based on what time of day it is. Then we were able to quickly mock these up. We were able to use Unsplash so I didn't have to download a bunch of photos, which I think saved us a bunch of time because we saw how slow I was to do the first one manually. Then we set up this smart component that pulls in real data from Airtable. So we're pulling live data from Airtable. This one here, yeah. We're pulling in this live data from Airtable. We've got loading screens. We've got empty screens. We've got these custom components, all of which override and have scrolling. When we click on those, we have an animated transition over to this full frame. We were able to design a button. That button has variants. Just, what a cool amount of work we were able to do in like no time. And you just saw that there, the loading component just straight up worked. No finagling or anything. We bring this over with a very native-feeling animation. We can follow. We can go back. It all feels very app-like. And we did that in under an hour. So just a really incredible amount of work we were able to do with -- I mean, I don't know anything about Framer except what I've learned today. So the fact that we were able to move this far, this fast, I think, is a very strong endorsement of the tool. Okay. So Amy, we've covered a bunch of tutorials. We've shared the Framer link. So if y'all want to go learn more about that. Is there anything we didn't cover today that you want to make sure you say before we wrap it up?

Amy: Um, I don't think so. I did see something fly by in the chat, just comparing it to Figma. So I'll just say a quick note about that, just comparing the two. I still use both in my workflow. I think Figma is great for design. And you can actually import your Figma files into Framer. If that's where your workflow starts, you're not missing anything. The other -- and I think you can make import other things as well. Yeah. But I think somebody was asking about just the popularity of Figma versus Framer. I think some of it is there's a little bit more of a learning curve with Framer if you go the coded component route, which is probably why Figma is a little bit more popular. And Framer is just starting to move a little more into the no-code realm. Before, it was a lot heavier on the code side.

Jason: Okay.

Amy: But yeah, I think there's a place for both tools within your toolbox.

Jason: Yeah, yeah. I can see a lot of opportunities, too, for like some of what we were doing today was stuff that I would want to do in Figma. Like designing those cards. But being able to pull in my card components and then fill those with data, that's pretty dang promising. Very, very exciting stuff. Okay. Well, with that, let's do a quick shoutout to the sponsors. We've got Rachel here from White Coat Captioning today helping make sure this show is accessible as possible, doing the live captioning with us. She's here from White Coat Captioning. That's made possible through our sponsors, Netlify, Fauna, Auth0, and Hasura. That, as always, is on the home page of the site, learnwithjason.dev. While you're over at learnwithjason.dev, make sure you check out the schedule. We have some really good stuff coming up. My schedule is so out of date. I promise there are going to be shows every Tuesday and Thursday, but I got to get them up on the site. We've got Gregor from GitHub coming teaching us about Octokit. It's a whole lot of fun. We're going to learn Kotlin. That's going to be -- I don't know anything about Kotlin. So that's going to be really funny. Kotlin is like Java. It's all things that I don't use. So it's going to be really, really fun. But it has a lot of potential for building some really interesting stuff. We're going to get into user-defined funks in Fauna, which is like right in Fauna's database. You can actually do data customization right inside of it. I'm excited to learn. I've never tried it. We're going to learn Modern Redux. So Mark Erikson is going to teach us what's new in Redux because it's been around for a long time. It has a bad reputation of being a lot of boilerplate, really complicated and a lot going on. But there's been a ton of work done under the hood to make it more approachable. Mark is going to teach us all about it. Tomasz will be here to teach us about TypeScript. We're going to do better screen reader experiences with CSS with Ben Myers. It's going to be a whole lot of fun. There's also this and a whole lot more. I just need to get the thing updated. And if there's somebody you want to see on the show, please let me know. Maybe tweet at me and tell me who you'd like to learn from. With that, Amy, thank you so much for hanging out with us today.

Amy: Thank you.

Jason: Any parting words for the chat?

Amy: Appreciate it. Thanks for sticking around, guys. And feel free to reach out to me.

Jason: Absolutely. All right, chat. As always, thank you so much for hanging out. Stick around. We're going to go find somebody to raid. Amy, thank you very much. We will see you next time.