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? - 피그마(기초)

스태리빛나 starrybitna

피그마는 디자이너뿐 아니라 개발자, 카피라이터 등 협업하는 모든 사람이 함께 사용하는 디자인 툴이다.

피그마는 웹 기반으로 설치 없이 사용 가능하며, 프로토타입 기능, 코드 추출 기능, 오토 레이아웃 등 유용한 기능을 제공한다.

컴포넌트 기능을 통해 디자인 요소의 변경 사항을 전체에 빠르게 적용할 수 있고, 공유 기능을 통해 협업이 용이하다.

피그마는 단순한 디자인 툴이 아닌 **디자이너, 개발자, 카피라이터 등 관련된 모든 사람이 함께 사용하는 협업 툴**입니다. 웹 기반으로 설치 없이 사용 가능하며, 실시간으로 공동 작업이 가능하다는 장점이 있습니다.

특히, **피그마는 프로토타입 기능을 제공하여 화면 작동 방식을 시각적으로 보여줄 수 있습니다**. 이를 통해 개발자나 디자인 비전문가와의 소통이 훨씬 수월해집니다.

또한, 피그마는 코드 추출 기능과 반응형 디자인을 위한 오토 레이아웃 기능을 제공하여 **많은 회사들이 피그마로 전환하는 추세**입니다.

🏆 UI 디자인 툴의 압도적인 1위, 피그마

UX Tools 설문조사에서 피그마는 UI 디자인 툴 부문에서 **압도적인 1위를 차지하며 어도비와의 격차를 크게 벌리고 있습니다**. 과거에는 피그마의 수준이 낮았지만, 현재는 많은 디자이너들이 선호하는 툴로 자리매김했습니다.

💻 피그마 시작하기: 인터페이스 살펴보기

피그마를 처음 실행하면 디자인 파일과 FigJam을 선택할 수 있습니다. **FigJam은 브레인스토밍이나 플로우차트 작성에 유용한 기능을 제공**합니다.

피그마 인터페이스는 상단의 도구 모음, 좌측의 레이어/에셋 패널, 우측의 디자인/프로토타입 패널로 구성되어 있습니다. **선택된 오브젝트에 따라 우측 패널의 내용이 변경**됩니다.

기본적인 도형, 펜 툴, 텍스트 툴 외에도 **컴포넌트, 플러그인, 위젯 등 다양한 기능을 활용**할 수 있습니다.

✨ 핵심 기능: 프로토타입과 컴포넌트

피그마에서 프로토타입을 만들려면 **프레임 단위로 작업해야 합니다**. 프레임 툴을 사용하여 원하는 화면 사이즈(폰, 태블릿, 데스크톱)를 선택하고 디자인을 시작하세요.

컴포넌트 기능은 피그마의 강력한 기능 중 하나입니다. **컴포넌트를 변경하면 해당 컴포넌트의 인스턴스(복제본)들이 모두 함께 변경됩니다**. 이를 통해 디자인의 일관성을 유지하고 작업 효율성을 높일 수 있습니다.

인스턴스의 속성을 변경해도 원본 컴포넌트에는 영향을 주지 않습니다. 하지만 **인스턴스의 변경 사항을 원본 컴포넌트에 적용하여 전체 디자인을 통일시킬 수도 있습니다**.

피그마는 **화면 자체를 공유하고 코멘트를 통해 피드백을 주고받을 수 있는 강력한 협업 기능**을 제공합니다. 공유된 화면에 코멘트를 남기면 상대방이 실시간으로 확인할 수 있습니다.

안녕하세요, 스태리빛나입니다. :) 요즘 정말 핫한 툴인 피그마(Figma)에 대해 들어보셨나요? 저도 요즘 자주 사용하고 있는데요.

이 영상을 클릭하신 분들은 아마 피그마가 뭔지 궁금해서 클릭하셨을 거라고 생각합니다. 그래서 이번 영상에서는 피그마가 어디에 사용되는지 알아보고, 간단하게 피그마를 조작하면서 주요 기능들을 살펴보겠습니다.

그럼 시작해 볼까요! 저는 지금 피그마 웹사이트에 들어와 있습니다.

제가 왜 피그마를 많이 사용하는지 알아보려고 하는데요. 우선 피그마는 디자이너만 사용하는 툴이 아니라 관련된 모든 사람이 사용하는 디자인 협업 툴이라는 것을 이해해야 합니다.

지금 여기를 보시면 개발자, 디자이너, 카피라이터가 한 번에 들어와서 같은 공간에서 작업하고, 댓글을 남길 수 있다는 장점이 있습니다.

이러한 이유 때문에 피그마가 현재 널리 사용되고 있습니다.

설치하지 않아도 웹에서 사용할 수 있다는 점도 매우 큰 장점입니다.

제가 이렇게 작업하고 있으면 다른 사람들이 와서 확인할 수도 있고요. 동시에 작업할 수 있다는 큰 장점이 있습니다.

그리고 피그마는 프로토타입이라는 기능을 제공합니다. 화면 작동 방식을 보여줄 수 있기 때문에 단순히 화면을 구성하는 것보다 개발자나 디자인을 모르는 사람들과 소통할 때 매우 유용한 도구가 될 것입니다.

또한 피그마 자체에 코드 추출 기능이 있어서 디자이너가 피그마로 작업할 때 개발자에게 필요한 부분을 볼 수 있는 기능을 제공합니다.

게다가 반응형과 관련된 오토 레이아웃 같은 매우 유용한 기능이 있어서 많은 회사들이 피그마를 선호하고 피그마로 전환하고 있습니다.

제 지인들도 그렇고, 현재 대부분의 디자이너들이 피그마를 더 많이 사용하고 있습니다.

피그마를 무료로 사용할 수 있다는 점은 엄청난 장점입니다. 무료로 한번 사용해 보고, 유료로 결제해서 사용할 수 있습니다. 피그마를 다운로드해서 사용하고 싶다면 여기 다운로드 메뉴로 가서 피그마를 사용하면 됩니다.

물론 설치하지 않고 바로 웹에서 사용할 수도 있습니다.

우선 가입을 해야겠죠? 그리고 uxtools라는 웹사이트에서 설문조사를 하고 있습니다.

요약해서 보면 UI 디자인 툴 설문조사에서 피그마가 당당하게 1위를 차지하고 있는 것을 볼 수 있습니다.

어도비와의 격차를 보여주면서 큰 차이를 보여주고 있는데, 과거에는 피그마의 수준이 굉장히 낮았지만, 지금은 피그마의 수준이 이렇게 오르락내리락 하고 있습니다.

스케치가 유행했을 때는 스케치의 사용량이 크게 줄어드는 것을 볼 수 있습니다.

그럼 피그마로 프로토타입을 만드는 방법을 보여드릴게요. 지금 파일이 준비되어 있는데요. 여기 이렇게 화면 디자인을 보실 수 있습니다.

자, 오른쪽 상단으로 올라가서 플레이 버튼을 누르면 화면이 이렇게 나옵니다. 여기서 실제 앱을 사용하는 것처럼 이런 식으로 확인할 수 있습니다.

이것들을 프로토타입이라고 하는데, 실제 프로토타입이 나오기 전에 가상으로 어떻게 작동하는지 확인할 수 있는 매우 유용한 기능입니다.

실제로 이렇게 움직이는 것을 보면 개발자나 다른 기획자, 관련자들이 쉽게 이해하고 서로 소통할 수 있겠죠?

물론 이 기능이 있다고 해서 개발을 안 해도 된다는 의미는 아닙니다.

실제 앱이나 웹이 탄생하려면 개발은 별도로 진행되어야겠죠? 자, 그럼 이렇게 피그마를 열었습니다. 저는 데스크톱 앱을 설치했는데, 설치 없이 웹에서만 사용해도 상관없습니다.

자, 여기 상단을 보시면 디자인 파일이 있습니다.

이것을 클릭하면 새 파일을 열고 시작할 수 있습니다. 옆에는 FigJam이라는 부분이 있는데, FigJam을 클릭하면 저희가 이미 알고 있는 브레인스토밍이나 플로우차트와 같은 다양한 기능이 들어 있습니다.

그러니 한번 사용해 보시고, 둘러보시면 매우 유용하게 사용할 수 있기 때문에 한번 둘러보시길 추천합니다.

제가 굳이 설명하지 않아도 직접 한번 눌러서 사용해 보는 것이 더 좋을 것 같습니다.

여기 아래에서도 꺼내서 사용할 수도 있습니다. 필요하신 분들은 한번 살펴보시는 것이 좋을 것 같습니다.

그럼 옆에 있는 디자인 파일을 클릭해서 시작해 보겠습니다. 자, 이제 이렇게 들어왔습니다. 이제 위를 보시면 도구들이 있습니다.

그리고 왼쪽에는 레이어 패널과 에셋으로 나뉘어져 있습니다. 그리고 오른쪽을 보시면 디자인 패널과 프로토타입 패널로 나뉘어져 있는 것을 볼 수 있습니다.

어떤 오브젝트를 선택하느냐에 따라 오른쪽 패널이 더 늘어났다 줄어들었다 하면서 이런 모양들을 사용할 때 확인할 수 있습니다.

포토샵 일러스트레이터를 사용하셨던 분들이라면 조금 더 간소화된 느낌을 받을 수 있습니다. 저도 처음에는 그렇게 느꼈는데, 기능적으로 조금씩 다른 부분이 있습니다.

그래서 조금 더 공부하면서 사용하시면 훨씬 더 유용하게 사용할 수 있을 겁니다.

자, 그럼 간단하게 중요한 기능들만 한번 살펴보도록 하겠습니다. 위에는 도구들이 있고요. 여기 보시면 도형 프레임을 확인할 수 있습니다.

그다음에 펜 툴이 있고, 텍스트를 쓸 수 있는 텍스트, 그리고 옆에 보시면 컴포넌트나 플러그인, 위젯 같은 것들을 사용할 수 있습니다.

옆에 보시면 코멘트할 수 있는 코멘트 툴도 있고요. 그리고 이동 프레임 같이 많이 사용하게 될 것들이 있습니다.

프레임 툴도 있고요. 먼저 간단하게 사각형을 넣어 볼게요. 이렇게 Rectangle을 넣으면 제가 방금 말씀드린 것처럼 이쪽에 Fill, Stroke 부분이 늘어난 것을 볼 수 있습니다.

그래서 선택된 오브젝트에 따라서 오른쪽이 더 확장되는 것을 볼 수 있습니다.

이런 식으로 원하는 색깔로 바꿔서 사용할 수 있고요. Stroke도 이렇게 넣을 수 있습니다. 들어가는 게 보이시죠?

그리고 피그마에서 중요한 것은 프로토타입이라는 것을 좀 더 빨리 만들고 싶을 때는 프레임 단위로 작업을 해야 합니다.

그래서 프레임 툴을 클릭하면 오른쪽에 이렇게 화면 사이즈가 보입니다. 폰, 태블릿, 데스크톱을 제공하고요. 저는 지금 아이폰 14로 진행해야 한다면 이렇게 사이즈에 맞는 화면을 볼 수 있습니다.

이런 식으로 작업을 해야 프로토타입으로 추출해서 공유할 수 있습니다.

이거는 꼭 기억해 주셔야 합니다. 그러면 여기에 도형 같은 것을 이용해서 작업을 하고요. 여기에서 오토 레이아웃이라는 것을 씌워서 이제 버튼을 만들어서 진행할 수 있습니다.

제가 오토 레이아웃을 켜 놓은 상태이기 때문에 텍스트를 칠수록 이 버튼의 크기가 늘어나는 것을 볼 수 있습니다.

다른 일러스트레이터나 포토샵에는 이런 기능이 없기 때문에 텍스트를 입력하고 나서 사각형을 키우기 위해서 다시 박스를 늘려야 하는 그런 불편함이 있습니다.

피그마에서는 이러한 부분들이 모두 자동으로 이루어집니다. 피그마에는 컴포넌트로 등록해서 사용할 수 있는 기능이 있는데요.

아주 간단한 걸 한번 보여 드릴게요. 예를 들어서 이 사각형을 컴포넌트로 등록한다고 쳐 봐요. 여기 상단에 다이아몬드 모양 아이콘을 클릭하면 컴포넌트를 만들 수 있습니다.

왼쪽에 보면 현재 사각형이 컴포넌트로 등록된 것을 확인할 수 있습니다.

이것을 한번 복사해 볼게요. Alt(Option) + 드래그를 누르면 복사가 되는데요. 그러면 지금은 똑같아 보이지만, 한쪽은 원본이고, 다른 한쪽은 복사본, 레플리카입니다.

그래서 여기 레이어 패널을 보시면 표시 상태가 다른 것을 확인할 수 있습니다.

왼쪽에 있는 것은 제가 처음에 만들었던 원본, original입니다. 다시 말해서 이것을 컴포넌트라고 부릅니다. 그다음에 오른쪽에 있는 모양은 속이 비어 있는 다이아몬드인데, 이것은 복제본입니다.

그래서 이것을 인스턴스라고 불러요. 컴포넌트, 인스턴스. 피그마에서 이것은 굉장히 강력한 기능인데, 만약 특정 요소에 간단한 변경을 해야 하는 상황이라고 가정해 볼게요.

그러면 이것이 100개 요소라고 했을 때, 100개 요소를 일일이 선택해서 변경할 필요가 없는 것이죠.

컴포넌트만 변경하면 이 모든 것들이 함께 변경됩니다. 지금 왼쪽에 있는 것 하나만 오리지널 컴포넌트인데요. 이 컴포넌트를 한번 변경해 볼게요. 자, 여기 보시면 색상이 지정되어 있죠.

제가 요거를 다른 색깔로 이렇게 바꿨는데, 어때요? 저는 이것만 바꿨는데, 옆에 있는 인스턴스 레플리카들이 한 번에 영향을 받아서 다 같이 바뀐 것을 확인할 수 있습니다.

그런데 만약 제가 이 복제본, 인스턴스의 색깔을 바꾸려고 한다면요.

그러면 여기 원본에는 영향을 주지 않죠? 복제본에만 색깔이 바뀐 거예요. 물론 이것을 다시 원본에다가 업로드하는 방법도 있습니다. 여기 '점진적으로'를 누르고 푸시를 누르면 복제본에 바뀐 색깔을 이쪽으로 넘겨서 원본을 바꿔서 전체를 통일시킬 수도 있습니다.

지금은 제가 아주 간단하게만 보여 드렸지만, 연동될 수 있는 유용한 기능들이 있기 때문에 피그마를 이용해서 UI 디자인이나 화면 디자인 작업을 할 때 아주 편리하고, 빠르고, 유용하게 사용할 수 있습니다.

웹사이트에서 초반에 간략하게 설명드렸듯이, 여기에 공유라는 버튼이 있습니다. 이 화면 자체를 공유할 수 있고요. 링크를 복사해서 전달하면 이 화면을 볼 수 있습니다.

그러면 화면을 보는 사람이 코멘트를 남길 수 있습니다. 여기에 코멘트 도구가 있는데, 제가 이렇게 코멘트를 클릭해서 코멘트를 남기면 상대방도 볼 수 있습니다.

또는 상대방이 코멘트를 남기면 코멘트를 볼 수 있습니다. 그래서 여기에서 답글을 달거나, 완료하거나, 코멘트를 삭제할 수 있습니다.

오늘은 아주 간단한 부분만 살펴봤는데요. 혹시 이 영상이 도움이 되셨다면 제 채널 스태리빛나 starrybitna를 구독해 주시고요.

앞으로 올라올 영상도 시청해 주시면 감사하겠습니다. 오늘은 피그마의 기본적인 기능에 대해 알아봤습니다.

오늘 강의가 도움이 되셨다면 구독과 좋아요 부탁드립니다. 궁금한 점이 있으시면 댓글로 남겨주세요.

그럼 다음에 또 다른 콘텐츠로 돌아오겠습니다. 그럼 안녕 :D

디자이너뿐 아니라 개발자, 카피라이터 등 다양한 분야의 협업 도구로서의 Figma 강조

웹 기반 사용의 편리성 및 실시간 협업 기능 강조

프로토타입 기능을 통한 비디자이너와의 효과적인 소통 방법 설명

반응형 디자인을 위한 자동 레이아웃 기능 및 무료 사용 가능성 언급

실제 화면 디자인 예시 및 프로토타입 기능 사용 방법 시연

프로토타입을 통한 개발자 및 관계자 간의 효과적인 의사소통 강조

Figma 인터페이스 및 기본 도구 설명

웹 또는 데스크톱 앱을 통한 Figma 접근 방법 설명

FigJam 기능(브레인스토밍, 플로우차트 등) 소개

레이어 패널, 에셋, 디자인 패널, 프로토타입 패널 등 인터페이스 구성 요소 설명

도구 설명 (모양 프레임, 펜 도구, 텍스트 도구, 컴포넌트, 플러그인, 위젯, 코멘트 도구 등)

Figma 주요 기능 심화 설명 (자동 레이아웃, 컴포넌트)

자동 레이아웃 기능을 이용한 버튼 생성 및 크기 조절 과정 시연

컴포넌트 기능을 이용한 디자인 요소 재사용 방법 설명

컴포넌트 수정 시 인스턴스에 대한 동시 적용 효과 설명

인스턴스 수정 내용을 원본 컴포넌트에 반영하는 방법 설명

디자인 파일 공유 및 댓글 기능을 통한 협업 방법 설명

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

스크립트