컬러와 텍스트 스타일 만들기

기획자의 피그마 Figma - figma color, text style

지난 시간엔 Toss 앱 화면 중 일부를 만들어보았죠?

도형과 텍스트를 따로 따로 그려서 필요한 버튼을 만들수도 있지만,  화면 내에서 반복적으로 사용하는 요소, 색상을 효율적으로 관리할 수 있는 방법에 대해서 알아볼게요. 

* 오늘의 포스팅을 영상로 보실 수도 있어요 :) 

Figma Color, Text style

색상, 텍스트 스타일 만들기 color & text style

어떤 서비스, 브랜드나 아이덴티티를 표현하기 위한 기본적인 디자인 가이드가 있습니다. 

가지고 있는 제품의 종류에 따라 웹용, 인쇄용 컬러, 텍스트에 대해 별도의 가이드를 가지기도 하지요.  이런 기본 가이드는 웹사이트나 앱 제작 시에도 크게 변동 사항없이 적용이 되기 마련입니다.  

* 실무에서는 클라이언트에서 보유하고 있는 디자인 가이드를 받아 해당 가이드에 맞춰 화면 설계, 디자인을 진행하게 되며, 제품 특성에 맞는 디자인 시스템을 구축하기도 합니다.  참고로 Figma 로 만드는 디자인 시스템에 대해서도  컨텐츠 제작 예정입니다 :) 

그럼 우리가 지난 시간부터 실습을 하고 있는 Toss 앱의 화면을 다시 한번 보면서 반복되는 요소들을 찾아볼까요? 실습용이니 간단하게 분석해보겠습니다. 

색상은 크게 2가지 분류로 나눌 수 있겠네요. 

  - 메인 컬러로 블루, 블랙

  - 서브 컬러로는 그레이

폰트는 총 4가지로 분류해볼 수 있겠습니다. 

  - 사용자이름, 타이틀(계좌, 카드) 

  - 계좌 금액, 카드 금액 

  - 송금 버튼용 텍스트

  - 서브 타이틀, Bottom 메뉴용 텍스트

그 외 디자인 요소는 

  - 사용자 프로필 이미지

  - 은행 로고 출력 이미지

  - 카드 출력 이미지 

  - 버튼 2종(블루, 그레이) 

컬러 스타일 만들기

그럼 우선 컬러 시스템부터 만들어볼까요? 

1.  기존 작업 화면 중, 블루가 적용된 버튼 영역을 클릭하여 선택한 후, 오른쪽 디자인 패널을 봐주세요. 

작업을 하면서 버튼을 구성하고 있는 사각형과 텍스트를 그룹으로 묶었기 때문에 아래 처럼 보여집니다.

Figma - Fill, Selection colors

Figma 에서 색상 적용을 담당하는 기능은 Fill 입니다. 

그리고 어떤 에셋을 선택하든 Selection colors 정보를 통해 현재 선택한 영역에 제공된 모든 컬러 정보를 확인할 수 있습니다. 

2. 컬러 스타일로 지정하는 것은 Fill, Selection colors 모두에서 가능합니다. 

     Fill 에서 컬러 스타일을 지정하고 싶다면,  해당 버튼의 배경인 사각형 영역만 선택합니다. 

     * Comand + 클릭하면 해당 영역만 선택됩니다. 

Fill 영역에 있는 Style 버튼을 클릭합니다.  위의 이미지속에 핑크색 네모로 표시되어 있는 부분이 스타일 버튼입니다. 스타일 버튼을 클릭하고 이때 보여지는 화면에서 + 버튼을 클릭합니다. 

그럼 우리가 선택한 색상이 보여지면서 입력란이 뜨죠?  바로 여기에서 컬러 스타일의 이름을 입력해줍니다. 저는 Primary 로 입력할게요. 

블랙과 그레이 색상도 같은 방법으로 컬러 스타일 지정을 해줍니다. 

텍스트 스타일 만들기

자, 그럼 이번엔 텍스트도 스타일로 만들어보겠습니다. 

저는 이 화면을 만들면서 Roboto 폰트를 사용했고, 텍스트가 출력되는 위치에 따라 필요한 폰트의 size, weight 에 따라 아래와 같이 텍스트 스타일을 만들었답니다. 

1.  오른쪽 디자인 패널의 Text 영역에서 스타일 버튼을 클릭하고, 이때 열리는 레이어에서  + 버튼을 클릭합니다.   컬러 스타일을 지정할때와 같은 방법이죠? 

2.  텍스트 스타일 이름을 지정하여 입력한 후에 Create style 버튼을 클릭합니다. 

저는 텍스트의 스케일에 따라 H1, H2, H3, button 으로 지정했습니다. 

어떤가요? 

텍스트 스타일을 만드는 방법도 어렵지 않죠? 

이 방법을 알아두셔야 나중에 우리가 실제 프로젝트에서 사용할 디자인 시스템을 만들 수 있으니 꼭 기억해두세요 :) 

TIP 텍스트 스타일을 세밀하게 조정할 수 있어요.

Figma 에서는 용도에 따라 스타일을 아주 세밀하게 조정할 수 있습니다.

Text 패널이 활성화된 상태에서 보면 우선 기본적인 정렬, 크기, 행간, 자간, 텍스트 영역 지정 등을 조정할 수 있는 기능을 확인하실 수 있을거에요.

그리고 조금 더 세부적인 설정도 가능합니다.  텍스트 패널의 맨 마지막에 있는 메뉴 버튼을 클릭해보세요. 

문자, 숫자에 대한 스타일을 비롯해 포지션 등 다양한 조건의 텍스트 스타일을 설정할 수 있습니다. 

오늘의 피그마 강의는 어땠나요?

생각보다 간단하게 화면 구현에 필요한 기능을 사용할 수 있다는 것이 피그마의 장점인 것 같습니다.

다음 시간에는 Figma 의 핵심 기능 중 하나인 Auto layout 오토 레이아웃을 활용해서 버튼을 만들어볼게요. 오늘도 고생하셨습니다!

#figma #피그마 #웹기획 #앱기획 #웹디자인 #피그마스타일지정하기