Figma

Figma 컴포넌트로 디자인 시스템 만들기

Basic15기본 사용법

Figma 컴포넌트를 사용하면 버튼·카드·헤더 같은 반복 요소를 한 번 만들고 수백 곳에서 재사용할 수 있습니다. 하나를 수정하면 모든 곳이 자동으로 업데이트돼요.

Figma 열기

figma.com

STEP 1 / 4
1

STEP 1. 컴포넌트 만들기

figma.com
Figma
최근 항목
즐겨찾기
내 초안
공유된 항목
+ 새 디자인 파일
최근 항목
UI 디자인 시스템
수정됨 1일 전
랜딩페이지 v2
수정됨 1일 전
모바일 앱 프로토타입
수정됨 1일 전

디자인 요소 그룹 선택 → 우클릭 → Create component → 보라색 아이콘 확인

버튼, 카드 등 반복해서 사용할 디자인 요소를 만듭니다. 해당 레이어 또는 그룹을 선택합니다. 오른쪽 클릭 → 'Create component'를 선택하거나 단축키 Mac Cmd+Alt+K / Windows Ctrl+Alt+K를 누릅니다. 레이어 패널에서 해당 요소가 보라색 컴포넌트 아이콘으로 변경되면 성공입니다. 이 원본 컴포넌트를 'Main Component(마스터 컴포넌트)'라고 합니다.

컴포넌트를 별도의 'Components' 페이지에 모아두면 나중에 관리하기 편합니다. 왼쪽 하단 '+' 페이지 추가 버튼으로 새 페이지를 만드세요.

이 단계를 완료했나요?