Figma Tutorial: Design Collaboration & Prototyping Tool

Figma는 협업 디자인을 강화하여 디자이너와 개발자를 위한 실시간 피드백과 간소화된 워크플로우를 지원합니다.

### Figma 기초 10분 완성 가이드: 협업 디자인 도구의 핵심 기능
* 📌 **Figma**는 디자이너뿐 아니라 개발자, 카피라이터 등 모든 협업자를 위한 디자인 툴입니다.  웹에서 바로 사용 가능하며 설치가 필요 없다는 장점이 있습니다.
* 💻 **프로토타입 기능**을 통해 실제 애플리케이션처럼 화면 작동을 보여주고, 코드 내보내기 기능으로 개발자와의 원활한 소통을 지원합니다.
* 🚀 **자동 레이아웃(Auto Layout)** 등의 편리한 기능과 무료 사용 가능성으로 많은 기업들이 Figma를 선호하고 있습니다. UXTools 설문조사에서도 UI 디자인 도구 1위를 차지할 정도로 인기가 높습니다.
* 📱 프로토타입 제작은 **프레임 단위 작업**을 통해 진행되며, 다양한 기기(아이폰, 태블릿, 데스크탑) 크기에 맞춰 디자인할 수 있습니다.
* 🎨 **컴포넌트 기능**을 이용하면 디자인 요소를 재사용하고, 변경사항을 일괄 적용하여 효율적인 작업이 가능합니다.  원본 컴포넌트 변경 시 인스턴스들도 자동으로 업데이트됩니다.
* 💬 **실시간 협업 및 공유 기능**을 통해 여러 사용자가 동시에 작업하고, 댓글을 통해 의견을 주고받을 수 있습니다.
* 💡 FigJam 기능을 통해 브레인스토밍, 플로우차트 등 다양한 협업 활동을 지원합니다.
* 👍 Figma는 **직관적인 인터페이스**와 간편한 사용법으로 초보자도 쉽게 사용할 수 있습니다.  Photoshop이나 Illustrator 사용자라면 더욱 쉽게 적응할 수 있습니다.

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

I think those who clicked this video probably did so because they were curious about what Figma is. So, in this video, we'll find out where Figma is

used and look at its main functions while simply manipulating Figma. Then let's get started! I'm now on the Figma website

. I'm trying to figure out why I use Figma a lot. First of all, you need to understand that Figma

isn't a tool used only by designers, but a design collaboration tool used by everyone involved. If you look here now,

there's an advantage that developers, designers, and copywriters can all participate at once, 

work in the same space, and leave comments. Because of this, Figma is widely used as it is. 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 my work like this.

It has the great advantage of enabling simultaneous work. And Figma provides a function called prototype. It

will be a very useful tool when communicating with developers or non-designers because it can show how

the screen works, rather than just showing the screen configuration. And since Figma itself has the ability to export code,

it allows developers to see what they need when designers work with Figma.  In addition, because it has very useful features such as auto layout for responsiveness,

many companies prefer Figma and are switching to it. Even among my acquaintances, most designers now

use Figma more. The fact that Figma is free to use is a huge advantage. You can try it for free and then

pay for a subscription. 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 fluctuating 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 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 is created. 

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 development is unnecessary.

Development still has to happen 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 section 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 using 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've come 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 selected,

the panel on the right will expand or contract, and you will be able to check these shapes while using them.

If you have used Photoshop or 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 them 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 tool that can write text, and next to it, you can use components or plugins, 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 options have appeared 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 strokes 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 export them as prototypes and share them. Please remember this:

you have to give... Then, I work here using some shapes. 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 doesn't exist in other illustrators or Photoshop, there are inconveniences like having to manually resize the box after entering text to enlarge the square.

In Figma, all of those parts are done automatically. Figma has a function that allows you to register something as a component and reuse it.

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 is the original, and the other is now a copy; a 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.  In other words, this is called a component. Next, the shape on the right

This 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's 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 "Override" here and

press "Push," you can pass the color change 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're interested in watching this video,

please subscribe to my channel. I would appreciate it if you could watch one of my 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 more content next time. Bye then :D

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

스태리빛나 starrybitna

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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