[Figma] 기초적인 Figma 정리

팀프로젝트의 첫 단계, ui 설계를 위해 피그마를 배우기로 했다.

udemy의 웹디자인 강의를 결제해두었는데 이제 정말 들을 때가 되었다.

기초 기능을 다루는 방법을 정리하며 강의를 들어야겠다.

 

1. 프레임 (단축키 f)

- 화면 크기 정하기 (아이폰, 데스크탑 등등, 또는 개인설정 가능)

- 프레임 안에 2개 이상의 도형을 하나의 그룹으로 만들기 위해서는 command+g 또는 shift 누르고 클릭

- 그룹을 해제하기 위해서는 shift+command+g

- 프레임 안 오브젝트에 제약조건을 추가할 경우 프레임의 변화와 관계 없이 그대로 있음

 

2. 기본 도형

- 직사각형(R), 라인(L), 화살표(shift+L), 원(o), 다각형, 별, 펜툴(p)

- shift를 누를 경우 정사각형, 8방향의 라인, 타원이 아닌 원 등을 그릴 수 있음

- shift를 누르고 드래그할 경우 복사가 됨

- 도형 사이의 불리언 선택으로 2개 이상의 도형을 합치거나 빼거나 등등 새로운 도형을 만들 수 있음

 

3. 제약 조건

- 프레임 안의 도형에 대해서만 적용이 됨

- 다양한 제약 조건에 따라 프레임 크기 조정 시 도형 위치가 고정되거나 크기가 변경됨

 

4. Auto layout(shift+a)

- 프레임을 오토 레이아웃으로 설정할 경우 여백이 자동으로 설정됨

- 도형을 추가할 경우 자동으로 프레임이 변형됨

- 반응성에 뛰어남

- 화살표 키나 드래그를 이용하여 프레임 위치를 쉽게 바꿀 수 있음