Figma 🎨

2016년 9월에 출시된 UI 디자인&프로토타이밍 툴로, 출시 이후 꾸준히 점유율을 높여가다가 지금은 UI/UX 업계에서 가장 인기 있는 툴이다.

Figma의 특징

1. 실시간 협업 가능

• Figma는 한 화면에서 여러 명의 사람이 동시에 작업할 수 있는 기능을 제공한다.
• 실시간으로 피드백이 가능하며 비대면으로 협업할 수 있다.

2. 다양한 환경 지원

• Figma는 웹 브라우저 기반 프로그램으로 어떠한 환경이든 상관없이 가능하다.
• 필요에 따라 프로글매을 직접 설치하여 사용할 수 있으나 사이트내에서도 충분하다.

3. 자동 저장 및 버전 관리

• Figma는 따로 저장할 필요없이 자동으로 저장을 해준다.
• 누가 언제 무엇을 변경했는지 확인할 수도 있어 관리에 유용하다.

4. 다양한 무료 폰트 지원

• 구글 폰트를 활용할 수 있어 폰트를 별도로 설치할 필요가 없다.
• 구글 폰트 이외에 폰트를 사용하고자 할 때에는 사용자 PC에 저장된 로컬 폰트를 불러와서 사용 가능하다.

5. 오토 레이아웃 기능

• Figma의 오토 레이아웃 기능을 사용하면 요소들 사이의 간격과 정렬에 규칙을 부여할 수 있고, 크기가 변하더라도 부여한 규칙에 맞게 유지할 수 있다.

6. 프로토타이핑

• 간단한 Lo-Fi 수준의 프로토타입부터 실제 화면과 거의 흡사한 Hi-Fi 수준의 프로토타입까지 제작할 수 있다.

Figma 기본 사용 방법

- 화면 이동 -> 스페이스 바 + 마우스 드래그 
- 화면 확대/축소 -> cmd + 마우스 휠 / ctrl + 마우스 휠 
- 뒤돌아가기 -> ctrl + z 
- 삭제하기 -> delete 
- 복사하기 -> cmd + c / ctrl + c
- 붙여넣기 -> cmd + v / ctrl + v
- 잘라내기 -> cmd + x / ctrl + x
- 복제하기 -> cmd + d / ctrl + d
- 여러 요소 동시에 선택하기 -> shift 누른 상태로 클릭
- 그룹으로 묶기 -> cmd + g / ctrl + g

- 오토 레이아웃 추가하기 -> 마우스로 드래그 한 후 shift + A
- 오토 레이아웃 제거하기 -> Alt+Shift+A
- 컴포넌트 만들기 -> Ctrl+Alt+K
- 인스턴스 분리하기 -> Ctrl+Alt+B

---

📖 과제 1 - Figma 컴포넌트 구현하기

1. GNB (Global Navigation Bar)

• 각 항목을 클릭했을 때 적절한 페이지가 표시되어야 한다.
• 어떤 항목이 선택되어 있는지 알 수 있어야 한다.
• 어느 페이지에 있든 항상 동일한 위치에 있어야 한다.

각각의 페이지로 연결시켜 해당 페이지가 보이도록 프로토타입을 설정해주었다.

2. Modal

• 모달 열기 버튼을 클릭하면 모달 창이 오버레이 되어야 한다.
• 모달 닫기 버튼이나 모달 바깥 영역을 클릭하면 모달 창이 닫혀야 한다.

모달 확인하기 버튼과 모달 내용이 뜨는 창을 각각 컴포넌트로 만들어 주었다.

모달 확인하기 버튼을 눌렀을 경우 모달 내용 창이 오버레이 되게 연결해준다.(open overlay)

모달 내용 창이 떠있는 상태에서 확인 버튼을 눌렀을 경우 다시 원래대로 돌아간다. (close overlay)

3. Toggle

• 토글을 클릭하면, On, Off 상태가 바뀌어야 한다.
• On 상태인지 Off 상태인지 직관적으로 알 수 있어야 한다.

On과 Off의 상태를 나타낼 것을 만들고 컴포넌트로 묶어 서로 연결해준다.

추가적으로 Smart animate를 지정해주어 부드럽게 이어지도록 하였다.

4. Tab

• 각 탭을 클릭했을 때 해당 탭에 맞는 내용이 표시되어야 한다.
• 어떤 탭이 선택되어 있는지 직관적으로 알 수 있어야 한다.

먼저 Tab1, Tab2, Tab3를 만들어 준다.

그리고 각각의 Tab을 눌렀을 경우 해당 페이지가 보이게 연결한다.

5. Accordion

• 아코디언이 접힌 상태에서 버튼을 클릭하면 컴포넌트가 펼쳐져야 한다.
• 아코디언이 펼쳐진 상태에서 버튼을 클릭하면 컴포넌트가 접혀야 한다.
• 아코디언이 펼쳐진 상태일 때 숨겨져있던 내용이 표시되어야 한다.
• 아코디언이 접힌 상태인지 펼쳐진 상태인지 직관적으로 알 수 있어야 한다.

닫혔을 경우와 펼쳐진 경우, 2개를 만들고 따로 1개씩 컴포넌트를 준 다음, combine as variants로 하나로 합쳐준다.

---

🔥 오늘 학습을 마치고 나서,

처음으로 만들어보고 실행해 보는 툴이라 그런지 처음에는 많은 어려움을 느꼈다.
갑자기 사막에 던져진 상태였다. 페어 분의 도움을 받고 다른 동기분들의 도움을 받으며 천천히 하나씩 해보니 성공했다.. 도와주신 분들에게 감사를 표합니다.
어드밴스는 구현하지 못하였다.. 시간적 여유가 있을 때 해보려고 한다.