Figma 협업 툴 사용 시 기억해두면 좋은 것들 정리

Figma는 팀 단위로 UI 디자인을 진행할 때 매우 유용한 협업 툴입니다.
아래는 Figma를 사용하면서 자주 쓰는 단축키, 객체 편집, Auto Layout, Constraint 등을 정리한 내용입니다.
필요할 때마다 참고하라고 정리해두었습니다.

1. ⌨️ 기본 단축키

• 단축키 모음 보기: Ctrl + Shift + ?
• 화면 이동(핸드 툴): Space 키 누른 상태로 드래그
• 커서 모드: v
• 직사각형(Rectangle) 생성: r
• 직선(Line) 생성: l
• 화살표(Arrow) 생성: Shift + l
• 프레임(Frame) 생성: f
• 멀티커서 ON/OFF: Ctrl + Alt + \
• 코멘트(Comment) 남기기: c
• 코멘트(Comment) 전체 ON/OFF: Shift + c
• 텍스트(Text) 생성: t

2. 📋 객체 복제 및 이동

• 객체 복제
  • Ctrl + d
  • 객체를 드래그하면서 Alt 키를 누르고 이동
• 객체 간 간격 확인
  • 객체 선택 후 Shift 키를 누르면 보라색 안내선이 나타나 간격을 확인 가능

3. 📝 객체 속성(Property) 복사 & 붙여넣기

• 객체 속성 복사: Ctrl + Alt + c
• 객체 속성 붙여넣기: Ctrl + Alt + v

4. 🔲 Frame과 Group

• Frame으로 감싸기: Ctrl + Alt + g
• 그룹(Group) 만들기: Ctrl + g
• Frame과 Group은 실제로 동작이 다르므로 각각 만들어보면서 차이를 체험해보세요!

5. 🖼️ 이미지·동영상 가져오기

• 이미지/동영상 삽입: Ctrl + Shift + k

6. 🔗 도형 합치기와 해제

• Union(하나로 합치기): 여러 객체를 선택 후 상단 Boolean 연산 중 “Union” 선택
• Ungroup(풀기): 객체 선택 후 마우스 우클릭 → Ungroup

7. ⚙️ Constraint

• Constraint는 프레임 안에 있는 객체가 프레임 크기 변화에 따라 어떻게 반응할지를 결정하는 설정입니다.
• 프레임 내부 객체를 선택하면 오른쪽 패널에서 Constraint 옵션을 설정할 수 있습니다.

8. ✏️ Outline Stroke

• 도형의 선을 개별 객체로 변환하는 기능입니다.
• 크기 조정(Scale) 시 선 자체를 독립적으로 다루고 싶을 때 유용하게 사용합니다.

9. ↔️ Auto Layout

• Auto Layout 단축키: Shift + a
• Auto Layout은 말 그대로 자동으로 객체들을 배치해주는 기능입니다.
  • 부모 프레임에 Auto Layout을 적용하면 내부 요소들이 일정한 간격, 정렬, 방향으로 배치됩니다.
  • 내부 객체가 ‘Fill’인지 ‘Hug’인지에 따라 사이즈가 달라지고, 반응형 디자인에서 유용하게 사용할 수 있습니다.

Auto Layout vs. Constraint

기능	설명	예시
Constraint	부모 프레임(상위 계층)이 기존 레이아웃을 가지고 있을 때, 내부 객체가 프레임 변경에 어떻게 반응할지 설정	프레임 크기를 줄이거나 늘렸을 때, 내부 요소를 상하좌우 고정 등으로 배치
Auto Layout	해당 객체가 직접 부모가 되어 내부 요소를 자동으로 배치 및 사이즈를 조절	콘텐츠 목록, 버튼 그룹 배치 등 동적으로 변화가 필요한 경우에 사용

---

10. 📏 Hug vs. Fill Container

Auto Layout을 사용할 때, 내부 객체의 크기 조정 방식이 크게 두 가지로 나뉩니다.

옵션	동작 방식	사용 예시
Hug Contents	객체 내부 내용(예: 텍스트)에 맞게 자동으로 크기 조정	텍스트 버튼처럼 가변적인 요소에 활용
Fill Container	부모(Frame) 크기에 맞춰 자동으로 확장·축소	반응형 레이아웃, 화면 크기에 맞춰 조절

• Hug Contents: 내부 콘텐츠의 길이에 따라 버튼 너비가 달라지는 것처럼, 컨텐츠가 늘어나면 자동으로 크기가 확장됨
• Fill Container: 부모 프레임의 너비가 늘어나면 내부 요소도 함께 늘어남

⭐ 마치며

Figma는 UI/UX 디자인을 효율적으로 진행할 수 있게 도와주는 훌륭한 협업 툴입니다.
위에서 살펴본 단축키와 기능들은 가장 자주 쓰이면서도, 익혀두면 작업 속도와 품질을 크게 높여줄 수 있습니다.
=> 저는 이러한 기능을 user diagram 및 모델 순서도 를 그릴때 사용해볼려고 합니다. 사실 그것 때문에 배우는 것이기도 하고요!

ppt로 하는것은 너무 힘들고 지치더라고요 ㅠㅠ 그래서 figma로 간단한 기능이랑 단축키만 알아보고 실무를 접하면서 그때그때 모르는 것은 배우는 식으로 해야겠어요ㅎㅎ