Figma Prototype Creation for Mobile Applications

Figma allows creating mobile app prototypes with frames, styles, colors, fonts, and interactive elements, saving time and offering real-time editing.

### Designing a Mobile App Prototype with Figma
* 📱 Figma is a design tool primarily used for interface design, offering various device templates like **iPhone, tablets, and social media platforms**.
* 🎨 Designers can create frames (similar to artboards) in Figma, which can be **duplicated and reused for different views or interactions**.
* 🌈 It's essential to define **colors, typography, and graphic elements for consistency**; Figma allows easy access to **Google Fonts and color codes**.
* 🔲 Figma provides grid and column layout options, ensuring elements **align correctly for easier development later on**.
* 🖼 Designers can easily add **images, icons, and placeholder text** using plugins or built-in resources like **Material Design icons**.
* 🔄 Creating interactive prototypes in Figma involves **linking frames and defining interactions**, with options for different animations like **instant, dissolve, or smart**.
* 🎥 The real-time collaboration feature in Figma allows designers to **work simultaneously on the same project**, making it a popular choice for **remote teams**.
* 💬 The speaker highlights the importance of creating a design system in Figma, including **styles, color names, and typography**, to ensure **consistency and easy updates** in the future.

In this video, we are going to learn how to create a prototype of a mobile application using Figma. You are probably here because you already know that Figma is an application for designing, mainly focused on working with interfaces. Let's get straight to the point. Here we are in Figma, this is the first view. Let's create a new one here and start the design. So, once we are here, we will see that everything is empty because Figma works with frames. The frames, which are these here, are similar to artboards. I can choose different sizes; in our case, we will use an iPhone because it will be a mobile device. The application can also be used for tablets, other devices like regular computers, watches, and even social media platforms. It's interesting how everything is integrated for various needs. There are many interesting elements. One thing is that I have my frame here, very nice. I will name it; I usually start with a splash screen because the splash screen is the first thing you see when the app opens. Then, that will be my first view. Later, I can create a second view or reuse the frame. You can duplicate it; there's no need to redo everything. I can copy and paste. Here, I already have the next one. We can add interactions here. If we preview the prototype by clicking on this button that says present, we will see that Figma will show us a mobile device

It depends on the device you chose; it will show you the view because in the one we have two views, it's not so empty because there is nothing clear. Another interesting thing is that, as it is a web-built application, it is in real-time. So, every change I make, I can see it in the next one. This is very useful. For example, if you have two screens, you can have one screen to see how your design is unfolding. It is very useful, really saves a lot of time. Another thing I am going to do is change the name of the prototype or products. The first thing I would really recommend is to define what your colors will be, what typography bases you will use, what graphic elements you will have, what colors you will use. In fact, if you come to fill, you will notice that I can put a total fill on my whole frame because it is selected. I can fill it with whatever I want, even colors that I have saved in my different projects. I have everything normal, and this becomes useless because I can only save them. But we are going to use maybe a gradient page. You can see different types of gradients here. You can find this very easily; there are a lot of services for this. For colors, we are going to choose a range of colors. The cool thing about this is that I also have the codes that the screen needs here. So if I have the hexadecimal,

Another element let's say squared, I will already have that color here, so all the colors that you are creating, as you place them, they will be added. So, that fill, if it's wrong, will appear as colors of the document, which becomes many other colors that I will use just to have them, just to have them there. So, white is already there, that black color suddenly. [Music] And I will also probably use gray. [Music] With this, I will work later. The interesting thing about this is that the colors are already quick access; they are here. So, if it doesn't change, I can change it all at once here. The other thing I will do is the selection of fonts. I will create a title, basically get an idea of the sizes and how they could be combined, of fonts, how a title would be, what a title would be like. Do I need to write OK here? So, I will change a bit of the hierarchies here. You can apply it correctly. Initially, they tell you editorially, even if you don't believe it. Where we do all this, we do it in divisions in multiples. For example, a title could be 64 points, which is actually here. A subtitle would be 32 or 36, and a paragraph would be lower; the other two could be 24, it could even be 18. Now, you

With typography now, something very cool about a signature is that all these fonts that are here are from Google Fonts. So, what does this mean? It means that any font I find here that I like, let's say Mangold, I will find it here as well. Let's look for it... there it is, just like that. So, this is not only very useful but also very efficient. I can then say, Okay, I'm going to use [Music] Sans Serif and use displays or just use displays. Displays are usually decorative fonts. If you are not very familiar with fonts, display fonts are decorative fonts that will be very useful for titles but not so much for paragraphs. That would be the best option. So, let's say I could go for this Brittany Fast Face, it could work. Let's try it out, let's go for a basic combination. So, this will be for my titles and subtitles. If you like clear contrast, you can use a serif and a sans-serif. You can also choose properties like how thin you want it to be. [Music] Here, I will see some fonts that could work well with the other example Grand Wave. Let's try it here. [Music] And I even have the weights here; in my case, regular. It's seeing super contrast there. For the paragraphs, I think Raleway is fine. It's not always necessary to

As today has been evolving, what are the brand's vision or the application's vision, well then, to use this for the other example and the money from this, use the same for the three. What I am going to do here is to set a product in regular weights for the subtitles and light for the paragraphs. So, if you want something more subtle, not so flashy, this is probably the best option. With that said, I already have my styles, colors, and backgrounds defined. Today, yes, we can design this. This is an introduction because it will save you a lot of time. So, the first thing I'm going to do is create the splash. The splash, for example, I want it to have gradients. Normally, it's a prototype, so let's choose another one. More here means that I can put several colors, several levels, you can also modify the position, change the color, change the blending mode, because changing angles is super cool. Here, you can actually create styles that you will see here. I can create a new style here, let's give it more. So, let's say gradient. I have a style, which means that I can choose a style later on; I can reuse it. Basically, let's invent a logo because we don't have one, and logos, we know what logos are. Logos are texts with the same typography, maybe something different exists. Today, we are going to

An icon now above just like Illustrator, like any vector program, we have the option of a pencil and a pen. So here we can make, let's say, an icon of a girl. What I'm going to pay attention to here is that it has the same thickness as the overon, but very similar to that of the typography for visual coherence. Here you can also play around, I mean, if you are interested in making a very striking logo, probably just text is not a good idea. Instead, you can convert it into curves to wines road that is here, and then you can check here in the layers and you can duplicate a couple, well, you can select to do and then, as there are parts, you can select those parts. Let's do something interesting here because it pays attention here, but this here, and this muddy Monaco, well, we already have something very different. This can be here too, it could have another color, to the liking of the person speaking, in Innsbruck, so that this is no longer just a line but a vector. You can see it here in the layer; it becomes an outline. These are called outlines. I'm going to group this; group, control g, command g. When I have elements like these that I'm not really going to modify, I can do something super interesting, which are symbols that are here, components. It's called components here depending on the program; they

Interesting, this is interesting to use a good component. Here we go, let's see in this other tab that says assets. Basically, here are all the resources that I am creating, that I am accumulating. This means that later I can just grab this resource and push [Music]. I can have several pages. I don't know if you noticed, up here I have a little thing that says page. I can have one page for my prototype and another page for my design system. This is the idea behind it. Each of these components that we are creating, we will be placing in the prototype. I insist on the idea that in our prototype, I always have access to my resources. The assets where I just push them, I can delete them, but they will always exist because I have them saved bit by bit for the design list. What else should be there? Well, why should all of this be in my designs? This system says, what else can I do with my design system? Well, for example, I would recommend creating styles. I have my style for this, the color with the color names. I wouldn't name it purple or something like that. Instead, I would call it dark primary color, light primary color, regular primary color. Why would I do that? By giving them names, it becomes more useful in case I need to change it in the future. I'm not thinking that my primary color will always be yellow, for example.

Using a code name of the dark secondary [Music]. Let's do it with this one [Music]. And another thing, the texts should be good as well. I can do another thing now. This can evolve a lot. It can become much bigger than 64. So it is very likely that this evolution is not very normal. Well, here in the styles, the same new text. He mentioned this, and I'll give it, in addition to many services [Music]. I'm going to have many titles, by the way. Well, let's just do a couple [Music]. So, we go back to the prototype here. I already have it. So I'll do it. I'll push it. Just keep the chip here. Selection color. Well, I have my colors. They're not here in fills or to put light when here. We're going to fill, but I have all this clear. I have intermediate colors. I can do it in contrast. And obviously, we're going to use white color. This is needed in the center, signature. Just like Illustrator. Just like it is, we say it exists. And I can align elements. And that's up here. Just notice, you must have selected it. Next comes the first time, the first screen. The first screen. We could use it here. Well, everyone's taste is how we do it with images. Will it be here? We do it with illustrations.

[Music] There are calculations for this, right on the screen. Let's see this calculation: 17 by 17 pixels. If you look, the grid almost matches the width of the screen, which is good because the margin of error is very low. The idea behind this is that all the elements you create fit into that grid so that when it comes to the development stage, it's easier. If you don't like grids, some people work with columns. Instead of a grid, let's choose columns up here. How many columns again? If it's for a normal web, let's say two. There's a relatively new standard of 8, or it could be 4. Here, I'm going to work with a 6-column layout, and I'll increase the width to medium. The small one will be small. Look at this: I already have a safety margin here, which is 50 on the edges for controls. So, you can activate the grid and work only with that. You can combine whatever you want. There are so many ways to work with it in the end, depending on what you have studied or learned. Let's start building the layouts. [Music] There's something I'm going to do, I'm going to center it. We'll center it. For this case, we'll use images. In this case, Excel and the application we are working on tasks. So, we look for something related to shifts and

In the image at the bottom, there are many ways to do it. The number one way is to right-click and copy the image, but I'm going to give a simple and straightforward signature, which is great. This is not for printing or anything like that, so it doesn't matter if some data is lost here and there, but we are going to do it. Here I have the size, remember I did several sizes. This image, I want it to have curved edges. I have an option for the radius, this option is this little button here, but if you don't like it, you can do it up here as well. Remember this number so that it is uniform in all your images; all my images will have a corner radius of 25. Here we can play a lot, so this is very diagrammatic. As I'm doing this, I can put the text on top, and this becomes the title. Let's talk about changing the color; I'm going to do that. I can add a gradient to this image, and here we can give it a more linear look. Now, let's add some events, colors, and cuts. Well, now this makes more sense. Up here can be Uruguay Center, and the passion so that the transition to white is not noticeable. Here we can also adjust the blending mode to taste. This is my first screen; I didn't have time to discover it. Let's add a paragraph here.

Here there are plugins, you can make a province, you can use the only thing you have to do is choose the plugins. Jackie Brown, here you will find an exaggerated amount of plants. For example, a splash, this could be useful for [Music]. Well, we click here, install this could be useful to place images, the material design icons. I don't want to design, I just want to use it. [Music] Loren Gibson general registration prison. [Music] And here it also explains how to use it just in case it's somewhat difficult. Not really, about reading it says to select all the text layers you want to generate and press generate. Let's please [Music]. We select the text layer it says here and we will generate it. Joaquin [Music]. So, we tell it how much we want. Now, here are other important things before doing that, the plugin and generating. If you want paragraphs, choose the paragraph tool up here. They live in the clyfc, cover the whole box where you want that paragraph to be. So, it already makes sense. We choose, we open it, we generate it. So, this is useful because if not, it will put that huge strip like more and more. Here, the color, for example, my fill color can be gray, it can be black, it can even be purple. I usually use a dark tone and we will make the famous little dots,

[MUSIC] And the others in gray, more than enough, we can change the scale a little bit or make it uniform. I already have them at 18 by 18 pixels. I can think about these then here and this other one here we can align it here we can also destroy this. You can use something very interesting called first let's group and here it says something called auto layouts. That's super useful when we want to adjust several elements at the same time. Let's go to auto layout and here you can choose how much you want them to separate [MUSIC] when I want now that I have [MUSIC] I had grouped it where grouping was then you can instruct it I repeat well I have this now let's go to the next brand presence where the brand is let's put the brand let's remove the zero I like let's change the color and we have color selection [MUSIC] well, it could even be ok remember that I can see this in my own way [MUSIC] how it will look and you have to validate how this works for me it doesn't work I need to put in another graphic element I need to put in textures I need to put in icons I want it to have an important element like I don't know, exit or enter then a lot of graphic elements that you really have to decide on. We already had, remember, we had the case of Guzman actually [MUSIC] we saw what it will

In this example, I am going to create a carousel. I will change them from between each one. What I usually do in this case is I put inside an intro, knowing that it's the same, but suddenly there are other practices that might be better, and that's going to be intros. Let's put another one here. Let's have one here. All at once, hold down chief and choose several. This is what I see in my prototype. I will give it 15. I'm going to see that this is organized. It's good; I have to change this little button as well if we haven't done it yet. Thanks to Splash here. So, let's change the order. Something interesting about this is that you can just drag it, and that saves a lot of time. Now let's make the prototype like I do it so that this is connected. Well, first I choose the name here. When I select my frame, what will appear in the prototype here, so I tell it what I want it to do. It can be an interaction in this sea that is here, and I can tell it that when they click, it takes me to wherever I want it to take me, or I can make it go back, or I can make a window appear on top of it. Let's tell it to navigate to the intro. What type of animation do I want? Instantaneous, dissolve, smart. Smart changes the position

To do is to place arrows, or I can say that when I press this, it changes the other, and that's what I'm going to do. You can select the interaction here. Another important thing here is that I am saying that when you press all this strip, if I don't want that, I have to choose the specific one. See that a plus sign appears. Only a plus sign means that I can link it to the other course. Now, what type of animation do I want? Smart, because these are elements that are going to be shared, they are the same, so it will save me a lot of time. This one will take me to the bait, and this one will take me to the previous one. Smart. This one will take me to this one. Smart. As I add them, I am still configuring everything. This means the first one. Let's see how this interacts. Now, let's see a prototype. Let's click on it. Moving, as I have. Remember that what I did here was move the two from their place, the purple little circle. That's why the whole sky moves. And why am I making the animation smart? Now, if you don't want that performance, what you have to do is basically change it. Change the size of the circle you select, and it changes color. So, it won't be these movements that I am doing. It depends on what you want. Also,

Movement structure, so if I open this again, we're going to press play. Let's focus on something here. In the prototype, I have this little arrow that indicates that this is the main one, number 1 is important. And then, when I click on it, it should take me to the window to choose to dissolve by selecting reds. When I click on these, it changes position. Thank you. Second part, I'll leave it as a timelapse. If you have any questions, leave them in the comments, and I'll help you.

Diseñar una interfaz y prototipo de app en Figma en Español #Figma #Diseño

Llave Dorada

Designing a Mobile App Prototype with Figma

Figma is a design application focused on creating interfaces for various devices, offering a real-time web-based platform for design changes.

The program allows for the easy creation of multiple views, with the ability to duplicate and reuse frames, as well as preview the prototype in different device views.

Figma also provides quick access to colors, including gradients, and allows for easy selection of fonts, making it efficient for designing the app's visual elements.

Google Fonts offers a wide variety of fonts for efficient use in design projects.

Display fonts are great for titles, while serif and sans-serif combinations can provide clear contrast.

The platform also allows for the creation of custom styles and provides the option to convert text into vector icons for visual coherence.

Creating a design system allows for easy access to resources in a prototype.

Using descriptive names for styles and colors makes it easier to manage and update them in the future.

The design system also helps in aligning elements and creating layouts, providing a structured approach to the design process.

Tips for Designing Images with Curved Edges and Text Overlays

To create images with curved edges, use the radius option to set a uniform corner radius, such as 25.

Add a gradient for a more linear look and adjust the blending mode to your preference.

When adding text, consider using a plugin to generate and place paragraphs, and choose the fill color and design elements that complement your overall image.

If you want to add visual interest, consider using the material design icons and playing with different colors for a more dynamic look.

Using Auto Layout for Element Adjustment in Graphic Design

Auto Layout is a useful tool for adjusting multiple elements at once in graphic design.

It allows for easily changing the scale and alignment of elements, as well as the spacing between them.

The tool also enables the efficient organization of graphic elements and the creation of interactive prototypes with specified animations and interactions.

Setting Up Interactive Element Animations

When setting up interactive elements, the plus sign indicates the option to link to another course.

Using smart animations for shared elements can save time and effort.

Changing the size and color of the selected circle can alter the movements and performance of the animation.