모바일 애플리케이션을 위한 피그마 프로토타입 제작

### Figma로 모바일 앱 프로토타입 디자인하기
* 📱 Figma는 주로 인터페이스 디자인에 사용되는 디자인 도구로, **iPhone, 태블릿, 소셜 미디어 플랫폼 등 다양한 디바이스 템플릿**을 제공합니다.
* 🎨 디자이너는 **Figma에서 아트보드와 유사한 프레임**을 만들어 다른 보기 또는 상호 작용에 복제하고 재사용할 수 있습니다.
* 🌈 일관성을 위해 색상, 타이포그래피 및 그래픽 요소를 정의하는 것이 필수적인데, **Figma를 사용하면 Google 글꼴 및 색상 코드에 쉽게 액세스**할 수 있습니다.
* 🔲 Figma는 **그리드 및 열 레이아웃 옵션**을 제공하여 나중에 더 쉽게 개발할 수 있도록 요소가 올바르게 정렬되도록 합니다.
* 🖼 디자이너는 **플러그인이나 머티리얼 디자인 아이콘**과 같은 기본 제공 리소스를 사용하여 이미지, 아이콘 및 플레이스홀더 텍스트를 쉽게 추가할 수 있습니다.
* 🔄 Figma에서 인터랙티브 프로토타입을 만들려면 **인스턴트, 디졸브 또는 스마트와 같은 다양한 애니메이션 옵션**을 사용하여 프레임을 연결하고 인터랙션을 정의해야 합니다.
* 🎥 Figma의 실시간 협업 기능을 사용하면 **디자이너가 같은 프로젝트에서 동시에 작업**할 수 있어 원격 팀에게 인기가 높습니다.
* 💬 연사는 **스타일, 색상 이름, 타이포그래피 등 Figma에서 디자인 시스템을 구축**하여 향후 일관성을 유지하고 쉽게 업데이트하는 것이 중요하다고 강조합니다.

Figma를 사용하면 프레임, 스타일, 색상, 글꼴 및 대화형 요소를 사용하여 모바일 앱 프로토타입을 만들 수 있으므로 시간을 절약하고 실시간으로 편집할 수 있습니다.

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

Figma로 모바일 앱 프로토타입 디자인하기

Figma는 다양한 디바이스를 위한 인터페이스 제작에 중점을 둔 디자인 애플리케이션으로, 디자인 변경을 위한 실시간 웹 기반 플랫폼을 제공합니다.

이 프로그램을 사용하면 프레임을 복제하고 재사용할 수 있을 뿐만 아니라 다양한 디바이스 보기에서 프로토타입을 미리 볼 수 있는 기능으로 여러 보기를 쉽게 만들 수 있습니다.

또한 Figma는 그라데이션을 포함한 색상에 빠르게 액세스할 수 있고 글꼴을 쉽게 선택할 수 있어 앱의 시각적 요소를 효율적으로 디자인할 수 있습니다.

타이포그래피 디자인에 Google 글꼴 사용

Google 글꼴은 디자인 프로젝트에서 효율적으로 사용할 수 있는 다양한 글꼴을 제공합니다.

디스플레이 글꼴은 제목에 적합하며, 세리프체와 산세리프체 조합은 선명한 대비를 제공할 수 있습니다.

또한 이 플랫폼에서는 사용자 지정 스타일을 만들 수 있으며 시각적 일관성을 위해 텍스트를 벡터 아이콘으로 변환하는 옵션도 제공합니다.

프로토타입 제작을 위한 디자인 시스템 만들기

디자인 시스템을 만들면 프로토타입의 리소스에 쉽게 액세스할 수 있습니다.

스타일과 색상에 설명이 포함된 이름을 사용하면 향후 관리 및 업데이트가 더 쉬워집니다.

또한 디자인 시스템은 요소를 정렬하고 레이아웃을 만드는 데 도움이 되며, 디자인 프로세스에 대한 구조화된 접근 방식을 제공합니다.

곡선 가장자리 및 텍스트 오버레이가 있는 이미지 디자인 팁

모서리가 구부러진 이미지를 만들려면 반경 옵션을 사용하여 25와 같이 균일한 모서리 반경을 설정합니다.

그라데이션을 추가하여 선형적인 느낌을 더하고 원하는 대로 블렌딩 모드를 조정할 수 있습니다.

텍스트를 추가할 때는 플러그인을 사용하여 단락을 생성하고 배치하고 전체 이미지를 보완하는 채우기 색상과 디자인 요소를 선택하는 것이 좋습니다.

시각적인 흥미를 더하고 싶다면 머티리얼 디자인 아이콘을 사용하고 다양한 색상을 사용하여 보다 역동적인 느낌을 주는 것도 좋습니다.

그래픽 디자인에서 요소 조정을 위한 자동 레이아웃 사용

자동 레이아웃은 그래픽 디자인에서 여러 요소를 한 번에 조정할 수 있는 유용한 도구입니다.

이 도구를 사용하면 요소의 배율과 정렬은 물론 요소 사이의 간격도 쉽게 변경할 수 있습니다.

또한 이 도구를 사용하면 그래픽 요소를 효율적으로 구성하고 지정된 애니메이션과 상호 작용이 있는 인터랙티브 프로토타입을 만들 수 있습니다.

인터랙티브 요소 애니메이션 설정

대화형 요소를 설정할 때 더하기 기호는 다른 코스에 링크하는 옵션을 나타냅니다.

공유 요소에 스마트 애니메이션을 사용하면 시간과 노력을 절약할 수 있습니다.

선택한 원의 크기와 색상을 변경하면 애니메이션의 움직임과 성능이 변경될 수 있습니다.