figma에 의한 디자인 시스템 구축 사례 및 개념 정의

YouTube 연정's figma에 연재 중인 Figma 강좌의 다음 주제가 디자인 시스템 구축을 위한 스타일링과 컴포넌트 구축이기 때문에 figma에 의한 디자인 시스템 구축 사례와 디자인 시스템과 관련된 개념을 정리해 보았습니다. 

 

이미지 출처:  https://www.designsystems.com/

 

 

디자인 시스템이라는 단어 정의가  어디서부터 누구로부터 시작되었는지는 모르나, 스마트폰이 세상 밖으로 나온 뒤의 구글(Google) 머터리얼 디자인 가이드가 디자인 시스템의 첫 인상이었고, 그 머터리얼 가이드는 2019년부터 저에겐 Web, Mobile에 대한 UI/UX 표준 가이드가 되었습니다. 

 

이미지 출처 -  https://material.io/design

 

---

figma에 의한 디자인 시스템 구축 사례

 

1) Design Systems for Figma 

피그마로 제작된 디자인 시스템을 모아놓은 웹 서비스
44개 이상의 디자인 시스템이 등록됨

아래 링크를 통해 Figma로 제작된 디자인 시스템에 관한 상세 내용확인이 가능합니다.

Design Systems For Figma

 

이미지 출처: https://www.designsystemsforfigma.com/

 

 

2) Figma Commuity

• figma 관련 다양한 샘플 파일 제공
• 아래 링크로 접속하여 확인 가능

Figma

---

관련 참고 링크

figma community 특정 파일을 내 계정의 문서로 복제하는 방법

Figma Kits 샘플 모음 #ux #figma #wireframe

Figma - Primer Primitives | Primer Primitives is a foundational library containing color, type, and layout styles used across...

 

---

 

디자인 시스템 정의

 

디자인 시스템이란

사용자의 일관된 경험 설계를 위한 디자인 설계 문서

• UI(User Interface) 가이드라인 - 컬러, 폰트, 버튼, 공통 UI 패턴(컴포넌트) 등에 대한 정의 문서
• UX(User Experience) 가이드라인 - 인터렉션
• 끊임없이 변화하고 진화하는 디자인의 기준을 만들어 전체적인 정의를 규정해 주는 것
• 디자이너, 엔지니어, 비즈니스 매니저가 프로덕트를 만들기 위해 활용하는 기본 디자인 규칙
• UX/UI 가이드, 엔지니어링 솔루션 그리고 비즈니스 관점이 모두 담겨야 한다.

 

디자인 시스템이 필요한 이유

• 디자인 결과물에 대한 논리적 근거
• 1개 이상의 프로덕트에 일관성있는 사용성 부여
• 하나의 방향성을 가지고 협업하고자 할 때
• 불필요한 커뮤니케이션 비용을 줄이기 위해
• 하지 말아야 할 것에 대한 규정 가이드가 필요

 

디자인 시스템의 장점

• 제작자 입장 - 업무 효율성 향상, 불필요한 커뮤니케이선 비용 감소
• 디자이너 입장 - 일관성 있는 경험 설계
• 사용자 - 한 브렌드 제품에 대한 일관성 있는 사용자 경험
• 새로운 멤버가 투입되어도 프로젝트에 빠르게 적응할 수 있는 기회 제공

 

디자인 시스템의 단점

• 창의성 및 유연성 상실 우려
• 처음부터 완벽한 디자인 시스템은 없기 때문에 체계적으로 구축하는데 많은 시간이 소요 

 

그 외 디자인 시스템 구축 해외 및 국내 사례 

* 아래 디자인 시스템 구축 사례 내용은 figma와 무관합니다. 디자인 시스템 구축 대표 사례 3개를 소개합니다. 

해외 - airbnb.design 

Building a Visual Language

해외 - Atalssian Design System

Atlassian Design System

국내 - 토스 플랫폼 디자인 시스템

 

디자인 시스템 구축 5단계

• 1단계: 프로젝트의 목표, 기간, 멤버, 주 사용자(타깃) 정하기
• 2단계: 긴급성, 중요도, 빈도수를 기준으로 프로젝트 우선순위 정하기
• 3단계: 리서치(벤치마킹, UI 디자인 패턴 파악, 사용자 행동 패턴 등의 전체 구조 파악)
• 4단계: 디자인
• 5단계: 전달(Post Delivery)

* 구축 5단계 내용 출처: 2020 Coloso 온라인 Conference - 디자인 시스템 구축 by 박세환 

---

 

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

 

이미지 출처 https://material.io/components/dialogs#alert-dialog

 

 

• 색상의 개수를 간소화
• 범용적 가이드라인을 주고 응용 여부 선을 명확하게 협의 필요
• 할 수 있다 없다를 명확하게 가이드 제시 필요
• 개발자와 지속적인 커뮤니케이션 필요 
• 처음부터 개발자들을 참여시키고 개발 스펙 범위를 초반에 정의
• 업무 효율성을 위한 개발 프레임워크 및 라이브러리 사전 조사 및 연구 필요
• 긴급성, 중요도, 빈도수를 기준으로 우선순위를 선별하고 지속적으로 개선 필요.

"내 서비스와 환경에 맞는 디자인 시스템을 선택하되, 그대로 사용하지 말고 내 환경에 맞게 응용할 수 있는 디자이너가 되기를! "
by 2020 Coloso 온라인 Conference 정다영

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

---

Figma로 디자인 시스템 구축 시 장점

Figma - @figma

• Team Library(팀 라이브러리) 기능을 통해 유지보수 및 관리가 편리
• Version Histroy를 통해 버전 관리가 편리
• 실시간 공유로 협업 시 불필요한 커뮤니케이션 비용을 줄일 수 있다. 
• 최적화된 컴포넌트 시스템 & 컬러 및 폰트 시스템

"시장의 빠른 변화에 대한 적용, 사용자 피드백에 대한 신속한 대응
필요에 따라 효과적인 협업을 위해 피그마를 디자인 시스템 도구로 사용함."

by 2019 Future Conference 이상인

 

[디자인 시스템 포스팅 - 주요 참고 자료]

• PXD 스토리 : 디자인 가이드/디자인 시스템은 왜 필요한가 {출처 링크}
• 머터리얼 디자인 시스템 {링크 바로가기}
• 2020 Coloso 온라인 Conference - 디자인 시스템 구축 by 정다영, 박세환
• 2019 Future Conference - by 이상인

 

---

연정's figma - Youtube 채널

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

2021/08/10 업데이트된 영상입니다