# [피그마] 피그마 기본 연습 #01

---

📌 본 포스팅은 피그마로 스토리보드를 만들고 서비스를 기획하는 내용을 다룹니다.
📌 [참고] 살전 피그마(도서)

---

• 피그마는 개발-디자이너가 소통하는 캔버스이지 문서작성이 본질이 아님.

1. 피그마란 ?

피그마는 서비스 기획 캔버스이다.

• 벡터 그래픽 기반 디자인 툴, 도형 편집, 다양한 해상도 디자인 작업 수행, 오토레이아웃, 공통요소 동시 통제(컴포넌트)) 기능
• 팀라이브러리 기능으로 일관된 디자인 시스템 유지
• 다양한 플러그인 생태계, 자동 히스토리(수정내역) 백업

1.1.비트맵과 벡터방식의 이해

• 비트맵 해상도(너비와 높이의 픽셀 수), 백터방식( 공식으로 이루어진 데이터) 해상도에 영향없음, 확장성 있음.
• 피그마는 벡터 방식 그래픽 표현, 깨지지 않음.
• 화면 모니터 (1920*1080), 태블릿(834*1194), 스마트폰 (390*844)
• 픽셀 밀도 : PPI(1인치당 픽셀수 ), DPI(1인치당 도트수)
• Scale factor(배수) : 다양한 배율로 에셋을 내보냄.(@1x , @2x, @3x, SVG(Scalabel Vector graphic))
• 물리적, 논리적 해상도 :
  • 물리 : 실제 기기 보유 픽셀 수
  • 논리 : 디자인 기준 픽셀 (논리 = 물리 / 배율)
    => 피그마 디자인시 논리적 해상도(1배수)를 기준으로 한다. (일관성, 확장성, 파일최적화)

2. 기본 실습

2.1 로컬 폰트 사용

• 피그마홈페이지 -> 메뉴-> product -> downloads
  (account -> fonts -> download installer )
• 피그마 드래프트: 파일과 페이지 제한 없는 개인 작업공간

2.2 좌측사이드바( Layers, Asset) 에셋 패널은 컴포넌트와 라이브러리 관리

• opt+1, opt+2 (왼쪽 사이드 탭 )
• cmd + shift + \ : 양 사이드 바 숨김,
• layer tab
  1. '+' 클릭 : 새 페이지 만들기 (각페이지는 url 가짐. max 3page, draft 는 무한)
  2. 섹션, 프레임, 그룹, 컴포넌트, 이미지, 비디오 각각 고유 아이콘으로 생성. 더블클릭->해당오브젝트이동
• Asset 탭
  1. 파일에서 이용가능 컴포넌트, 라이브러리 관리

2.3 우측 사이드바( Design, Prototype)

• 탭전환 단축키 :
  1. opt+8 , opt+9 (오른쪽 사이드탭 )

2.3 오브젝트 이동 단위 8배수로 변경

1. 방항키 : 도형 1px 만큼 이동
2. shift 방향기 : 도형 10px 만큼 이동
3. cmd 방향키 : 도형 크기를 1px 만큼 변경
4. cmd+shift 방향키 : 도형의 크기를 10px 만큼 변경

• main menu icon -> preference -> nudge amount -> 8 입력