기획을 하다 보면 와이어프레임, 프로토타입을 만들게 되는 경우가 있는데, 필자의 경우 피그마, 액슈어같은 툴을 활용하는 것보다는 PPT를 통한 화면 설계를 주로 했었다. 이직을 준비하며 기획 업무에 있어서 피그마 활용 경험이 얼마나 중요한가를 느끼고 최근 강의를 수강하고 있다.
피그마 강의 복습을 위해 또 나와 같은 피그마 초보들을 위해 강의를 수강하며, 간단한 기능들을 정리해서 하나씩 올려보려고 한다. 오늘 첫 번째로 함께 공부해 볼 피그마 기능은 UIUX 디자인을 위한 Color 디자인 시스템 제작을 위해 컬러 스타일을 등록하기다.
피그마 컬러 스타일 등록
피그마 컬러 스타일 등록하기
쉽게 말해, 자주 사용하는 컬러들을 지정해 두고 필요할 때 클릭 한 번으로 사용하는 기능이다. 피그마로 UIUX를 작업하다 보면 분명히 주로 사용하는 폰트, 사이즈, 컬러들이 있다. 특히나 의미를 전달하는 아래의 컬러들은 정말 자주 사용하기 때문에 미리 정의해 등록해 두고 피그마 작업을 시작하면 좋다.
※ 자주 사용되는 의미와 컬러
- 에러 : 빨간색
- 주의 : 노란색
- 성공 : 초록색
이런 의미를 전달하는 컬러 외에도 본인이 생각하는 앱 혹은 웹의 메인 컬러들이 있다면 컬러별로 정의하고 작업을 하는 것이 편한다. 그럼 아래의 순서에 따라 컬러 스타일을 지정해 보자.
Step1. 왼쪽 Design 화면 > Local styles [+] 버튼 > Color 선택
피그마 화면에서 빈 공간을 선택하면 왼쪽에 Design 패널이 열린다. 여기서 텍스트, 컬러, 효과, 그리드에 대한 서식을 지정하여 스타일로 등록할 수 있다. 오늘 기능은 컬러로 소개하겠지만 text도 동일하게 해 주면 된다. 피그마로 작업하는 경우 텍스트와 컬러는 정말 자주 사용하기 때문에 스타일로 지정하고 작업하면 좋다.
컬러 스타일 지정을 위해 위 사진 1번 Local styles [+]을 선택 후 Color를 선택해 준다. 참고로 텍스트 서식을 스타일로 지정(ex. 고딕체, 크기 10)하려면 Color 대신 Text를 선택하면 된다.
Step2. Create new color style 팝업 > Name 입력 > Properties 컬러 선택 > Create style
Step1을 통해 오픈한 팝업에서 Name을 지정해 주는데, 이때 /를 통해 경로를 만들어준다. Local styles 안에 color뿐만 아니라 text도 들어갈 수 있고, color 안에서도 지시컬러, 배경컬러, text 컬러 등 다양하게 구분될 수 있기 때문에 경로를 만들어주면 스타일 관리하기가 훨씬 수월하다.
일단 오늘은 예제이니, color syles 아래 Color > Interation > 3가지 컬러를 넣어보기로 한다.
- Name : Color/Interaction/Error
- Properties : E0392D
앞서 말했듯이 Name에는 경로를 넣어준다 마지막 Error는 컬러명이다. 4번 동그라미 Properties에서 컬러를 선택해 직접 RGB를 입력해도 좋고 컬러 코드를 넣어도 된다. 또 5번 동그라미에 위치한 컬러 스포이드로 컬러를 찍어서 선택할 수 있다.
컬러까지 선택이 완료됐다면 6번 동그라미 Create style을 선택해 스타일 지정을 완료한다. 같은 방법으로 Interaction 스타일에 컬러 스타일을 추가하고 싶다면, 위 사진 1번 동그라미 [+]를 누르고 똑같이 스타일을 생성하면 된다.
이러한 반복 작업으로 Error, Attention, Success 각각 스타일 컬러를 생성했다. 생성이 완료되면 Design 패널 스타일에 지정된 것이 확인된다. 피그마로 작업 중 필요한 컬러가 여기에 해당하면 클릭 한 번으로 적용할 수 있다.
오늘은 가장 기초적인 많이 사용하는 글자 서식, 컬러 서식을 지정하고 스타일로 정의하는 방법을 알아보았다. 정말 단순한 기능이지만, 반복 업무를 줄일 수 있는 기능이니 꼭 사용하면 좋겠다.
댓글