[Unit 2] Figma

Figma

UI디자인 & 프로토타이밍 툴

Figma 특징

• 실시간 협업기능 : 한 화면에서 여러 명의 사람이 동시에 작업가능
• 다양한 환경지원 : 브라우저 기반 프로그램이라서 브라우저만 사용할 수 있으면 어느 환경이든 사용가능
• 자동 저장 및 버전 관리 : 자동 저장기능 제공, 히스토리 기능으로 버전관리 용이
• 다양한 무료폰트 지원 : 구글폰트를 활용할 수 있어 별도 설치 필요없음. 로컬 폰트 사용 가능
• 오토 레이아웃 기능 : 요소들 사이 간격, 정렬에 규칙 부여가능, 유지 가능
• 프로토타이핑 : 간단한 Lo-Fi 수준의 Prototype부터 Hi-Fi Prototype까지 제작 가능
  + 모든 기능이 무료로 제공됨

자주 사용하는 기능 & 단축키

💡단축키

• 복사하기 : Command + C
• 붙여넣기 : Command + V
• 잘라내기 : Command + X
• 복제하기 : Command + D 혹은 Option누른 상태로 드래그
• 여러 요소 동시 선택 : Shift누른 상태로 클릭
• 그룹으로 묶기 : Command + G
• 프레임으로 묶기 : Command + Option + G
• 그룹, 프레임 해제 : Command + Shift + G
• 간격 측정 : 요소를 선택한 상태에서Option누르고 다른 요소에 마우스 올려놓기
  

---

💡오토 레이아웃

• 오토 레이아웃 추가
  • 오토 레이아웃 적용할 요소 선택 ➡️ Shift + A
  • 오토 레이아수 적용할 요소 선택 ➡️Design탭 Auto layout에서 +버튼
• 오토 레이아웃 제거
  • Shift + Option + A
    

---

💡컴포넌트

• 단일 컴포넌트 생성
  컴포넌트로 만들 요소 선택 ➡️Command + Option + K혹은 상단 Create component버튼 클릭
• 컴포넌트 여러개 생성
  컴포넌트로 만들 요소 모두 선택 ➡️ Create component버튼 옆 드롭다운 클릭 ➡️ Create multiple component선택
• 상태를 가진 컴포넌트 생성
  컴포넌트의 상태로 만들 요소 모두 선택 ➡️ Create component버튼 옆 드롭다운 클릭 ➡️ Create component set선택
• 컴포넌트에 상태 추가하기
  상태를 추가할 컴포넌트 선택 ➡️ 화면 우측 Design탭 Properties에서 +버튼 클릭 ➡️Variant선택 ➡️ 컴포넌트 하단에 생긴 보라색 +버튼 눌러 상태 추가
• 컴포넌트의 인스턴스 생성
  • 컴포넌트 복제하기(Command + D 혹은 Option누른 상태로 드래그)
  • 화면 좌측 Assets탭에서 인스턴스 생성할 컴포넌트를 드래그해 화면에 끌어다 놓기

출처, 참조 : codestates