Figma 컴포넌트

 

 

1. 컴포넌트 개념

• 요소를 만든 후 Create Component를 클릭하면 해당 레이어가 컴포넌트로 변환된다.
• 복제한 컴포넌트를 배치한 뒤 속성을 변경하면, 원본(master)과 동일하게 반영된니다.
• 처음 만든 원본은 Master Component, 복제본은 Instance라고 부른다.

특징

• Master에서 속성을 바꾸면 모든 Instance에 적용된다.
• Instance의 속성만 개별적으로 수정할 수도 있으며, 필요할 경우 Reset Instance로 다시 Master와 동일하게 맞출 수 있다.

 

2. 컴포넌트 만들기

 

 

• Auto Layout으로 버튼을 만든 뒤 컴포넌트로 변환하면, Assets → Components에서 바로 불러와 활용할 수 있다.
• 복사해서 붙여 넣어도 되지만, Assets에서 관리하면 훨씬 효율적이다.

 

 

3. Master Component 관리

작업 파일이 많아지면 Master Component를 찾기 어려울 수 있다.

• Instance를 클릭 후 오른쪽 상단의 버튼을 누르면 바로 Master Component 위치로 이동하여 수정할 수 있다.

 

4. 새로운 컴포넌트 만들기

• 기존 컴포넌트를 변형해 새로운 버전을 만들고 싶다면, Instance를 복사한 뒤 Detach Instance를 클릭한다.
• 그러면 독립적인 새 컴포넌트를 만들 수 있습니다.

 

 

5. 실습하기

실제로 프레임을 만들어 Auto Layout을 적용한 뒤,

컴포넌트를 생성 → 복제 → 수정하는 과정을 반복하면서 개념을 익히면 훨씬 빠르게 적응할 수 있다.

 

 

1. 여러 종류의 컴포넌트 만들기

• 버튼, 텍스트 필드, 키보드 레이아웃 등 다양한 컴포넌트를 제작.
• 이미지 영역 컴포넌트는 사이즈가 바뀔 때 라인도 따라가도록 옵션을 꼭 설정하기.

 

 

 

2. Variants로 묶기

• 비슷한 컴포넌트들을 Combine as Variants 기능으로 묶으면, 한 그룹 안에서 다양한 상태를 관리할 수 있다.

 

3. 컴포넌트 활용

• 만들어둔 컴포넌트들을 조합해 와이어프레임을 구성할 수 있다.
• 버튼, 입력 필드, 키보드 등을 조합하면 앱 UI 프로토타입을 빠르게 제작할 수 있다.

 

 

4. 컴포넌트 세부 속성 생성하기

 

4-1. Property 만들기

• 컴포넌트 선택 후 Create property를 클릭.
• 이름(Name)과 값(Value)을 지정하여 속성을 제어할 수 있다.

4-2. 아이콘 버튼 예시

• icon_front, label, icon_back 같은 속성을 만들어 on/off 가능하도록 설정.
• 필요 없는 속성(예: icon_back)은 숨겨서 깔끔하게 관리할 수 있다.

 

4-3. Instance에서 활용하기

• Instance를 사용하면 속성 토글을 통해 아이콘 보이기/숨기기, 텍스트 교체 등이 가능.
• Auto Layout을 적용해 크기와 정렬이 자동으로 맞춰지도록 하면 유지보수가 쉬워진다.

 

👉 레이어를 Hug로 바꿔주니 자동으로 크기 조절이 되긴한다... 어렵다 이거

아무튼! 버튼같은건 이렇게 갖다 쓰면 좋구나.

하다보면 늘겠지.