개발 설계를 위한 피그마 기초 공부/정리본

🖍️ 피그마

: 벡터 기반의 협업 디자인 툴로

• 인터페이스 디자인, 웹 사이트 및 모바일 앱 디자인 등 다양한 디자인 작업에 사용

단축키

• Space + 마우스 당기기 = 페이지 쉽게 옮겨다닐 수 있음, 끌어당기기
• Alt + 마우스 당기기 = 복제
• F = Frame 만들기
• T = Text Layer 만들기
• Shift = 정비율로 만들기
• Ctrl + G = 그룹하기

🖍️ 피그마 페이지, 섹션, 프레임, 레이어 이해하기

Layer(레이어)

: 그래픽을 만들 때 Z축으로 층을 쌓은 앞과 뒤의 개념

• 레이어의 순서를 통해 앞, 뒤 표현이 가능

Frame(프레임)

: 각종 디바이스의 해상도 반영된 작업 영역

프리셋 제공

Section(섹션)

: 여러 프레임을 담을 수 있는 것 = 프레임의 그룹

Page(페이지)

• 하나의 피그마 파일에 여러 페이지로 관리 가능

🖍️ 레이아웃 그리드 설정

• 레이아웃과 그리드 시스템

• 웹과 앱의 다른점

• 그리드 시스템 요소

• 레이아웃 그리드 설정하는 방법

🖍️ 도형과 텍스트로 UI 스타일링

이미지/동영상 넣기

1. 도형 생성
2. Fill 설정

Plugins

• Unsplash - 무료 이미지 제공
• 한글더미

🖍️ 피그마로 작업 공유 및 실시간 협업

• Share 버튼 →

• 대화, 스포트라이트(화면 공유) 기능 있음
• / 누르면 - 실시간 채팅 잠깐 표현 가능

🖍️ 피그마로 에셋 또는 결과물 내보내기

• 코드로 구현할 수 없는 에셋, 그래픽, 아이콘, 배경이미지 같은거 → 내보내기
  • • 해당 요소 선택 → Export
      • PNG - 아이콘
      • JPG - 비트맵 기반의 이미지
      • SVG - 웹/안드로이드
      • PDF - ios
    • Frame을 PDF 저장
      • File → Export Frames to PDF…
      • File → Export : 한방에 내보내기 가능

🖍️ 알아두면 유용한 기능 4가지

1. 텍스트 일괄 변경
   • Edit → Find and Replace
2. 비슷한 항목 빠르게 선택
   • 해당 요소 선택 → Edit → Select All With → ..
3. Multi Editing : 비슷한 프레임이 여러개인 경우, 한 부분을 같이 변경
   • 해당 요소 선택 → Select matching layers
4. History 사용
   • 프로젝트 제목 화살표 → Show version history

🖍️ 피그마 Dev Mode 이해하기

• 핸드오프 : 완성된 디자인을 개발자에게 넘기는 과정
  • 개발자는 디자인의 특정 부분을 선택하고 그 부분의 색상, 폰트, 간격 등의 세부 정보를 쉽게 볼 수 있고, 이를 통해 개발자는 디자인을 정확하게 구현할 수 있음
• 핸드오프 도구 : 개발자들이 디자인을 손쉽게 구현할 수 있도록 설계된 기능

Dev Mode

• </> 버튼 클릭 → Inspect 창에서 사용
• 코드로 변환해주는 Plugin 사용해서 변환
• Figma for VS code라는 Extension을 사용
• 빠르게 코드를 짤 수 있음

🖍️ 프로토타이핑

피그마 Dev Mode 이해하기 - 피그마 강좌 1-10 - YouTube