Hello, this is StarryBitna. :) Have you heard of a tool called Figma that is so hot these days? I also use it often these days.

I think those who clicked this video probably clicked because they were curious about what Figma is. So, in this video, we will find out where Figma is used and look at its main functions while simply manipulating Figma.

Then let's get started! I am now on the Figma website .

I'm trying to find out why I use Figma a lot. First of all, you need to understand that Figma is not a tool used only by designers, but a design collaboration tool used by all involved.

If you look here now, there is an advantage that developers, designers, and copywriters can come in at once in this way, work in the same space, and leave comments.

Because of this, Figma is widely used as it is now.

And even if you don't have to install it, you can use it on the web, so this is also a very big advantage.

Other people can come and check on me as I am working like this. It has the great advantage of being able to work simultaneously.

And Figma provides a function called prototype. It will be a tool that can be very useful when communicating with developers or people who do not know design because it can show how the screen works, rather than just configuring the screen.

And since Figma itself has the ability to extract codes, it provides the ability for developers to see what they need when designers work with Figma.

In addition, because it has very useful features such as auto layout related to responsiveness, many companies prefer Figma and are switching to Figma.

Even my acquaintances, most of the designers now use Figma more.

The fact that Figma is free to use is a huge advantage. You can try it once for free and then pay for it to use it. If I want to download and use Figma, I can go to the download menu here and use Figma.

Of course, you can use it on the web right away without installing it.

First of all, you have to sign up, right? And a website called uxtools is doing a survey.

If you look at it in summary, you can see that Figma is proudly taking first place in the UI design tool survey.

It shows a difference with Adobe by showing a huge gap. In the past, the level of Figma was very low, but now the level of Figma is going up and down like this.

You can see that while sketches were the trend, the usage of sketches is greatly decreasing.

Then I'll show you how to prototype with Figma. I have a file ready now. You can see the design of the screen like this here.

Now, if you go up to the top right and press the play button, the screen will come out like this. Here we can check in this way as if we were using a real application.

These are called prototypes, and it is a very useful feature that allows you to check how things work virtually before the actual prototype comes out.

If you see the movement like this in real life, developers or other planners and related parties can easily understand and communicate with each other, right?

Of course, just because this feature exists doesn't mean that it doesn't have to be developed.

Development has to go in separately so that the actual app or web can be born, right? Now then, I opened Figma like this. I have installed the desktop app, but it doesn't matter if you use it only on the web without installing it.

Now, if you look at the top here, there is a design file.

Click this to open a new file and start. Next to it, there is a part called FigJam. If you click FigJam, it contains various functions such as Brainstorm, which we already know, or Flowchart.

So, if you try this once, I recommend you look around it once because you can use it very usefully.

Even if I don't bother explaining this, it would be better if you try to use it yourself by pressing it once.

You can also take it out and use it from here down here. If you need one, I think it would be nice to take a look.

Then I'll click on the design file next to it and try to start. So now I came in like this. Now, if you look above, there are tools.

Then, on the left, it is divided into the Layers panel and Assets. Then, if you look to the right, you can see that it is divided into a design panel and a prototype panel.

Depending on which object is entered, the panel on the right will increase or decrease more, and you will be able to check these shapes while using them.

If you have used Photoshop Illustrator, you may feel that it looks a little more simplified. I also felt that way at first, but there are some functionally different parts.

Therefore, if you use them while studying a little more, you will be able to use them much more usefully .

So, let's take a quick look at some of the important features. Above are the tools. If you look here, you can check the shape frame .

After that, there is a pen tool, and text that can write text, and next to it, you can use components or plug-ins, widgets, and so on.

If you look next to it, there are also comment tools that allow you to comment. And there are things like move frames that you will use a lot.

There is also a frame tool. First, let's put a simple rectangle. If you put a Rectangle like this, you can see that the Fill and Stroke parts have increased on this side as I just said.

So, you can see that the right side expands more according to the selected object.

In this way, you can change it to the color you want and use it. You can also put Stroke like this. Can you see it coming in ?

And what's important in Figma is that if you want to make something called a prototype earlier, you have to work frame by frame.

So, if you click the frame tool, you can see the screen size like this on the right. We offer phones, tablets, and desktops. So I have to proceed now with the iPhone 14, then you can see the screen that fits the size like this.

You have to work on this so that you can extract them as prototypes and share them.

Please remember this you have to give. Then, I work here using some shape. Here, you can now cover something called Auto Layout and make a button to proceed.

You can see that the size of this button increases as you type text because I have Auto Layout turned on.

Since this function does not exist in other illustrators or Photoshop, there are such inconveniences as having to re-increase the box after entering text to enlarge the square.

In Figma, all of those parts are done automatically. Figma has a function that can be registered as a component and used.

I'll just show you something really simple. For example, let's say you register this square as a component. If you click the diamond-shaped icon at the top here, you can create a component.

On the left, you can see that the current rectangle is registered as a component.

I'll try to make a copy of this. You can copy by pressing Alt (Option) + Drag. Then it looks the same now, but one side is the original, and the other side is now a copy, replica.

So, if you look at the layer panel here, you can see that the displayed state is different.

The one on the left is the first original I made, original. In other words, this is called a component. Next, the shape on the right is a blank diamond, which is a duplicate.

So this is called an instance. Component, instance. In Figma, this is a very powerful feature, let's say we're in a situation where we need to make simple changes to certain entities.

Then, if this is 100 elements, it is not necessary to select and change all 100 elements individually.

If you change only the component, all of these things change together. Only the one on the left is the original component now. Let's try to change this component. Now, if you look here, the color is specified.

I changed yogurt to a different color like this, how is it? I only changed this, but I can see that all the instance replicas next to it are affected at once and changed.

But if I'm going to change the color for this clone, instance.

So it doesn't affect the original here, right? It's just that the color has changed only on the replica. Of course, there is also a way to upload this to the original. If you press 'gradually' here and press push, you can pass the color changed to the duplicate to this side and change the original to unify the whole thing.

I've only shown it very simply now, but since there are useful functions that can be linked, it can be used very conveniently, quickly, and usefully when working with UI design and screen design using Figma .

As I explained briefly on the website at the beginning, there is a button called Share here. You can share this screen itself. If you copy and forward the link, you can see this screen.

Then the person viewing the screen can leave a comment. There is a comment tool here, and if I leave a comment by clicking on the comment like this, the other person can also see it.

Or, if the other person leaves a comment, you can see the comment. So you can reply here, or you can complete it, or you can delete the comment.

Today, we only looked at a very simple part. If you are interested in watching this video, please subscribe to my channel, 스태리빛나 starrybitna.

I would appreciate it if you could watch one of the upcoming videos. Today, we looked at the basic functions of Figma.

If today's class was helpful, please subscribe and like it. If you have any questions, please leave them in the comments.

Then I'll come back with another content next time. Bye then :D

피그마 기초 강의 10분 안에 끝내기(컴포넌트 개념 이해) What is Figma? - 피그마(기초)

Scripts