![]()
Figma 프로젝트 파일에서 만든 컴포넌트를 팀 전역에 공유하여 다른 프로젝트에서도 사용 가능하게 하고 싶었다.이는 Figma의 professional 요금제부터 제공하는 팀 라이브러리 기능을 활용하여 디자인 시스템을 배포 후 사용할 수 있다. 1️⃣ 디자인시스템을 배포하고자 하는 프로젝트에서 Alt + 3을 누르면 아래와 같이 publish 창이 나온다. (원하는 컴포넌트만 배포하도록 선택할 수도 있다.) 2️⃣ 배포가 완료되면 다른 팀 프로젝트에서 Assets 탭의 Explore libraries를 누르면 사용 가능한 디자인시스템 목록을 확인할 수 있다. 3️⃣ 추가 버튼을 누르면 Assets 탭에서 공통 컴포넌트가 import 된 것을 확인할 수 있다. 뿐만 아니라 Text, Color 등..
웹 서비스 개발에 주로 사용하는 Pretendard나 에스코어드림과 같은 폰트는 Figma 기본 제공 폰트 목록에 없다.그렇기 때문에 다운로드 후 사용해야 하는데, 이런 경우 어떻게 외부의 폰트를 사용할 수 있는지 정리해보겠다. 1. Font Installer 설치 Figma Downloads | Web Design App for Desktops & MobileDownload the Figma web design app on desktop for macOS or Windows, plus the font installer and device preview apps.www.figma.com 위의 URL에 접속해서 본인 컴퓨터의 운영체제에 맞는 Font Installer를 다운받는다. 2. 사용하려는..
체계적인 디자인 시스템이 잡혀 있을 때, 서비스의 통일감이 커지며 개발자에게도 훨씬 수월한 디자인 작업이 가능하다. 지난 프로젝트를 진행하며 피그마를 좀 잘 써볼 기회가 있었는데 그때 소소하게나마 프론트엔드 개발자 레벨에서 사용했던 피그마 유용한 기술들을 정리해보려한다. Local styles 피그마 화면 오른쪽 사이드바를 보면 Local styles 라는 항목이 있다. 이건 해당 로컬 파일에서 사용 가능한 스타일 토큰 집합이라고 생각하면 된다. 말 그대로 재사용 가능한 스타일 토큰을 만들어 두고 요소를 하나씩 생성할 때마다 이미 만들어진 스타일을 가져다 쓰는 것이다. (이거.. 진짜 편하다) Color, Text, Effect(그림자), Grid 의 4가지를 만들 수 있다. 만드는 방법은 아주 간단하다..
