[Figma] 피그마 입문 A to Z 부트캠프 메타코드_ "19. 폰트 스타일과 아이콘 규정하기"

반응형

https://mcode.co.kr  

메타코드M

 

 

 

안녕하세요~ 하양입니다. 🤗

 

지난 시간에는 PC화면 기초 UI 세팅과 컬러시스템에 대해 이해하는 시간이었다면 이번 시간에는 폰트 스타일과 아이콘을 등록하는 법에 대해 배워보겠습니다.

 

1.  폰트 스타일 규정하기

 

 

폰트 스타일도 마찬가지로 우측 Design 패널을 이용해서 속성값을 조절할 수 있습니다. 글씨의 높이, 자간, 글씨 두께, 크기, 등등 다양한 속성을 변경할 수 있습니다. 이렇게 마음에 드는 스타일을 만들었다면 앞서 배웠었던 컬러 라이브러리처럼 text style도 라이브러리에 저장할 수 있습니다. 컬러 시스템처럼 폰트도 마찬가지로 똑같이 반복적인 업무를 줄이고, 협업에 용이한 장점을 갖겠죠?

 

등록한 text style은 바로 저렇게 골라서 적용할 수 있게 됩니다!

 

 

2. 아이콘에 변수값을 설정하고 등록하기

 

 

아이콘과 변수가 무슨 상관이지? 라는 생각이 가장 먼저 들었습니다. 아이콘이 변수를 고려해야하는 이유는 목적과 상태를 나타내는 아이콘이 존재하고, 여러 크기와 목적으로 아이콘이 각각 사용되기 때문에 여러 상황을 받아서 표시하기 위함입니다. 또한 차후에 다른 변수가 발생하더라도 개발과 소통이 쉽습니다. 

 

 

Icon 이 Current variant 을 갖고 있는 모습이 보입니다. 해당 아이콘의 type과 size가 보입니다. 이와 같이 아이콘이 변수를 갖도록 하는 방법에 대해 알아보겠습니다.

 

프레임 이름에 슬래시(/)를 사용하는 이유는, 피그마는 css기반의 툴이며 개발자들이 리소스를 다운받을 때 슬래시(/)를 기준으로 폴더가 생성되기 때문입니다. 개발자분들이 파일관리를 편리하게 할 수 있는 방식입니다. 

 

 

아이콘을 만들었다면 Create component를 선택해주면 보라색으로 변하게 됩니다.

 

Component로 설정해주었다면 두개를 모두 선택해 Combine as variants로 합쳐줍니다.

 

새로운 Properties가 생기는 것을 확인할 수 있고 매번 새롭게 만들어도 각 구성요소들에 다른 속성을 줄 수 있게 됩니다. 

 

 

 

 

피그마 입문 강의 :

 

https://mcode.co.kr/video/list2?viewMode=view&idx=78 

메타코드M

 

 

#피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠 #메타코드