마림바 디자인은 Figma 툴을 사용하고,
Figma의 팀 라이브러리 기능을 활용하여 디자인 시스템을 관리하고 있다.
작년 10월에 Figma에 variants가 추가되었다.
개발 Handoff가 더 유용한, 좀 더 코드적이고 실제로 관리하기도 편하다고 소개를 봤지만 그때는 오픈하고 정신없을 때라 적용하지 않다가
최근에 디자인 일정에 여유가 생겨서
전체적인 디자인 파일 점검 및 디자인 시스템 유지 보수 하면서 variants를 적용했다.
그 과정에서 알게 된 것을 정리해보았다.
기존 Component 사용 vs. 신규 생성
"테스트는 따로 하고, 실제 적용은 무조건 기존 컴포넌트를 combine 해서 만들자"
- 처음에는 베리언트에 대해서 스터디 + 잘못되었을 때 원복 하기 쉽도록 테스트 페이지 만들고 베리언트를 바닥부터 신규로 만듦.
- 생성하고 나서 잘 적용되는지 실제 디자인 파일에 가져다가 사용해봄. 잘 됨. 🤓
처음 테스트 한 컴포넌트들
- 노가다로 하나씩 변경하다 보니 현타가 옴. 핵노가다... 천천히 변경해가고 있었음.
- 많이 사용하지 않는 토글 버튼은 영향도가 적어서 기존 component를 묶어서 새 variants를 만듦.
- 실제 디자인 파일에 똑같이 가져다 쓰려고 보니 이미 다 variants로 바뀌어서 되어있음. 생각해 보면 너무 당연한 건데 생각을 안 함. 🤯 😱 😧
- 처음에 테스트로 만든 것 버리고, 기존 컴포넌트 묶어서 variants로 변경해서 사용. 반 정도 변경한 것 다시 원복. 😩
접기/펴기Figma - Combine variants
기존 컴포넌트를 combine as variants를 사용해서 묶으면 디자인 화면에 자동으로 variants components로 적용.
Nested components 와 Variants
"Variants를 사용할 때는 Nested component를 사용하면 피곤해진다.
디자인 변경이 많을 것 같다면 Nested 사용하지만 웬만하면 Nested 형태로 구성하지 말자."
먼저 네스티드 심볼이란.. (스케치 심볼 = 피그마 컴포넌트, 스케치 쓰다 넘어오니 자꾸 심볼로 쓰게됨..)
- 심볼덕후들은 알겠지만, 심볼안에 심볼을 넣어서 기계적으로 사용할 수 있도록 하는것
- 보통은 아이콘 + 텍스트 등에 사용해서 아이콘을 심볼로 넣으면 그 안에서 쉽게 변경할 수 있도록 많이 씀
(ex, 텍스트, 텍스트_아이콘버튼 같이 사용)
- 메인 컴포넌트 (아래 gif에서는 1번째 버튼)에 필요한 요소들을 넣고, 그걸 복사해서 나머지를 만들면 아래처럼 메인만 변경하면 전체가 적용됨.
좌상단에 있는 버튼이 메인 버튼 컴포넌트고 나머지 버튼들은 메인 버튼을 감싸고 만들어짐.
- 마림바에서는 기존 버튼을 Nested 형태로 구성해두었음. 이렇게 하면 형태가 변경되거나, 마진 값 변경 등 공통 요소 변경에 좋음.
- 위의 삽질을 통해 기존 버튼들을 combine 해서 새 버튼을 만듦
- 본 디자인 파일에 컴포넌트는 변경된 걸로 잘 적용되어 있음.
- 신남.
- 새로 버튼을 추가. STATE로 정의된 Property 값을 변경하니 입력한 텍스트가 사라짐. (text에 overide가 깨짐!!!!!!!!!) 😱😖😫😩😭
- 원래 형태대로 만들면, 메인 컴포넌트는 경우는 텍스트 > 베리언트인데, 서브 컴포넌트들은 텍스트 > 메인 컴포넌트 > 베리언트 로 감싸지게 되는데, 로 되서 구조가 달라서 그런 것으로 파악됨.
(왼) 메인 컴포넌트 : 텍스트가 바로 밑, (오) 서브 컴포넌트 : 메인 컴포넌트만 있고, 텍스트는 그 안에
- 기존 오버라이드를 유지하고, 베리언트 활용을 위해서 구조는 동일하게 만들고, 텍스트 요소는 기존 걸 사용하는 방식으로 수정함.
- 만약 마림바처럼 되어있었다면 아래 순서대로 정리하면 된다.
1) 기존 컴포넌트를 묶어서 variants를 만듦
2) 메인 컴포넌트의 요소들을 묶어서 Frame으로 만듦
3) 서브 컴포넌트들을 detach
4) 개별 컴포넌트에서 텍스트 요소를 기존 걸로 변경
(영상 추가 예정 설명)
모든 components를 variants 적용해야 할까?
"Export 해서 사용하는 Icon 같은 에셋은 Variants로 변경할 필요 없음.
에셋명이 세부적으로 안 나눠지고, 변경해서 장점이 크지 않음. Css로 컨트롤할 필요가 있는 것들만 Variants로 만들자."
- Variants로 변경하다 보니 아이콘도 하나로 묶어서 관리하면 편하지 않을까 해서 아이콘을 몇 개 묶어서 Variants로 만듦.
- Export 테스트해보니, 세부 프로퍼티는 안 보이고 그냥 Variants 명으로 동일하게 됨.
접기/펴기
icon
Variants로 묶고 나면, export가 다 메인 컴포넌트 이름(icon_sns)으로 똑같아짐.
- 그리고 베리언트 장점이 개발과 연계인데, 아이콘 같은 경우는 아이콘 하나별로 속성 하나 지어주는 거니까, 그냥 아이콘만 있는 거랑 차이 없고 괜히 변경하는데 시간만 듦.
- 그러고 나서 좀 찾아봤더니 피그마 가이드 영상에서도 추천하지 않음 (링크 클릭하면 바로 중간 아이콘 내용부터 나옴)
https://youtu.be/mLSFG1IiZZU?t=2231
결론
Variants 사용할 UI 요소
- 버튼, 토글, input 등 익스포트 하지 않는 컴포넌트면서 state가 여러 가지인 경우 사용 용이
Variants 사용해 볼 만한 타이밍
1) 기존에 디자인 시스템을 피그마에서 컴포넌트로 잘 했다면 도전해 볼만함. 무조건 기존 거 묶어서 사용하는 방식으로 만들어야 함.
2) 디자인 초기로 디자인 시스템 구축을 variants 써서 하면 좋을 듯.
- 둘 다 아니라면 시간이 꽤 오래 걸릴 수 있으므로, 고민 필요. 반영 후 디테일한 확인 필요
아쉬운 점
- 실제로 베리언트를 해도 개발에 반영하거나 바로 코드화해서 사용할 수 있는 플러그인은 없음.
- 느낌상 베리언트된 컴포넌트를 선택하면 State 별로 한 번에 CSS 뽑아서 개발 공통 CSS에 활용할 수 있을 줄 알았는데, 여전히 아이템 별로 선택해야 함.
- 베리언트를 추가했다는 건 피그마가 이 방향으로 갈 거라 언젠가는 추가될 것 같긴 한데 현재 (21. 4월)는 안됨.
좋았던 점
- 일단 한번 정리하고 나니 우리가 쓰는 컴포넌트에 대한 구성이 좀 더 이해하기 쉽고, 사용하기 편함.
(예, 마림바 버튼은 사이즈와, 라인/솔리드(컬러)/floting의 구분과 정렬(텍스트에 따라 가변, 고정 너비) 등의 구조로 되어있음을 프로퍼티를 보면 알 수 있음)
- 공통화되어있지 않던 부분들 찾아서 디자인 시스템 정리.
Variants 써서 정리된 버튼 컴포넌트
글. 메이 (디자이너)
온라인 화이트보드 마림바
Marimba 마림바 | 실시간 온라인 화이트보드 협업툴
실시간 협업를 위한 더 쉽고 편리한, 최고의 온라인 화이트보드 협업툴 마림바(Marimba)를 통해 플로우차트, 마인드맵, 조직도, 다이어그램을 지금 바로 무료 체험을 통해 만들어보세요!
www.marimba.team
'디자인툴' 카테고리의 다른 글
| 스케치(Sketch), Adobe XD가 아닌 피그마(Figma)를 선택한 이유 (0) | 2021.04.30 |
|---|
댓글