기획/피그마 스터디

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

ForrestPark 2024. 12. 16. 16:22

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

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

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 입력