🔍 Figma

가장 인기 있는 UI 디자인 & 프로토타이핑 툴로, 실시간 협업, 다양한 환경 지원, 자동 저장 및 버전 관리, 다양한 무료 폰트 지원, 오토 레이아웃 기능, 프로토타이핑 기능이 특징이다.

튜토리얼

• Scroll 효과 주기
  
  
  해당 페이지 클릭 -> prototype 탭 -> Overflow scrolling
  
  단, scroll 효과를 주고 싶지 않은 요소가 있다면
  해당 요소 클릭 -> Design 탭 -> Constraints: Fix position when scrolling 체크

• 클릭했을 때 Page 전환 효과 주기
  
  클릭 했을 때 page가 전환되는 요소 클릭 -> Prototype 탭 -> 요소에 원 모양 생성됨 -> 이동할 page로 끌어서 연결

• Animation 효과 주기
  
  Prototype 탭 -> Interactions: Animation에서 선택 적용 가능(Desolve, Move-in 등)

• Frame안의 다른 요소 가로 스크롤 적용
  
  해당 요소 선택 -> 마우스 오른쪽 버튼 클릭: Frame selection 선택하여 Frame 씌우기 -> 좌측에서 카드들 모두 선택 -> Design 탭 Constraints: 위, 왼 고정하여 안의 있는 요소들을 움직이지 않도록 고정하기 -> frame 크기 키워서 overflow되도록 만들기 -> Prototype 탭 -> Overflow: Horizontal scrolling

• scroll 시, 여백 추가
  
  frame에 도형 추가 -> 좌측에서 해당도형을 frame안에 끌어와 적용하기 -> 도형 마우스 오른 클릭: send to back -> 배경색 변경 -> 적당한 여백 설정(카드를 화면 중앙에 배치 후, 양 옆 여백이 얼마나 나오는 지 확인(alt)한 후 그 값을 적용하면 된다.)

• Header와 같은 요소는 component화 시켜서 관리, 적용한다
  
  최상단-가운데 첫 번째 버튼 클릭해 해당 요소를 component화 시킨다 -> assets에서 확인 및 적용 가능 -> shift+alt 혹은 Assets탭에서 drag해와 instance 생성 가능
  
  여러 instance가 있을 때, 해당 component만 변경하면 모든 instance에 적용되어 변경된다.

• Page 전환이 아닌 오버레이 interaction 적용하여 페이지 여닫힘 구현
  
  요소 선택 -> Ptototype 탭: interactions - open overley 선택 후, 다음 frame 연결 -> 다음 frame에서는 같은 요소에 close overlay 적용

• 캐러셀 슬라이드 적용
  
  적용할 이미지들을 붙여서 frame으로 묶기 -> 각 이미지들이 움직이지 않도록 Constraints: 위, 왼 고정 -> frame 크기 조정(Design 탭에서 clip content 선택 시, frame 상에서 어떤 이미지가 뜨는 지 확인 가능) -> 하단 Navigation bar 만들고 component화-> shift+alt 누른 상태에서 component를 drag하여 instance 생성 -> frame을 원하는 만큼 복제 -> 각 프레임안의 instance 변경 -> 각 프레임안의 이미지 변경(drag하여 변경) -> 모든 프레임을 선택 -> Component 생성 버튼의 dropdown: create component set 선택하여 하나의 component안에 여러개의 상태가 있는 component를 만듬 -> 각 component 클릭 하여 prototype 탭: interactions - After delay 선택 및 Change to - 변경할 component 선택 (component가 시간이 흐르면 자동으로 상태가 바뀌도록 이벤트 설정) -> shift+alt 누른 채 drag하여 instance 생성 후, 적당한 위치에 배치한다. -> component의 모든 상태를 선택 -> prototype 탭: interactions: delay 시간 조정 및 Animation - smart animate 선택 - 전환 시간 조정(애니메이션 효과 및 딜레이 시간 조정) -> 수동으로 적용하고 싶다면, 화살표 버튼 요소 클릭 후 변경할 상태로 각각 연결해준다.

• 이미 있는 component에서 상태 만들기
  
  해당 component 클릭 -> Design 탭: properties - variant -> 플러스 버튼 눌러서 상태 생성

등등... 다양하게 응용할 수 있으니 필요할 때 찾아서 해야겠다.

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

기본 단축키

• 복사하기 : 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 탭에서 인스턴스를 생성할 컴포넌트를 드래그하여 화면에 끌어다놓기

Figma 화면에서 Control + Shift + ? 를 누르면 사용 가능한 모든 단축키를 확인할 수 있다.

Reference: 코드스테이츠