지난 포스팅에서는 구글 스프레드시트 플러그인을 사용해서 디자인을 생성하는 법에 대해서 다루었습니다. 오늘은 조금 더 구체적으로 '뭐라고 입력해야 할지'에 대해서 다루어 보겠습니다. 구글 스프레드시트로 어디까지 피그마의 요소들을 조절할 수 있을까요? 하나하나 살펴보겠습니다. 1. 기본값 : 텍스트, 이미지, 베리언츠 먼저 지난 포스팅에서 사용해 봤던 이미지, 텍스트 값을 입력하는 법에 대해서 다루어 보겠습니다. 텍스트 레이어 : 텍스트 레이어의 내용을 입력합니다. 일반적인 텍스트 레이어 설정 시에 주로 사용됩니다. 이미지 : http:// 또는 https:// URL에서 데이터를 받아 해당 레이어의 배경 fill 속성으로 적용합니다. * 단, 벡터 레이어에만 적용됩니다. 텍스트, 프레임, 컴포넌트에는 적용..
피그마에서는 다양한 플러그인을 지원합니다. 플러그인을 통해서 더 편하게 디자인을 할 수 있어요. 이번 편에서는 구글 스프레드 시트를 사용해서 자동으로 디자인이 생성되도록(!) 만드는 방법에 대해서 이야기해보겠습니다. 1. 플러그인 설치 더보기 Google Sheets Sync | Figma Community Figma Community plugin - Sync content from Google Sheets directly into your Figma file. This is not an official plugin created by Google • It is simply created with ❤️ by David Williames If you want to support the continued d..
드디어 디자인 시스템 대망의 과정, 베리언츠에 대해서 알아보겠습니다. 베리언츠는 변형체, 변이체라는 말로 '같은 종류으로부터 나와 다른 모습이 된 것'이란 뜻입니다. 즉, 여러 변형을 갖는 디자인을 만들 때 사용하는 기능이라고 할 수 있습니다. 지금부터 이 베리언츠(Variants)에 대해서 알아보겠습니다. 1. 베리언츠란? 피그마에서는 베리언츠는 마스터 컴포넌트로 등록된 컴포넌트들의 묶음을 의미합니다. 이때, 베리언츠 속성으로 '상태'를 컨트롤합니다. 크고 녹색인 버튼을 만들어 주세요! 같은 경우라고 할 수 있어요. 속성의 개수도 여러 개를 설정할 수 있기 때문에 한 개의 컴포넌트가 여러 '상태(status)'를 가질 때 주로 표현합니다. 2-1. 베리언츠 생성하기 이런 베리언츠를 만드려면, 3가지 방..
지난 시간에 배운 컴포넌트에 이어서 이번에는 컴포넌트의 다양한 확장을 만드는 컴포넌트 프로퍼티 기능을 준비했습니다. 설명 필요 없이 바로 진행 들어가겠습니다...! 1. 컴포넌트 프로퍼티란? 마스터(원본)에 하위 레이어의 종류와 출력 여부,텍스트를 조정할 수 있도록 속성으로 등록하는 기능을 말합니다. 텍스트, 레이어 출력 여부, 인스턴스 전환 기능 세가지 속성을 조정해서 다양한 조합의 인스턴스를 손쉽게 조정할 수 있습니다. 2. 컴포넌트 프로퍼티 등록하기 프로퍼티를 생성하는 방법은 두 가지가 있습니다. 첫번째는 프로퍼티를 마스터 컴포넌트에서 생성하는 것이고, 두번째는 하위 레이어에서 연결될 컴포넌트 프로퍼티를 생성하여 등록하는 방법입니다. 한 개의 컴포넌트 프로퍼티에 여러 레이어를 연결 지을 수도 있고,..
자 드디어 디자인 시스템의 핵심, 컴포넌트에 대해서 알아보겠습니다. 컴포넌트는 UI의 구성을 저장하여 복제, 변형을 용이하게 하는 기능으로, 마스터(원본)와 인스턴스(복제본) 로 나뉩니다. 이 둘의 상호작용을 얼마나 잘 이해하는지에 따라 디자인 시스템을 원활하게 관리하는 데 영향을 많이 끼치게 됩니다. 지금부터 차근차근 컴포넌트에 대해서 알아보도록 하겠습니다. 1. 마스터 컴포넌트 등록하기 먼저 마스터 컴포넌트는 상단 UI바에서 마스터 컴포넌트 등록 아이콘을 누르거나 Ctrl + Alt + k 로 등록할 수 있습니다. 등록된 마스터 컴포넌트는 레이어 패널 옆의 에셋 패널에서 확인이 가능합니다. 2. 마스터 컴포넌트를 복사해서 인스턴스 만들기 등록된 마스터 컴포넌트를 복제해 보겠습니다. 복제하고 나니 레이..
매번 같은 색상을 일일히 지정하고 수정하는게 상당히 번거로운 작업이 될 수 있는데요. 특히 주요 컬러를 변경하는 경우에는 일일히 수정하는게 힘든 작업이 될 것입니다. 그래서 지난 시간에 진행했던 컬러, 서체와 엘리베이션 규칙, 그리드 스타일을 스타일에 등록하고 수정하고 보완하는 방법에 대해서 다루어보겠습니다. 1. 스타일 지정 먼저 스타일 지정에 대해서 알아보겠습니다. 피그마에서는 4가지의 스타일을 등록할 수 있습니다. 1. 컬러 → 컬러 팔레트 2. 텍스트 → 하이어라키 3. 이펙트 → 엘리베이션 및 인터렉션 규칙 4. 레이아웃 그리드 → 반응형 디자인 이 4가지는 각각 컬러 팔레트, 하이어라키(계층 구조), 엘리베이션 규칙, 반응형 디자인에서 활용됩니다. 그리고 이 스타일들은 전부 그룹을 지정할 수 ..
네...어제는 컬러 편이었고 오늘은 타이포그래피 편입니다. 여기서부터는 기초 상식으로서 알아야 할 것들이 좀 있기 때문에 부득이하게 개념부터 좀 짚는 시간을 가져보았습니다. 디자인 시스템에서 타이포그래피는 무슨 역할을 하고, 어떻게 지정해야 할까요? 역할과 분류, 지정을 위해서 어떤 고민을 해야 할 필요가 있는지 준비해보았습니다. 1. 타이포그래피를 다루는 4가지 요소 : 크기, 무게, 자간, 행간 타이포그래피는 Type(서체) + Graphy (그림,도표,그래프 등)의 활자체를 가지고 그려내는 총체적인 활동을 의미합니다. 서체를 그림처럼 다루면서 효과적으로 활용하는 법을 익혀 나가는 게 매우 중요합니다. 기본적으로 웹이나 앱에서는 크기, 무게, 자간, 행간을 기초로 타이포그래피를 조정하곤 합니다. - ..
디자인을 하기 전에, 컬러를 어떻게 고르고 사용할지에 대해서 고민하시는 분들을 위해서 준비해봤습니다. 컬러.. 어렵습니다. 접근 방식도 이해하는 것도 쉽지 않은데요. 제 나름대로 컬러를 접근할 때 사용하는 방법론을 몇 가지 들고와 보았습니다. 도움이 되셨으면 좋겠습니다. 0. 🎨컬러의 이해 : 색상의 기준 3가지 색상(Hue) , 채도(Saturation), 명도(Brightness) 컬러는 기본적으로 색상, 명도, 채도로 분류됩니다. 색상은 말 그대로 "색의 종류"를 나타내고, 명도는 "색상의 밝기" 채도는 "색상의 순도"를 나타냅니다. 이 세 가지 요소를 조절해서 색을 만들 수 있는데요. 이렇게 조절해서 만든 색상을 "톤(Tone)"이라고 합니다. 톤의 분류 톤은 일반적으로 12개의 톤으로 구성됩니다..
지난 시간에 배웠던 오토레이아웃 써 보니 어떠셨나요? 분명히 쓰기 힘들고, 불편한 지점이 많다고 생각하시는 분들도 많을 겁니다. 특히 자동 배치 규칙을 적용하지 말아야 할 순간도 있죠. 그래서 오늘은 오토 레이아웃을 벗어난 요소를 지정하는 독립 포지셔닝 기능에 대해서 알아보겠습니다. 1. 독립 포지셔닝(Absolute Positioning) 원래 오토레이아웃을 상위 프레임 요소에 사용하게 되면, 하위 요소들의 위치는 무조건 규칙에 따라 배열됩니다. 예전에는 이 부분을 새 프레임을 적용해서 씌운 채로 만드는 경우가 많아 레이어 수 때문에 과한 디자인 형식이 될 때가 많았습니다. 수정하기도 어려웠구요. 그러나 독립 포지셔닝 기능을 사용하면 오토 레이아웃에 적용되지 않는 요소를 만들 수 있기 때문에, 원하는 ..
불리언 요소를 딱 고정시켜서 변동되지 않도록 만들고 싶거나, 텍스트를 깨트리고 선 효과 위에 계속해서 선 효과를 덧대보고 싶은 경우에 사용할 수 있는 팁을 조금 가져왔습니다. 별거 아니기는 하지만, 아트웤에 있어서는 중요한 점인데요. 지금부터 압축하기(Flatten) & 윤곽선 만들기(Outline Stroke), 시작해보겠습니다~ 1. 압축하기(Flatten)의 사용 Flatten은 납작하게 또는 평평하게 하기 라는 뜻으로, 사용하면 1개의 벡터 레이어로 바뀌는 기능입니다. 일러스트레이터에선 확장(Expand)기능과 매우 유사한데요. 다만 현재 보이는 대로만 만들어주고, 선은 확장시키지 않습니다. 획(stroke) 기능은 여전히 동작합니다. 2. 압축하기(Flatten)의 응용 저는 대체로 아래의 요소..
지난 시간에는 오토 레이아웃을 어떻게 설정해야 하는지에 대해서 알아봤습니다. 오늘은 조금 더 실전에서 오토 레이아웃을 다루어 보는 시간을 준비했습니다. 자동으로 간격과 여백을 설정하는 기능에 대해서 알아보고 고급 레이아웃 설정 패널에서 오토 레이아웃의 여러 설정도 바꿔 보면서 차근차근 기능을 이해해 보시길 바랍니다. 그럼 출발하겠습니다 ㅎㅎ 1. 패딩과 간격 설정하기 1-1) 패딩(Padding) 오토 레이아웃에서는 패딩과 간격을 간단하게 설정해 줄 수 있다. 여기서 패딩은 오토 레이아웃이 적용된 프레임이 감싸고 있는 영역 안쪽에 "내부 여백(Padding)"을 추가하는 기능이다. 이는 웹에서의 "박스모델"과 같은 형태이기 때문에 개발과정에서 조금 더 이해하기 쉬운 방식으로 제작할 수 있다고 할 수 있다..
지난 시간에 배운 피그마의 주요 요소인 프레임(Frame)에서 가장 자주 쓰이고 가장 중요한 기능! "오토 레이아웃(Auto layout)"에 대해서 다루어 보겠습니다. 그럼 지금부터 배우러 출발! ㅎㅎ 1. 오토 레이아웃(Auto layout) 기능 소개와 사용법 1-1) 프레임(Frame) 요소로부터 선택하기 우측 디자인 패널에서 오토 레이아웃 패널을 찾는다. + 버튼을 눌러 규칙을 추가할 수 있다. 프레임이 아닌 다른 개체를 선택하면 오토 레이아웃 패널은 출력되지 않으므로 주의하자. 1-2) 단축키로 오토 레이아웃 설정하기 단축키 Shift + A로 오토 레이아웃을 쉽게 지정할 수 있다. 프레임을 만들지 않아도 곧바로 적용되는 장점이 있다. 2. 배치 규칙 설정하기 2-1) 방향(Direction)..
