<aside> 📎

참고 출처

1. Figma Learn — Figma Basics — Figma의 인터페이스와 기본 도구 사용법을 설명한 공식 학습 자료입니다.
2. Create dynamic designs with auto layout — Figma Learn — 오토레이아웃의 방향·간격·리사이징 옵션을 다룬 공식 가이드입니다. </aside>

앞서의 UI 디자인 기초와 와이어프레이밍 레슨에서 '무엇을 그릴지'는 충분히 익혔습니다. 이제부터는 그것을 '어떻게 만들지', 즉 Figma라는 도구 자체를 다루는 단계입니다. 특히 이번 영역의 목표는 한 화면을 예쁨게 그리는 것을 넘어, 수정·재사용·협업이 쉬운 구조로 만드는 것입니다. 그 첫 걸음이 Figma의 기본 인터페이스를 익히고, 반응형 디자인의 핵심인 오토레이아웃을 이해하는 것입니다.

Figma 기본기와 오토레이아웃

Figma와 기본 인터페이스

• 협업 기반 UI/UX 디자인 도구

  • Figma는 웹 브라우저에서 바로 실행되는 클라우드 기반 디자인 도구입니다. 설치 없이 어디서든 작업할 수 있으며, 여러 사람이 동시에 하나의 파일을 편집하는 실시간 협업이 핵심입니다.
  • 와이어프레임부터 최종 디자인, 프로토타입까지 모든 단계를 Figma 하나로 처리할 수 있으며, 개발자와의 협업이 용이해 디자인-개발 커뮤니케이션 비용을 줄입니다.

• 기본 인터페이스 구조

  • 상단 툴바: Move, Frame, Shape, Pen, Text 등 주요 도구와 공유·Present 버튼이 있습니다.
  • 왼쪽 패널: Layers 탭(화면의 모든 레이어를 계층 구조로 표시)과 Assets 탭(컴포넌트·스타일 관리)으로 구성됩니다.
  • 중앙 캔버스: 실제 디자인 작업이 이뤄지는 무한 공간입니다.
  • 오른쪽 패널: 선택한 객체의 위치·크기·색상(Fill)·테두리(Stroke)·효과(Effects) 등 속성을 조정합니다.

• 핵심 도구와 단축키

  • F(Frame): 화면의 영역을 정의하는 컨테이너. 모바일·웹 프리셋이 제공됩니다.
  • R(사각형), O(원), T(텍스트), V(선택/이동), P(펜)이 가장 자주 쓰입니다.
  • 그룹화는 Cmd/Ctrl + G, 해제는 Cmd/Ctrl + Shift + G입니다.

• 레이어 이름 짓기

  • 'Rectangle 123' 같은 기본 이름 대신 'Button / Primary'처럼 의미 있는 이름을 쓰면 협업·유지보수가 쉬워집니다. 슬래시(/)로 계층 구조를 만들 수 있습니다.

  

  

스타일 저장과 재사용

• Color Style과 Text Style

  • 자주 쓰는 색상과 텍스트 설정을 스타일로 저장하면 일관되게 관리할 수 있습니다. 속성 옆의 네 점 아이콘을 클릭하고 'Create style'을 선택합니다.
  • 스타일을 수정하면 해당 스타일을 사용하는 모든 요소가 자동으로 업데이트되어, 다음 레슨에서 배울 디자인 토큰의 기초가 됩니다.

  

오토레이아웃의 개념과 필요성

• 오토레이아웃(Auto Layout)이란?
  • 오토레이아웃은 Figma에서 반응형 디자인을 구현하는 핵심 기능입니다. 프레임 내부의 요소들이 자동으로 정렬되고, 콘텐츠의 양에 따라 크기가 자동 조정됩니다.
  • 수동으로 일일이 위치와 크기를 조정할 필요 없이, 규칙 기반으로 레이아웃이 유지됩니다. 적용은 요소를 선택하고 Shift + A를 누릅니다.
• 레이아웃 방향: Horizontal / Vertical
  • Horizontal: 가로 방향 배치. 내비게이션 바, 버튼 그룹, 태그 리스트에 사용합니다.
  • Vertical: 세로 방향 배치. 리스트 아이템, 카드 스택, 폼 입력 필드에 사용합니다. 모바일 UI는 세로 스크롤이 기본이라 Vertical이 자주 활용됩니다.
• Gap과 Padding
  • Gap: 오토레이아웃 내부 요소들 사이의 간격입니다. 일관성을 위해 8px 단위로 설정하는 것이 일반적입니다.
  • Padding: 프레임 테두리와 내부 콘텐츠 사이의 여백입니다. 상하좌우를 각각 다르게 설정할 수 있습니다.

리사이징 옵션과 중첩 구조