드디어 디자인 시스템 대망의 과정, 베리언츠에 대해서 알아보겠습니다. 베리언츠는 변형체, 변이체라는 말로 '같은 종류으로부터 나와 다른 모습이 된 것'이란 뜻입니다. 즉, 여러 변형을 갖는 디자인을 만들 때 사용하는 기능이라고 할 수 있습니다. 지금부터 이 베리언츠(Variants)에 대해서 알아보겠습니다. 1. 베리언츠란? 피그마에서는 베리언츠는 마스터 컴포넌트로 등록된 컴포넌트들의 묶음을 의미합니다. 이때, 베리언츠 속성으로 '상태'를 컨트롤합니다. 크고 녹색인 버튼을 만들어 주세요! 같은 경우라고 할 수 있어요. 속성의 개수도 여러 개를 설정할 수 있기 때문에 한 개의 컴포넌트가 여러 '상태(status)'를 가질 때 주로 표현합니다. 2-1. 베리언츠 생성하기 이런 베리언츠를 만드려면, 3가지 방..
자 드디어 디자인 시스템의 핵심, 컴포넌트에 대해서 알아보겠습니다. 컴포넌트는 UI의 구성을 저장하여 복제, 변형을 용이하게 하는 기능으로, 마스터(원본)와 인스턴스(복제본) 로 나뉩니다. 이 둘의 상호작용을 얼마나 잘 이해하는지에 따라 디자인 시스템을 원활하게 관리하는 데 영향을 많이 끼치게 됩니다. 지금부터 차근차근 컴포넌트에 대해서 알아보도록 하겠습니다. 1. 마스터 컴포넌트 등록하기 먼저 마스터 컴포넌트는 상단 UI바에서 마스터 컴포넌트 등록 아이콘을 누르거나 Ctrl + Alt + k 로 등록할 수 있습니다. 등록된 마스터 컴포넌트는 레이어 패널 옆의 에셋 패널에서 확인이 가능합니다. 2. 마스터 컴포넌트를 복사해서 인스턴스 만들기 등록된 마스터 컴포넌트를 복제해 보겠습니다. 복제하고 나니 레이..
매번 같은 색상을 일일히 지정하고 수정하는게 상당히 번거로운 작업이 될 수 있는데요. 특히 주요 컬러를 변경하는 경우에는 일일히 수정하는게 힘든 작업이 될 것입니다. 그래서 지난 시간에 진행했던 컬러, 서체와 엘리베이션 규칙, 그리드 스타일을 스타일에 등록하고 수정하고 보완하는 방법에 대해서 다루어보겠습니다. 1. 스타일 지정 먼저 스타일 지정에 대해서 알아보겠습니다. 피그마에서는 4가지의 스타일을 등록할 수 있습니다. 1. 컬러 → 컬러 팔레트 2. 텍스트 → 하이어라키 3. 이펙트 → 엘리베이션 및 인터렉션 규칙 4. 레이아웃 그리드 → 반응형 디자인 이 4가지는 각각 컬러 팔레트, 하이어라키(계층 구조), 엘리베이션 규칙, 반응형 디자인에서 활용됩니다. 그리고 이 스타일들은 전부 그룹을 지정할 수 ..
네...어제는 컬러 편이었고 오늘은 타이포그래피 편입니다. 여기서부터는 기초 상식으로서 알아야 할 것들이 좀 있기 때문에 부득이하게 개념부터 좀 짚는 시간을 가져보았습니다. 디자인 시스템에서 타이포그래피는 무슨 역할을 하고, 어떻게 지정해야 할까요? 역할과 분류, 지정을 위해서 어떤 고민을 해야 할 필요가 있는지 준비해보았습니다. 1. 타이포그래피를 다루는 4가지 요소 : 크기, 무게, 자간, 행간 타이포그래피는 Type(서체) + Graphy (그림,도표,그래프 등)의 활자체를 가지고 그려내는 총체적인 활동을 의미합니다. 서체를 그림처럼 다루면서 효과적으로 활용하는 법을 익혀 나가는 게 매우 중요합니다. 기본적으로 웹이나 앱에서는 크기, 무게, 자간, 행간을 기초로 타이포그래피를 조정하곤 합니다. - ..
