Figma는 강력한 디자인 툴로, 컴포넌트(Component)와 스타일(Style)을 활용하면 디자인 시스템을 효율적으로 관리할 수 있습니다. 이를 통해 일관된 UI 디자인을 유지하고, 반복 작업을 줄일 수 있습니다.
1. Figma 컴포넌트(Component) 활용 방법
컴포넌트란?
메인색상이 변경되었다면 어떻게 할까요? 일일이 버튼들을 수정해야 할겁니다. 그런데 컴포넌트를 사용하면 이야기가 달라지죠!
헤더,버튼,리스트, 아이콘과 같이 여러면에 반복적으로 쓰이는 요소들을 컴포넌트로 만들면, 하나의 컴포넌트만 수정해 나머지 요소들에도 한번에 반영할 수 있습니다.
이런 컴포넌트는 재사용 가능한 디자인 요소입니다. 버튼, 카드, 네비게이션 바 등 UI 요소를 컴포넌트로 만들면, 한 번 수정할 때 모든 인스턴스(Instance)에 자동 반영됩니다.
컴포넌트 생성 방법
1. 원하는 디자인 요소를 선택
2. Ctrl + Alt + K (Windows) 또는 Cmd + Option + K (Mac) 를 눌러 컴포넌트로 변환
3. 왼쪽 패널의 Assets 탭에서 생성된 컴포넌트를 확인 가능
마스터 컴포넌트와 인스턴스
- 마스터 컴포넌트 : 최초로 생성된 컴포넌트
- 인스턴스 : 마스터 컴포넌트를 복제할 때 생기는 사본
- 컴포넌트는 리스트페이지를 제작할 때 활용도가 높다.
컴포넌트 인스턴스 활용
- 컴포넌트를 드래그 앤 드롭하여 사용 가능
- 인스턴스(Instance)는 개별 수정 가능, 하지만 기본 속성은 유지
- 부모 컴포넌트가 변경되면 모든 인스턴스에 자동 반영
- 작업예시(처음만나는피그마의 예시)
컴포넌트 오버라이드(Override)
• 인스턴스에서 텍스트, 색상, 크기 등을 개별 수정 가능
• 하지만 레이아웃 변경은 부모 컴포넌트에서 수정해야 전체 반영됨
- 오버라이드 가능(변경가능) : 오토레이아웃, 투명도, 택스트, 색상, 선, 그림자효과
- 오버라이드 불가능(변경불가) : 레어이 정렬, 위치, 크기, 컨스트레이트
Variants(변형) 활용
Figma의 Variants 기능을 사용하면, 하나의 컴포넌트에서 다양한 상태(예: 기본, 호버, 비활성)를 설정할 수 있습니다.
1. 컴포넌트를 선택한 후, 오른쪽 패널에서 Variants 추가
2. 속성(Property) 이름을 정하고, 각 상태별 디자인을 조정
3. 프로토타이핑 시 상태 전환을 쉽게 설정 가능
2. Figma 스타일(Style) 활용 방법
스타일이란?
스타일은 색상, 텍스트, 효과(그림자, 블러 등)를 한 번에 적용할 수 있는 기능입니다.
스타일 종류
• 색상 스타일(Color Styles): 브랜드 컬러, 배경색, 테마 컬러 관리
• 텍스트 스타일(Text Styles): 글꼴, 크기, 줄 간격 등의 타이포그래피 설정
• 효과 스타일(Effect Styles): 그림자, 블러 효과 등을 저장
스타일 적용 방법
1. 디자인 요소를 선택
2. 오른쪽 패널에서 색상, 텍스트 또는 효과 스타일을 설정
3. 스타일을 저장하려면 + 버튼을 클릭하여 이름을 지정 후 저장
4. 이후 다른 요소에서도 해당 스타일을 쉽게 적용 가능
5. 적용예시 (처음만나는피그마의 예시)
스타일 수정 및 업데이트
• 스타일을 수정하면 모든 연결된 요소가 자동으로 업데이트됨
• 스타일을 개별 수정하고 싶다면 Detach Style(스타일 연결 해제) 기능 활용
공유 가능한 스타일 만들기
• 디자인 시스템을 구축할 때 팀원들과 공유하려면, 팀 라이브러리(Team Library)에 스타일을 추가
• 스타일을 공유하면 팀원들이 일관된 디자인을 유지할 수 있음
3. 컴포넌트 & 스타일 활용 팁
1. 디자인 시스템 구축
• 컴포넌트와 스타일을 활용하여 체계적인 디자인 시스템을 구성
• 버튼, 입력창, 아이콘 등 재사용 가능한 요소를 정리
2. 버전 관리 및 문서화
• 컴포넌트와 스타일의 변경 사항을 문서화하여 팀원들과 공유
• Notion, Figma의 커뮤니티 플러그인(Storybook, Zeplin 등) 활용
3. 효율적인 디자인 작업
• 컴포넌트를 활용하면 디자인 변경 시 모든 페이지에서 자동 업데이트
• 스타일을 적용하면 UI 디자인의 일관성을 유지하면서 쉽게 수정 가능
4. 팀 협업 최적화
• Figma의 **팀 라이브러리(Team Library)**를 사용하여 컴포넌트와 스타일을 공유
• **디자인 토큰(Design Tokens)**을 활용하면 개발자와의 협업이 더욱 쉬워짐
Figma의 컴포넌트와 스타일을 적절히 활용하면, 디자인의 일관성을 유지하고 작업 효율성을 극대화할 수 있습니다. 팀원들과 협업할 때도 빠른 피드백과 수정이 가능하며, 디자인 시스템을 체계적으로 관리할 수 있습니다.
Figma를 더 효과적으로 활용하려면, Variants, Auto Layout, 팀 라이브러리 등 추가 기능도 함께 익히는 것이 좋습니다!
