Figma

UI/UX 업계에서 가장 인기있는 툴.

특징

1. 실시간 협업 가능
   한 화면에서 여러 명의 사람이 동시에 작업할 수 있는 기능을 제공한다.
2. 다양한 환경 지원
   웹 브라우저 기반 프로그램이기 때문에 어떤 환경에서든 사용 가능하다. 필요하다면 프로그램을 설치해서 사용할 수 있다.
3. 자동 저장 및 버전 관리
   자동 저장 기능 제공. 누가 언제 무엇을 변경했는지 확인할 수 있는 히스토리 기능이 있다.
4. 다양한 무료 폰트 지원
   폰트를 별도로 설치할 필요 없다. 구글 폰트 이외에도 로컬 폰트를 불러와 사용 가능.
5. 오토 레이아웃 가능
   오토 레이아웃 기능으로 요소들의 간격과 정렬에 규칙 부여 가능하다.
6. 프로토타이핑
   프로토타입 기능으로 높은 수준의 프로토타입까지 제작할 수 있다.

자주 사용하는 기능

GNB

네비게이션 바에서 Prototype 탭에서 onClick으로 각 페이지를 연결할 수 있다.

Modal

1. 모달 열기 버튼에 Prototype에서 onClick 설정을 한다.
2. Open overlay 설정과 연결할 Frame을 연결한다.
3. 연결된 Frame에서 모달 닫기 버튼에 똑같이 Close overlay 설정을 해준다.

이외에도 간단한 설정 체크만으로도,
연결된 Frame 밖을 눌러도 모달창이 꺼지게 할 수 있고
모달 창 밖 배경화면 색도 설정할 수 있다.

Toggle

이 토글 스위치는 on, off 상태를 만들어야 할 것이다.

1. Default 상태를 컴포넌트로 만든다.
2. 컴포넌트에서 Variant를 추가한다.
3. 이 Variant를 off 상태인 컴포넌트를 만든다.
4. Prototype 탭에서 onClick으로 각 상태를 연결한다.

Tab

이것도 Toggle처럼 만들면 된다.
세가지의 상태를 만들면 된다.

Carousel

회전목마처럼 넘길 수 있다.

1. 넘길 이미지들을 서로 붙인다.
2. 그 이미지들을 Frame으로 묶는다.
3. Frame을 첫 이미지 크기로 만든다.
4. 넘길 이미지의 개수만큼 그 Frame을 복사한다.
5. 각 Frame에서 각 이미지를 드래그로 설정한다.(Design 탭에서 Clip content를 체크하면 그 Frame 만큼 해당 이미지만 볼 수 있다.)
6. 각 프레임들을 묶어서 Component set으로 만든다.
7. 각 프레임들의 Prototype 설정을 한다.

마지막으로

막연했다. 막상하고 보니 더 깊게 알아보고 싶기도 하다.
프로젝트 단에서 사용해보고 싶긴하다. 하지만 할 일이 더 늘어난거 같기도 하다.
만드는 일에 집중하기 보다는 어떻게 사용되는지만 보는게 좋을 수도 있겠다.