[정리] UI 디자인, 프로토 타입 툴 피그마(Figma) 사용해보기(2) - 로컬 폰트 적용

피그마(Figma)에서 로컬 폰트 적용하기(내가 다운받은 폰트 적용하기)

 

  지난 시간에 이어 피그마(Figma)를 사용 해보면서 "아 그럼 내가 사용하는 나만의 폰트는 어떻게 적용 될 수 있는 거지?!"라는 의문이 생겼습니다. 그래서 이것 저것 자료를 찾아보고 참고하면서 방법을 알게 되었네요.

 

일단 방법은 총 2가지로 나뉠 수 있습니다.

 

첫번째, figma.com 접속하여 웹상에서 작업시

나의 사용자 아이디 클릭을 하시면 위 화면과 같이 settings 항목이 나옵니다. 요걸 선택 하시면 Fonts > Local fonts are currently not enabled~~ 이런 설명이 있네요. 바로 밑에 파란색 바탕 버튼으로 활성화 되어 있는 Download Intaller to enable local fonts.를 눌러 설치 해줍니다. 

참고1 > figma.com 접속하여 작업시

 

 

 

 

 

두번째, 데스크탑 앱을 설치하여 작업시

메뉴중 Features라는 항목이 보이죠. 클릭 하면 이런 화면이 뜹니다 > 여기서 Desktop App > 본인에게 맞는 버전 설치

이렇게만 하시면 그냥 내 폰트가 알아서 적용이 됩니다.(쉽죠)  

참고2 > 데스크탑 앱 설치하기 또는 폰트 인스톨러 설치

 

 

참고3 > 데스크탑 앱 설치하기 또는 폰트 인스톨러 설치

또는 사이트 맨 하단으로 이동하시면 하단 메뉴가 나오는데 여기서 Resources > Downloads를 누르시면 아까처럼 다운로드 페이지로 이동하게 됩니다.

 

설명한 것과 같이 방법은 여러가지 입니다. 웹상에서 작업할 때 나의 사용자 아이디 클릭 > settings > Font Installers 다운로드 하지 않더라도 다운로드 페이지로 갔을 때 바로 Font Installers 프로그램을 받으셔도 됩니다.

그리고 데스크 탑 앱을 다운로드 받았다면, 데스크답 앱을 사용하던지 또는 웹상에서 그냥 작업을 하든지 별도로 Font Installers 설치는 필요하지 않고 바로 내 폰트 적용 가능합니다. 

피그마(figma > 로컬 폰트 적용)

이렇게 로컬 폰트 적용이 잘 된 것을 확인 해볼 수 있습니다!

※ 로컬 폰트를 피그마에서 적용 시키려면 해당 폰트는 당연히 기기에 미리 다운로드 후 설치가 되어 있어야 하겠죠!!!

 

 

그리고 이건 피그마(figma)를 사용 해보면서 너무 좋은 점이 있어서 추가적으로 내용을 적어 보네요. 저 같은 경우에는 구글 웹폰트나 눈누 사이트의 폰트를 자주 이용합니다. 주로 폰트를 써서 이미지로 작업 하기보다는 코딩으로 넣는 편인데요. 피그마에서는 구글 웹폰트를 지원 하고 있었네요. (너무너무 정말 마음에 드는 부분입니다. XD는 지원을 안해줘서 아쉽더라구요 ㅠ)

 

이렇게 구글웹폰트 사이트에서 사용 하고자 하는 폰트를 찾아볼 수 있습니다. 그리고 마음에 드는 폰트가 있다면 나의 피그마 작업 환경에 가서 그 해당 폰트를 선택하면 되겠네요. 끝

구글웹폰트 > https://fonts.google.com/