Figma 입문

Figma 소개와 시작하기 — 실무 디자인 툴의 표준

Figma가 무엇이고 왜 업계 표준이 되었는지 이해한다. 무료 플랜 가입부터 첫 파일 생성, Figma의 핵심 개념인 파일-페이지-프레임 구조를 익히고 이 시리즈의 전체 로드맵을 살펴본다.

인터페이스 완전 정복 — 4개 패널과 모든 도구

Figma 편집 화면의 툴바, 레이어 패널, 디자인 패널, 프로토타입 패널을 완전히 이해한다. 자주 쓰는 단축키와 캔버스 조작법을 익혀 작업 속도를 3배 높이는 방법을 배운다.

프레임과 도형 — UI의 뼈대 만들기

프레임이 Figma의 핵심 단위인 이유를 이해하고, 디바이스 프리셋 활용법, 도형 도구, 불리언 연산, 벡터 편집까지 UI 뼈대를 만드는 모든 기술을 실습한다.

텍스트와 폰트 — 가독성을 결정하는 타이포그래피

Figma의 텍스트 도구와 폰트 설정을 마스터하고, Text Style로 디자인 시스템의 타이포그래피 체계를 구축하는 방법을 실습한다.

색상과 스타일 — 일관된 컬러 시스템 구축

Figma의 색상 피커와 Color Style을 활용해 브랜드 컬러 팔레트를 체계적으로 정의하고, 디자인 전체에 일관된 색상 시스템을 적용하는 방법을 실습한다.

오토 레이아웃 — 반응형 UI를 만드는 핵심 기능

Figma의 핵심 기능 오토 레이아웃(Auto Layout)을 완전히 이해하고, Padding, Gap, Alignment, Resizing 설정으로 콘텐츠가 늘어나도 자동으로 조절되는 반응형 컴포넌트를 만든다.

컴포넌트와 재사용 — 디자인 시스템의 핵심 단위

Figma 컴포넌트(Component)의 Main Component와 Instance 관계를 이해하고, 버튼·카드·입력 필드 등 실무에서 반복 사용하는 UI 요소를 재사용 가능한 컴포넌트로 만든다.

베리언트 — 하나의 컴포넌트로 모든 상태 관리

Figma Variants로 버튼의 Primary/Secondary/Danger 타입, Default/Hover/Pressed/Disabled 상태를 단일 컴포넌트 안에서 통합 관리하는 방법을 배우고, 실무형 버튼 시스템을 완성한다.

프로토타이핑 기초 — 클릭 한 번으로 화면 전환

Figma Prototype 탭을 활용해 화면 간 연결, 전환 애니메이션, 오버레이, 스크롤 동작을 설정하고 클라이언트나 팀에게 실제 앱처럼 보이는 프로토타입을 제작한다.

인터랙션과 애니메이션 — 살아있는 UI 만들기

Figma의 고급 인터랙션 기능인 스크롤 고정(Fix Position), 패럴랙스, After Delay 자동 재생, 변수(Variables)를 활용한 상태 관리로 실제 제품처럼 동작하는 프로토타입을 완성한다.

협업과 코멘트 — 팀과 함께 디자인하기

실무에서 디자이너, 기획자, 개발자가 Figma 안에서 어떻게 소통하는지 배운다. 코멘트 달기, 멀티플레이어 편집, 버전 히스토리, 브랜치, 팀 라이브러리 공유까지 협업의 전체 흐름을 익힌다.

개발자 핸드오프 — 디자인을 코드로 연결하는 마지막 단계

Figma Inspect 탭과 Dev Mode를 활용해 개발자가 필요한 모든 스펙(크기, 색상, 폰트, 간격, CSS 코드)을 정확히 전달하는 방법을 익히고, 실무 핸드오프 체크리스트로 완성도 높은 이관 프로세스를 완성한다.