[디자인 도구] 피그마(Figma)

🎨 [디자인 도구] 피그마(Figma) 시작하기: 설치부터 첫 도형 그리기까지

디자인을 시작할 때 가장 먼저 필요한 것은 무엇일까요?
바로 그림을 그릴 '종이'와 '도구'입니다.
오늘은 전 세계 디자이너들이 가장 많이 사용하는 도구인 '피그마'의 기초를 알아보겠습니다.

1. 피그마란 무엇인가요?
피그마는 인터넷만 연결되어 있다면 언제 어디서든 그림을 그릴 수 있는 '공유 스케치북'입니다.
클라우드 기반 디자인 툴: 실시간 협업이 가능함
* 함께 그려요: 하나의 종이에 여러 사람이 동시에 접속해서 함께 그림을 그릴 수 있습니다.
-디자인 및 프로토타입 제작: ui/ux 디자인 인터랙션 디자인, 아이콘 제작 등 다양한 디자인 작업에 활용.
 
피그마의 장점
-협업기능 : 여러 사용자가 동시에 같은 파일에서 작업가능
-버전 관리: 자동 저장 버전 기록을 통해 이전 상태로 쉽게 복구
-플러그인 지원: 다양한 플러그인을 통해 워크플로우를 확장할 수 있음.

* 어디서든 열려요: 따로 저장해서 파일을 보낼 필요 없이, 인터넷 주소만 알면 집에서도, 학교에서도 똑같은 그림을 볼 수 있습니다.
* 기록이 남아요: 실수로 그림을 망쳤어도 어제로, 혹은 한 시간 전으로 시간을 되돌릴 수 있는 기능이 있습니다.

2. 피그마와 친해지기 (화면 구성) 
피그마 화면을 처음 열면 크게 세 부분으로 나뉩니다.
피그마 인터페이스의 주요 구성요소
* 하단 툴바 (도구함): 연필, 지우개, 자 같은 도구들이 모여 있는 곳입니다. 사각형을 그릴지, 글씨를 쓸지 여기서 결정합니다.
상황별 단축키: 작업 효율을 높이는 단축키를 함께 학습
* 좌측 레이어 패널 (차례표): 내가 그린 그림들이 어떤 순서로 쌓여 있는지 보여주는 목록입니다. 그림이 많아져도 길을 잃지 않게 도와줍니다. 
페이지 프레임 그룹 개별 오브젝트 각 요소의 순서와 계층을 확인 및 조절.

* 우측 속성 패널 (상세 설정): 내가 그린 사각형의 색깔을 바꾸거나, 크기를 조절하거나, 그림자를 넣는 등 세부적인 내용을 결정하는 곳입니다.
스타일 및 속성 조절
 
기타기능 > 코멘트 기능 : 팀원 과 피드백 및 의견 공유
파일 및 버전 관리: 이전 버전 확인 및 히스토리 관리.
 
3. 직접 해보는 첫걸음 (실습)
이론을 알았다면 이제 직접 움직여 볼 차례입니다.

Step 1: 내 첫 프로젝트 만들기
피그마에 가입한 뒤 "Create New File" 버튼을 눌러보세요.
새하얀 종이가 나타납니다.
파일 이름을 "1단계_내 첫 피그마"라고 바꾸는 것부터 시작입니다.

Step 2: 도형 그려보기 (R과 O의 비밀)
* 키보드에서 'R'을 누르고 마우스를 끌면 **사각형(Rectangle)**이 그려집니다.
* 키보드에서 'O'를 누르고 마우스를 끌면 **동그라미(Oval)**가 그려집니다.

Step 3: 색깔 입히기
그린 도형을 선택하고 오른쪽 패널을 보세요. 'Fill'이라는 곳에서 색깔을 골라보세요.
내가 아까 배운 '색상환' 지식을 활용해 예쁜 색을 채워 넣으면 끝입니다!
 
1.실습 사각형 도구 r > 캔버스에 클릭 후 드래그하여 사각형 생성
속성패널활용> 사격형의 fill 색상 stroke 테두리 shadow 그림자 효과를 적용해 봅니다.
원형도구 o > 캔버스에 원 그리기 후 크기 및 위치 조정

1. 오늘 학습한 내용을 블로그에 정리합니다. 완료
2. 과제 제출 구글폼을 통해 학습한 내용을 선택하고 작성한 블로그를 제출해주세요.
모양도구 사용법 그림자넣기
웹페이지만들기
펜으로 도형만들기
완료
3. 실습까지 진행 했다면 블로그에 실습내용도 자유롭게 남겨 주세요!
 삭제기능못찾겟음. 댓글 도형
에이아이 메이커 기능 사용안됨.
펜은 어떨때 사용하는지 원하는 도형만들기잘안뎀.
작업기능 잘모르겠음
재생시켰을때 원하는 디자인대로 만들어 보여지지가 않아서
어렵고 망친거같다. 연습초안이..