피그마 뽀사기3. 컴포넌트 활용하여 디자인 시스템 구축
피린이 탈출기원 프로젝트
안녕하세요 피그마 뽀사기 3번째 시간입니다.
이 전에는 오토레이아웃을 사용해 보았는데요
오토레이아웃 끝판인 다음 포스트를 작성하기 전에,
정말 초간단하지만 UI 디자인을 할 때 너모너모 유용하게 쓰일 수 있는 컴포넌트 작업을 진행해 보겠습니다.
컴포넌트란?
컴포넌트는 재사용이 가능한 최소의 단위입니다.
UI/UX 디자인을 하다보면 지속적으로 사용하는 요소들이 많이있어 복사하여 붙여넣기를 많이 하게됩니다.
이 때, 반복적으로 사용되는 요소나 화면들을 컴포넌트로 제작하여 편리하게 바로 꺼내쓸 수 있습니다.
그리고 많은 요소들을 컴포넌트화 하게되면 편집이 획기적으로 용이하여 효율을 극대화 시켜줍니다.
의도치 않게 수정되는 것을 방지하기 위해 마스터 컴포넌트는 별도로 관리하고 디자인은 인스턴스를 사용하는 것이 좋습니다.
컴포넌트명을 UI/Button/Color/Primary 형식으로 적으면 /를 기준으로 폴더가 생성되어 나중에 Assets창에서 찾기 쉽습니다.
오토레이아웃, 투명도, 텍스트, 색상, 선 그림자는 인스턴스로 수정이 가능하지만 레이어 정렬 위치, 크기, 컨스트레인트는 수정이 불가능하다.
컴포넌트 만들기
요소를 선택한 뒤 마우스 우클릭하여 CreateCompornent 를 클릭하거나
단축키인 Ctrl + Alt + K 를 눌러 컴포넌트를 만들어줍니다.
컴포넌트 종류
마스터 컴포넌트 : 가장 처음에 만들어진 컴포넌트 원본
인스턴스 컴포턴트 : 마스터 컴포넌트를 복사한 컴포넌트들
Variants [베어리언츠] 만들기
1. 변수에 따른 설정을 해주고 싶은 컴포넌트를 2개 이상 선택합니다. (예를들어 지금 주목도에 따른 Primary와 Secondary를 나누기 위해 Type으로 종류를 구분하고 각 버튼의 상태를 표현하기 위해 Status로 변수를 정했습니다.)
2. 각 변수에 맞춰서 컴포넌트를 만들고 컴포넌트로 모두 선택하고 오른쪽 패널에서 Combined as variant로 묶어줍니다.
Status에서 변수가 두가지일 때 이름에 On/Off 혹은 True/False를 붙여서 설정하면 피그마에서 Boolean Value로 인식하여 해당 Property는 토글 버튼으로 끄고 켤 수 있습니다.
Variants[베어리언츠] 속성 추가하기
베리언츠를 선택한 뒤 오른쪽 패널의 더보기 아이콘을 눌러 속성을 관리할 수 있습니다.
베리언츠나 프로퍼티를 추가할 수 있고 새 값을 추가한 뒤 Variant 내부의 컴포넌트의 위치를 정리 정돈합니다.
컴포넌트들의 묶음 Alt + 드래그를 통해 밖으로 꺼내서 사용 가능합니다.
마우스 우클릭 - Property를 통해 원하는 프레임의 컴포넌트를 가져와 사용 가능합니다.
컴포넌트 해제하기
Option + Command + B
Ctrl + Alt + B
오른쪽 마우스 클릭 > Detach instance
Detach instance란? : 메인 컴포넌트와의 연결 해제하는 기능입니다.
단축키 한눈에 보기
Option + Command + K
Ctrl + Alt +K
컴포넌트 영역을 지나칠 때 요소들이 프레임안으로 들어갈 때
컴포넌트는 기본적으로 프레임으로 구성이 되어있어 드래그로 오브젝트 이동 시 프레임 안으로 빨려들어 갑니다.
프레임 위에 다른 오브젝트를 겹쳐 올려야 하는 상황이라면,
오브젝트를 선택하고 스페이스바를 누르고 옮기면 프레임 위로 오브젝트를 위치 시킬 수 있습니다.
스페이스바를 먼저 누른 후 오브젝트를 클릭하면 핸드툴이 선택되니, 오브젝트 선택 후 스페이스바를 누른 뒤 드래그 하시길 바랍니다.
두번째는 프레임 근처에 오브젝트를 가져간 뒤, 방향키로 이동하면 프레임안에 들어가지 않습니다.
Shift를 누른뒤 방향키로 옮기시면 10px씩 이동을 하게됩니다.
자, 이제 공부한 내용을 바탕으로 예제를 만들어 볼까요?
컴포넌트를 활용하여 유용하게 쓰일만한 토글버튼과 라디오버튼을 만들어보겠습니다.
레고레고레~
토글버튼 제작
토글버튼을 활성, 비활성 2가지로 만들어준다.
2. 토글버튼을 각각의 컴포넌트로 등록을한다. [toggle/off] [toggle/on]
3. 컴포넌트를 모두 선택한 뒤 Combine as Variant 버튼을 눌러 묶어준다.
4. 만든 컴포넌트를 에셋패널에서 드래그하여 가지고와서 사용한다. State를 스위치버튼으로 켰다,껐다 할 수 있다.
라디오버튼 제작
1. 라디오버튼을 활성, 비활성 2가지로 만들어준다.
2. 라디오버튼을 각각의 컴포넌트로 등록을한다. [checkbox/off] [checkbox/on]
3. 컴포넌트를 모두 선택한 뒤 Combine as Variant 버튼을 눌러 묶어준다.
4. 만든 컴포넌트를 에셋패널에서 드래그하여 가지고와서 사용한다.
State에서 라디오버튼을 On/Off 할 수 있다.
