서비스 기획 및 개발 시 중요한 것들 중 하나는 디자인의 일관성을 유지하는 것이다.
일관성 유지 및 워크 프로세스를 위한 다양하고 효율적인 피그마의 기능을 배워보았다!
피그마 디자인 시스템
피그마의 디자인 시스템의 종류는 4가지로 style, components, variant, variable이 있다.
스타일
색상, 텍스트, 효과, 그리드에 대한 스타일을 만들어 디자인 전체에 적용하는 것이다.
로컬 스타일은 현재 피그마 파일에 존재하는 스타일을 의미하며 피그마 디자인 파일 내 우측 패널에서 적용 가능하다.
우리가 일반적으로 도형을 꾸미는 때 사용하는 것을 말한다!
variant 베리언츠
변형의 의미인 베리언츠는 설정을 통해 디자인을 다르게 할 수 있지만 일관성된 디자인을 유지할 수 있다.
위 이미지와 같이 이미 양식이 있는 디자인을 선택해서 사용할 수 있다.
디자인의 양식을 만들어 놓는다면 위 이미지의 왼쪽과 같이 디자인의 스타일, 상태, 아이콘 유무를 정해놓은 양식대로 바꿀 수 있다.
그러므로 디자인의 일관성을 유지할 수 있으며 동시에 업무 효율성이 증대할 수 있는 것이다.
variable 베리어블
variable은 디자인 토큰과도 같은 역할을 하는데, 디자인 변수를 정하는 것이다.
예를 들어, 빨간색을 hex로 'FF000'이라고 부른다.
매번 FF000이라고 부를 수 없으니 'pointColor-red' 라고 이름을 부여하는 것이다.
배경에 깔리는 색이 hex로 따로 존재하지만 이를 background-grey라고 부르고 사용하는 것이다.
위 이미지에서는 피그마의 디자인인데,
서비스 내에서 주로 사용하는 색에 color-text-primary와 같이 명칭을 부여하였다.
베리어블은 컬러, 숫자, 텍스트 내용, boolean 값을 정할 수 있다.
components 컴포넌트
컴포넌트는 재사용이 가능할 수 있게 만들어 놓은 요소이다.
특히, 프로젝트 전체에서 일관된 디자인을 만들고 관리하는 것에 큰 도움이 된다.
상단 툴 바 중앙(다이아몬드 아이콘)을 누르면 컴포넌트를 만들 수 있다.
메인 컴포넌트를 복사하면 인스턴스로 복제된다.
위 이미지에서 메인 컴포넌트는 색칠된 다이아몬드 표시가 함께 있는 도형인 Ellipse 90이라는 이름을 가지고 있고, 이는 메인 컴포넌트이다.
메인 컴포넌트를 복제한다면 비어있는 다이아몬드 표시가 함께 있는 도형인 Ellipse 91 - 92이라는 이름을 가지고 있고, 이는 인스턴스들이다.
즉, 인스턴스는 재사용할 수 있는 컴포넌트의 복사본으로 메인 컴포넌트에 연결되어 컴포넌트의 디자인이 바뀐다면 인스턴스도 함께 업데이트된다.
일일이 모든 요소들을 바꾸지 않아도 메인 컴포넌트 디자인을 바꾼다면 복제한 모든 인스턴스에 적용되는 것이다.
위 예시처럼 인스턴스는 메인 컴포넌트의 속성을 똑같이 복제한다.
인스턴스
오버라이드
만약 메인 컴포넌트가 아닌 복제한 인스턴스를 변경한다면 그것이 오버라이드이다.
인스턴스 수정 후 메인 컴포넌트 수정한다면 오버라이드된 인스턴스를 제외한 인스턴스만 수정된다.
위 이미지에서 우측 하단에 있는 인스턴스의 크기를 변경하였다.
이미지를 통해 확인할 수 있듯이 오버라이드한 인스턴스는 메인 컴포넌트와 크기에 관련해서 연동이 끊겼기 때문에 메인 컴포넌트에서 크기 수정 시 해당 인스턴스의 크기는 달라지지 않는다.
마찬가지로 텍스트가 다른 인스턴스(Bu)는 메인 컴포넌트의 텍스트에 해당하는 연동이 끊겼기 때문에 메인 컴포넌트에서 텍스트를 변경하였을 때 메인 컴포넌트의 속성을 따라갈 수 없다.
그렇다면 만약 수정한 인스턴스이 마음에 든다면 메인 컴포넌트에 적용할 수 있을까?
그렇다면 수정한 인스턴스를 우클릭하여 'Main component' 메뉴를 찾고 'Push changes to mai component'를 클릭해주면 된다.
라이브러리
위에서의 컴포넌트 개념을 계속 생각해보자.
라이브러리는 팀 라이브러리를 사용하여 파일과 프로젝트 간에 컴포넌트와 스타일을 공유할 수 있다.
이 또한 디자인 일관성에 도움을 줄 수 있다.
라이브러리를 이용하기 위해서는 퍼블리싱이 필요하다.
퍼블리싱은 다른 프로젝트, 파일에서 컴포넌트를 사용할 수 있도록 발간하는 의미와 같다.
만약 위 이미지처럼 '새싹 피그마 3일차'에서 Publish를 한다면
이렇게 다른 파일에서 'Add to file'을 통해 퍼블리싱한 컴포넌트를 가져올 수 있다.
만약 디자인한 파일에서 (메인 컴포넌트가 존재하는 파일) 디자인을 수정했다면 다른 파일에서도 수정된 디자인을 동일하게 변경할 것인지 물어본다.
위 이미지처럼 변경사항이 있을 경우 '1 change'라고 알림이 뜬다.
수정되었기 때문에 다시 Publish해야 하며, 다시 퍼블리싱을 한다면
라이브러리를 가져온 파일에서 메인 컴포넌트와 같이 변경사항을 변경할 것이냐고 물어본 뒤 업데이트가 가능하다.
피그마의 디자인 시스템인 컴포넌트 등을 배워보니 프론트 개발 시 배웠던 컴포넌트, 메인 컬러 명칭 부여 등 개발과 정말 많이 맞닿아있다고 생각하였다. 기획 측면에서 이러한 피그마 기능은 심화학습일지도 모르지만 개발을 배워두니 디자인 일관성, 명칭 일관성 등 개발팀과 디자인팀과의 협업에서 정말 중요한 요소라는 것을 깨달았다... 실무에서 개발 과정을 생각하며 쉽게 적용할 수 있을 것 같다..!
역시 배워서 남주진 않는다!
'UX 디자인' 카테고리의 다른 글
| [데이터 드리븐 서비스 기획] 데이터 드리븐 UX (1) | 2023.12.01 |
|---|---|
| [UX] 클론 디자인 프로젝트 - CGV 기능 개선 (1) | 2023.11.30 |
| [UX] 피그마 프로토타입 (0) | 2023.11.28 |
| [UX] 피그마의 이해 (0) | 2023.11.27 |
| 데이터 수집 및 분석을 위한 엑셀 (1) | 2023.11.23 |