[Figma] - Figma 개념 / Figma 컴포넌트 구현해보기!

이번주는 새로운 section에 들어가 한 주동안 재귀,UI/UX, Figma 를 학습하였다. 어제는 Figma 를 공부했는데 튜토리얼 해보고 할만하다고 생각했는데 페어분이랑 과제를 하면서 멘붕이 왔다.... 어떤 부분이 부족한지 찾아보고 개념을 정리하면서 Figma랑 좀 더 친해져야될 것 같다. 🔥

---

https://heinafantasy.com/162

Figma란?

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

코드스테이츠 수업 자료 참고

Figma 는 웹 기반 UI 도구

피그마의 가장 큰 특징(장점이기도 함)이라고 불리는 부분은 윈도우, 맥, 웹 브라우저 어디서에서 접근이 가능하다는 점이다. 웹 기반 프로그램으로 별도 앱 설치를 하지 않아도 되기 때문에 활용 범위가 넓다. 피그마 계정을 소유하고 있는 사람이 링크를 공유하면 여러 명이 한꺼번에 실시간으로 작업 상황 확인이 가능한다. 실시간 협업 프로그램(편집 권한까지 설정해주면 동시 작업도 가능)으로 최고다. 

 

 

Figma 특징

1. 실시간 협업 기능

Figma는 한 화면에서 여러 명의 사람이 동시에 작업할 수 있는 기능을 제공한다. 이러한 기능은 비대면 협업의 중요성이 높아지면서 Figma를 더욱 매력적인 툴로 만들었다.

 

2. 다양한 환경 지원

Figma는 웹 브라우저 기반 프로그램이기 때문에 브라우저만 사용할 수 있다면 어떤 환경에서든 사용이 가능하다. Mac, Window, Linux 등 다양한 OS 환경은 기기도 가리지 않습니다. 필요에 따라 프로그램을 직접 설치해서 사용할 수 있다.

 

3. 자동 저장 및 버전 관리

Figma는 자동 저장 기능을 제공합니다. 그리고 누가 언제 무엇을 변경했는지 확인할 수 있는 히스토리 기능도 있어 버전 관리에도 유리하다.

 

4. 다양한 무료 폰트 지원

Figma는 구글 폰트를 활용할 수 있어 폰트를 별도로 설치할 필요가 없고, 폰트가 없어서 화면이 깨지는 현상도 발생하지 않는다. 또한, 구글 폰트 이외에도 사용자 PC에 저장된 로컬 폰트를 불러와서 사용할 수 있다.

 

5. 오토 레이아웃 기능

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

 

6. 프로토타이핑

Figma에서 제공하는 프로토타입 기능을 활용하면 간단한 Lo-Fi 수준의 프로토타입부터 실제 화면과 거의 흡사한 Hi-Fi 수준의 프로토타입까지 제작할 수 있다.

 

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

기본 단축키

• 복사하기 : 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는 이 외에도 다양한 단축키를 제공합니다. Figma 화면에서 Control + Shift + ? 를 누르면 사용 가능한 모든 단축키를 확인하실 수 있다.

• Command 키가 아니라 Control 키입니다. 헷갈릴 수 있으니 주의

 

Figma 컴포넌트 구현하기

 

페어분이랑 열심히 했는데 GNB부분에서 항목을 클릭을 했을때 밑에 바가 나와야하는데 더블클릭을 해야지만 밑에 바가 나온다....

모달이랑 토글 부분은 완성하였는데 탭, 아코디언, 드롭다운, 자동완성은 하지 못했다. 탭부분에서 마우스를 올려놨을때 hover 되는 부분을 이해를 하지못해 해결하는 방법을 못하여 우왕좌왕 했던 것 같다. 다음주에 Figma 클론에 들어가기전 주말에는 무조건 완성을 해봐야될 것 같다.