[제로베이스 UIUX 파트타임 스쿨] 학습일지 - 1

 

①  1주차 수강한 분량

• Chapter 1 Figma 소개와 설치
• Chapter 2. Figma 인터페이스
• Chapter 3 도형의 활용
• Chapter 4. 그래픽 스타일의 활용

② 각 강의별 학습하며 새롭게 알게된 점

 

Chapter 1. Figma 소개와 설치

 

Figma는 UI/UX 디자인, 프로토타이핑 및 디자인 시스템 구축에 사용되는 반면,

FigJam은 브레인스토밍, 아이디어 시각화, 협업 워크숍 등에 사용된다.

 

(Figjam은 시각적으로 화려하여 발표용으로 많이 쓰이는 것 같다.)

 

Chapter 2. Figma 인터페이스

1. 메뉴바와 툴바

• 메뉴바 : 기능을 카테고리별로 묶어 제공하며
• 툴바 : 도형 삽입, 텍스트 작성, 펜툴, 핸드툴, 코멘트 등 다양한 도구 제공

2. 중앙 패널

• 파일명 클릭 시 복제, 이름 변경, 내보내기 가능.
• View-only 공유 상태일 경우, 편집 도구는 비활성화

3. 우측 상단

• 페이지를 보고 있는 유저 정보, 작업 화면 배율, 그리드 및 자 설정

4. 좌측 패널

• 레이어 : 디자인 파일의 계층 구조.
• 에셋 : 자주 사용하는 컴포넌트와 스타일 저장(디자인 시스템)
• 페이지 : 프로젝트의 구조를 효율적으로 나눌 수 있는 가능

5. 우측 패널 

• Design 탭 : 위치, 크기, 색상, 효과 등 설정
• Prototype 탭 : 프로토타이팅 및 인터랙션 설정
• Inspect 탭 : 개발자가 확인할 수 있는 코드 및 스타일 가이드

 

 

Chapter3. 형태 만들기

 

1) 사각형툴(R)을 그리면 자동으로 Move툴로 변경됨

피그마 로고 클릭 > Preference > Keep tool selected after use 체크하면 마지막으로 사용한 툴로 유지 가능

 

2) 한쪽 모서리만 라운드값 주기

ALT 누르고 조정

 

 

Chapter 4. 그래픽 스타일의 활용

 

1) 디자인 시스템 설정

컬러	텍스트	이펙트	레이아웃 그리드
컬러 팔레트	하이어라키	엘리베이션 및 인터렉션 규칙	반응형 디자인

 

그룹을 통해 스타일 가이드를 묶어서 정리하고, 컬러, 서체, 엘리베이션 규칙, 그리드를 사용할 수 있다.

 

엘리베이션 참고 링크

https://m2.material.io/design/environment/elevation.html#elevation-in-material-design

 

2) 플러그인

원하는 영역에 바로 무료 이미지를 삽입할 수 있는 기능

 

1. Unsplash(언스플레쉬)

→ 무료 이미지

 

2. Content Reel(콘텐츠 릴)

→ 임의로 사용할 이미지, 아이콘, 텍스트 빠르게 삽입 가능한 플러그인

 

3. Get Waves(겟 웨이브)

→ 웨이브 생성

 

4. Image Tracer(이미지 트레커)

→ 원하는 이미지를 벡터화 하는 플러그인

 

③ 수강하면서 흥미로웠던 부분

피그마는 기본적으로 다룰 수 있었기 때문에 강의 수강에 큰 어려움은 없었습니다.
특히 플러그인 활용법과 디자인 시스템 설정 방법을 배운 점은
향후 실무 프로젝트에 큰 도움이 될 것 같아 유익했습니다.

 

④ 수강하면서 어려웠던 부분

어려운 부분은 없었지만, 강의에서 사용된 피그마 작업 환경과 제 환경이 달라
화면 구성이 달라진 점은 다소 혼란스러웠습니다.

 

⑤  다음 학습 계획

실제 UI 환경 이미지를 활용해 직접 실습해보며, 플러그인도 보다 유연하게 활용해보고자 합니다.
또한 Figma 파일에 실습 과정을 단계별로 상세히 기록할 예정입니다.

 

 

※ 이 글은 제로베이스 UIUX 스쿨 주 3일반 강의 자료 일부를 발췌하여 작성되었습니다.