Figma 사용법

Figma 단축키

Frame : 단축키 F
Text : 단축키 T
Pen : 단축키 P

개체 이동 : 개체 선택 + Shift + 드래그
복사 : 개체 선택 + Option(Alt) + 드래그
이전 동작 반복 : Command(Ctrl) + D
전체 선택 : Command(Ctrl) + A

플러그인 / 기능 검색 : Command(Ctrl) + /

오토 레이아웃 : 개체선택 + Shift + A

폰트 설정

• Figma에서 폰트 스타일을 지정할 때 '/'를 넣으면 각 폰트들을 폴더화시켜서 정렬할 수 있다.
• 와이어 프레임을 구성할 때, 각 UI 별로 같은 폰트를 넣어야 통일성이 살아나고 심플하면서도 난잡하지 않아 보인다.
• 앱에 쓸 폰트들을 구획화 시키고 나면, 모든 텍스트를 생성할 때, 폰트 스타일에서 클릭 한방으로 세팅이 가능하다.

컬러 설정

1. 프레임 설정
2. 구성하고자하는 프레임을 클릭해놓고 단축키 I를 통해 스포이드 기능 활성
3. 쓰고자하는 색을 클릭하여 프레임에 색을 입힌다

아이콘 컴포넌트 등록

• 아이콘은 전체 프레임을 클릭하고 복사할 경우 새로운 인스턴스로 등록이 된다
• 그리고 기존의 컴포넌트들의 세팅을 바꾸면 새롭게 생성된 인스턴스의 세팅도 같이 바뀌게 된다.
• 인스턴스의 세팅을 바꾸면 기존의 컴포넌트는 바뀌지 않는다
• 인스턴스의 세팅을 바꾸고 기존의 컴포넌트를 바꾸면, 인스턴스는 기존의 컴포넌트 세팅을 따라가지 않고 독립적인 컴포넌트로 존재하게 된다.

오토레이아웃 기능 익히기

• 오토레이아웃 설정 : Shift + A
• 세가지 Resizing 차이점 확실히 알기
  • Fixed width & height
  • Hug contents
  • Fill Containers