Component란?

Component는 반복되는 UI 요소를 하나의 기준으로 관리하는 기능입니다.

버튼, 카드, 입력창 같은 UI는
같은 형태로 여러 번 사용되는 경우가 많습니다.

이때 Component를 사용하면
하나의 기준(Main Component)을 만들고
여러 곳에서 동일한 UI를 사용할 수 있습니다.

주요 포인트 Top3

01. Main Component(컨트롤 + 알트 + k)

Main Component는 기준이 되는 컴포넌트입니다.

이 컴포넌트를 수정하면 해당 컴포넌트를 사용한 모든 UI가 동일하게 변경됩니다.

버튼 색상이나 크기를 변경하면
모든 버튼 UI가 동일하게 수정됩니다.

02. Instance

Instance는 Main Component를 복사하여 사용하는 요소입니다.

Instance는 기본 구조를 유지하면서
텍스트나 일부 스타일을 개별적으로 수정할 수 있습니다.

03. Component 만드는 방법

피그마에서 컴포넌트를 만드는 방법은 간단합니다.

1. UI 요소 선택
2. Create Component 클릭
3. 단축키 사용

**![이미지]

Mac
Command + Option + K

Windows
Ctrl + Alt + K

이 과정을 통해 선택한 요소가
Main Component로 변환

됩니다.

04. Component 활용 예시

Component는 다양한 UI 제작에 활용됩니다.

버튼 UI

구성 - Rectangle + Text
활용 - 여러 페이지에서 동일한 버튼 사용

카드 UI

구성 - Image + Title + Description
활용 - 상품 카드, 콘텐츠 카드 등

입력 폼

구성 - Label + Input Field
활용 - 로그인, 회원가입 등

이처럼 Component를 활용하면
UI를 일관성 있게 관리할 수 있습니다.

GOYO.’s Tip

Component는 디자인 작업 속도를 크게 높여주는 기능입니다.
버튼, 카드, 입력창 등 반복되는 UI는 컴포넌트로 만들어두면
전체 디자인을 훨씬 효율적으로 관리할 수 있습니다.

마무리

이번 글에서는 피그마에서 반복되는 UI를 효율적으로 관리할 수 있는
Component의 개념과 활용 방법을 정리했습니다.

Component를 활용하면 UI 구조를 체계적으로 관리하고
디자인 작업의 효율을 크게 높일 수 있습니다.