Figma 완전 정복 — 기능별 상세 가이드

도구 알아보기약 15분주제 6개

Figma는 웹 기반 UI/UX 디자인 협업 툴입니다. 디자이너가 화면을 설계하고, 개발자가 CSS 코드를 추출하고, 기획자가 실시간으로 피드백을 남기는 모든 과정이 하나의 툴에서 이뤄집니다.

살펴보기

1 / 6

Frame 생성, 도형, 텍스트, 레이어 기초

Frame (프레임) vs ArtboardFigma에서 화면 1개 = Frame. F 단축키로 생성하거나 오른쪽 사이드바에서 기기 프리셋(iPhone 14, Desktop 등)을 선택합니다. Frame 안에 모든 디자인 요소가 들어갑니다.
Terminal
```
# 자주 쓰는 단축키
F        # Frame 도구
R        # Rectangle (사각형)
T        # Text (텍스트)
V        # 선택 도구
Ctrl+G   # Group (그룹)
Ctrl+C / V  # 복사/붙여넣기
Ctrl+D   # 복제
Space+드래그  # 캔버스 이동
```
레이어 패널왼쪽 패널이 레이어 구조. Photoshop의 레이어와 동일한 개념. 요소를 그룹으로 묶어 관리합니다. 레이어 이름은 명확하게 지어야 개발자 전달 시 혼란이 없습니다. Ctrl+클릭으로 복수 선택, 드래그로 순서 변경.
오른쪽 사이드바 — 속성 패널선택한 요소의 크기(W/H), 위치(X/Y), 색상, 테두리, 그림자, 불투명도를 설정합니다. Auto Layout 버튼으로 Flexbox 레이아웃 적용 가능.

자주 하는 실수 2가지

1레이어 이름을 Rectangle 23, Group 15처럼 기본값 그대로 사용 → 개발자·팀원 혼란 — 컴포넌트명은 Button/Primary, 화면은 Login Screen처럼 의미 있게
2모든 요소를 그룹으로 묶고 Auto Layout 사용 안 함 → 반응형 디자인 불가 — 버튼·카드는 Auto Layout 필수로 감싸기

Figma 실제 화면 보기