[실전 피그마] - PART 1 2 3

💡 맥 이용자는 Alt > Option , Ctrl > Command 로 바꿔서 생각하기

 

PART 1 원포인트 레슨! 피그마 미리 보기

• 피그마
  • 협업 기능을 갖춘 웹 기반의 UI/UX 디자인 툴
  • 백터 그래픽 기반의 디자인 툴
  • 자동 히스토리 저장
• 비트맵 방식
  • 매우 작은 정사각형 단위인 픽셀로 구성된 이미지 형식
  • 해상도는 너비와 높이의 픽셀 수로 결정
• 백터 방식
  • 수학 공식으로 이루어진 디지털 이미지로 점, 선, 곡선, 모양 등을 나타냄
  • 해상도 영향을 받지 않음

해상도 : 화면에 표시되는 픽셀 수

픽셀 밀도 : PPI or DPI로 측정, 픽셀 밀도가 높을수록 이미지가 더 선명하게 표현

 

물리적 해상도 : 스마트폰이나 태블릿과 같은 모바일 기기의 디스플레이가 실제로 가지고 있는 픽셀 수

논리적 해상도 : 디자인 작업에서 사용하는 기준 픽셀, 물리적 해상도를 배율로 나눈 값

---

PART 2 피그마 시작하기

피그마 설치

피그마 기본 화면

툴 바 - Quick actions

Tools 메뉴

Tools 메뉴

Tools 메뉴

Tools 메뉴

 

• 단축키로 탭 전환하기
  • [Layers] 탭 : Alt+1(윈도우) , Option+1(맥)
  • [Assets] 탭 : Alt+2(윈도우) , Option+2(맥)
  • [Design] 탭 : Alt+8(윈도우) , Option+8(맥)
  • [Prototype] 탭 : Alt+9(윈도우) , Option+9(맥)

[Layers] 탭 : 스크롤 할 수 있는 Page(페이지) 패널과 Layer(레이어) 패널로 구성

[Assets] 탭 : 현재 파일에서 이용할 수 있는 컴포넌트를 확인하고 라이브러리를 관리

[Design] 탭 : 오브젝트의 속성을 변경할 수 있는 다양한 패널들로 구성

[Prototype] 탭 : 오브젝트의 속성을 변경할 수 있는 다양한 패널들로 구성

퀵 액션 : Ctrl+/(윈도우) , Command+/(맥)

---

PART 3 피그마 기본 도구 활용하기

프레임 : 아트보드 역할을 하며, 피그마에서 가장 많이 사용되는 도구 중 하나

<피그마>

디자인 패널에서 데스크톱, 태블릿 PC, 휴대폰과 같은 다양한 장치에 대해 미리 설정된 크기를 제공

프레임을 중첩해 상용 가능

자신의 크기를 넘어서는 콘텐츠는 클리핑(숨김) 처리 가능

프레임 내부 요소들에 대한 제약 설정 가능

 

프레임 단축키 : F

프레임 이름 변경 : Ctrl+R(윈도우), Command+R(맥)

복제 : Alt 누른 채로 아래로 드래그(윈도우), Option 누른 채로 아래로 드래그(맥)

 

크기 변경시 내부 요소들의 크기와 위치 또한 변경

💡 Ctrl(Command) 누른 채 드래그하면 Constraints 설정 무시하고 프레임 자체의 크기를 조절 가능

 

도형 도구

• Rectangle - 사각형 도구
  • Shape tools에서 ‘Rectangle’ = 단축키 R
  • 그냥 클릭하면 알아서 100X100 크기의 사각형이 자동으로 생성
• Line - 선도구
  • Shape tools에서 ‘Line’ = 단축키 L
  • Stroke 패널에서 시작과 끝 모양을 변경해 다양한 형태의 화살표 그릴 수 있음
  • Shift+L : 화살표가 달린 직선
• Ellipse - 원도구
  • Shape tools에서 ‘Ellipse’ = 단축키 O
  • 그냥 클릭하면 알아서 100X100 크기의 원형이 자동으로 생성
• Polygon - 다각형 도구
  • Shape tools에서 ‘Polygon’
• Star - 별 모양 도구
  • Shape tools에서 ‘Star’
  • 별의 각을 최대 60개까지 설정 가능

 

정렬

• 오브젝트 정렬하기
  • Align left(Alt+A) : 왼쪽으로 정렬
  • Align horizontal centers(Alt+H) : 수평 방향으로 가운데 정렬
  • Align right(Alt+D) : 오른쪽으로 정렬
  • Align top(Alt+W) : 위쪽으로 정렬
  • Align vertical center(Alt+V) : 수직 방향으로 가운데 정렬
  • Align bottom(Alt+S) : 아래쪽으로 정렬

 

• 오브젝트 분배하기
  • Distribute vertical spacing(Control+Option+V) : 오브젝트들의 수직 간격을 동일하게 만듦
  • Distribute horizontal spacing(Control+Option+H) : 오브젝트들의 수평 간격을 동일하게 만듦
• 오브젝트 일정하게 정리하기
  • 바운딩 박스 오른쪽 하단에 나타난 ‘정리’ 아이콘(Control+Option+T) : 무작위로 배치된 오브젝트들의 가로/세로 간격을 모두 일정하게 정리

 

그래프 제작

• 원형 그래프 만들기
  
  • 원형 단축키 O를 눌러 원형을 생성
  • Shift + X 를 눌러 면과 선을 전환
  • 해당 원의 불투명도를 20%로 낮추기
  • Ctrl + D를 눌러 원형을 복제
  • 숫자 키패드 0 : 불투명도 100%로 변경
  • 숫자 키패드 5 : 불투명도 50%로 변경
  • 선택, Ctrl + Alt + G : 프레임으로 묶기

 

아이콘 제작

• 여러 가지 아이콘 디자인하기
  • 아이콘 가이드 생성

 

• 원형을 선택한 상태에서 Enter키 : 오브젝트의 패스와 기준점이 표시되는 백터 편집 모드로 전환
• 패스 단축키 P : 펜 도구
• 마우스 오른쪽 버튼 클릭 후 Outline stroke(Ctrl + Shift + O) : 외곽선 추출

❓ 맥 트랙패드로 마우스 오른쪽 버튼 클릭이 안됨. 외곽선 추출이 안된다고 생각 (p.82)

❗ 오른쪽 버튼 클릭 없이 Command + Shift + O 누르면 외곽선 추출 가능

 

•  홈 아이콘 만들기Esc : 편집 모드 해제
  • Enter : 편집 모드 실행
  • Esc : 편집 모드 해제

 

Outline stroke와 Flatten의 차이점

• Outline stroke “외곽선 추출하기”
  • 선을 면으로 변환하는 역할, 오브젝트의 외곽선을 추출해 패스를 새롭게 설정하는 기능
  • 주로 선으로 그려진 아이콘을 면으로 변경하거나 텍스트의 형태대로 오브젝트를 만들 때 사용
  • 단축키 (Ctrl + Shift + O)
• Flatten “레이어 병합하기”
  • 여러 개의 레이어를 하나의 레이어로 통합, 동시에 벡터 정보를 초기화
  • 레이어가 하나로 합쳐지는 경우 최상위 레이어의 속성을 물려받음
  • 두 직선 선택 후 Ctrl + E : 병합되어 레이어가 하나로 합쳐짐

 

펜 도구

• 곡선 그리기 / 페인트 도구로 공간 나누기

 

글래스모피즘

• 유리 느낌의 반투명 카드 디자인하기
  • Send to back : [
  • Bring to front : ]
  • Gradient 아이콘 : 그라데이션 생성