피그마 기초 - 컴포넌트의 개념

 

9월 업데이트 - Figma 컴포넌트 관련 업데이트

피그마 기초 3 - 컴포넌트 & Variant 기능 #버튼컴포넌트 https://youtu.be/lMOJ1ijO9hs

아래 내용은 업데이트 예정인 피그마 기초 강좌 Part 4 - 디자인 시스템 구축을 위한 컴포넌트의 이해를 돕기 위한 글입니다. {연정's Figma YouTube 채널}

1) 플랫폼에서의 컴포넌트 {Components}

컴포넌트 - "두 번 이상 반복적으로 사용될 디자인 에셋 또는 패턴"

구글의 Material Deisign 사이트(https://material.io/components)의 아래 예시처럼 Data Tables, Date Pickers, Dialogs 등과 같이 두 번 이상   반복으로 사용될 에셋이라는 목적으로 만듭니다. 사용 빈도에 따라 컴포넌트를 만들지 말지 여부를 결정하게 됩니다.  버튼도 컴포넌트에 해당됩니다. 

 

 

 

 

자주 사용되는 디자인 요소들에 대하여 컴포넌트 화하여 불필요한 반복을 줄이고 유지보수의 수고를 최소화할 수 있습니다.

---

 

디자인 시스템 구축 시 유의사항

• Web : 개발 프레임워크에 사용된 라이브러리가 무엇인지 즉 Material Design System 기반 인지, Bootstrap 기반 인지 여부에 따라 달라질 수 있습니다.
• Mobile  : Android는 Material Design Guideline을, ios의 경우 Human Interface Guidelins를 준수합니다. 
• 즉 플랫폼이 무엇인지 여부에 따라, 사용될 UI 라이브러리가 무엇인지에 따라 컴포넌트 기반의 Design System 제작이 필요합니다.
• 수정과 유지보수가 편리하도록 구조화
• 추후 개발 리스크를 줄이기 위해서는 개발에 사용될 UI 라이브러리가 무엇인지 사전 조사 및 연구가 필요

디자인 시스템 구축 Tip

컴포넌트를 제작할 때 해당 개발 플랫폼에 따라 가이드를 참고하는 것을 권장드립니다. 가이드를 준수했는지 여부에 따라 개발 기간의 시간이 길어질 수도 짧아질 수도 있으니 가이드를 숙지하는 것은 무척 중요

 

컴포넌트 라이브러리 예시

Material Design

(위) Material Design Components

 

Alerts

(위) Bootstrap 4 Componets Guidelines

 

Human Interface Guidelines - Design - Apple Developer

(위) Apple의 Human Inerface Guidelines

 

 

* 추천글 

컴포넌트

정보정리 : UI디자인과 프레임워크 / 라이브러리

 

 

 

2) Figma에서 말하는 컴포넌트 - 컴포넌트 기능

Figma에서 말하는 컴포넌트는 위에서 말한 그 기본 개념을 기반으로 만든 컴포넌트 기능입니다.  

컴포넌트 단축키{Create Component} : option(alt) + Command(Ctrl) + K입니다

 

 

 

 

---

 

추천 영상 - 피그마의 핵심 기능 2탄

효율 UI 디자인을 위한 컴포넌트 기능

 

[Figma 컴포넌트] 인스턴스 속성을 Reset 하는 방법

 

---

연정's figma - Youtube 채널

구독과 좋아요는 힘이 됩니다. 

연정's Figma