디자인시스템

· Figma
Figma 프로젝트 파일에서 만든 컴포넌트를 팀 전역에 공유하여 다른 프로젝트에서도 사용 가능하게 하고 싶었다.이는 Figma의 professional 요금제부터 제공하는 팀 라이브러리 기능을 활용하여 디자인 시스템을 배포 후 사용할 수 있다.  1️⃣ 디자인시스템을 배포하고자 하는 프로젝트에서 Alt + 3을 누르면 아래와 같이 publish 창이 나온다. (원하는 컴포넌트만 배포하도록 선택할 수도 있다.)   2️⃣ 배포가 완료되면 다른 팀 프로젝트에서 Assets 탭의 Explore libraries를 누르면 사용 가능한 디자인시스템 목록을 확인할 수 있다.   3️⃣ 추가 버튼을 누르면 Assets 탭에서 공통 컴포넌트가 import 된 것을 확인할 수 있다. 뿐만 아니라 Text, Color 등..
· Storybook
@storybook/addon-designs GitHub - storybookjs/addon-designs: A Storybook addon that embeds Figma, websites, or images in the addon panel.A Storybook addon that embeds Figma, websites, or images in the addon panel. - storybookjs/addon-designsgithub.com designs addon을 활용하면 Figma 디자인을 스토리북에 불러올 수 있기 때문에, Figma에서 디자인한 컴포넌트와 스토리북 컴포넌트를 시각적으로 비교해가며 개발을 진행할 수 있다는 장점이 있다.   1. Installnpm install -D @sto..
ZoD
'디자인시스템' 태그의 글 목록