인프런 커뮤니티 질문&답변

강의에서는 두 가지 피그마 파일이 있습니다.

첫번째: 파운데이션 파일(베리어블 콜렉션이 포함됨)

두번째: 컴포넌트 라이브러리

컴포넌트 라이브러리 디자인 파일의 에셋에서 파운데이션 파일을 추가하면 기존 베리어블 콜렉션이 가지고 오게 되어 있습니다.

제 생각에는 mina님의 피그마가 파운데이션 파일이 자동으로 "add" 더 해져서 그렇게 된 것 같습니다. 이 경우는 문제는 전혀 문제가 없을 것 같습니다. 계속 컴포넌트 라이브러리에서 작업하시면 될 것 같습니다.

혹시 그래도 문제가 생기시면 저에게 두가지 파일 모두 아래 이메일로 공유해주시면 제가 한번 체크해드리도록 하겠습니다.

boldplus.ux@gmail.com

강사님의 경우에는 배리어블 컬러 활용한 버튼 등 컴포넌트가 있는 페이지에서 라이브러리 등록 전에 배리어블 콜렉션에 추가되지 않은 것 같아서요. 저는 저 경우에 콜렉션이 추가가 이미 되어버려서 어디서 잘못한 것인지 궁금합니다ㅜ

안녕하세요, mina님 질문 주셔서 감사합니다.

베리어블을 활용해서 디자인 시스템 구축을 하시나 보네요! 본 강의가 도움이 되셨으면 좋겠습니다.

우선 질문하신 부분은 전부 피그마의 자체 기능으로는 전혀 지원하지 않습니다.

베리어블이 자동으로 연결 되는 것은 당연한 것이기 때문입니다.

하지만 전혀 안되는 것은 아니고 플러그인을 사용해보시는 것을 추천드립니다.

1. Swap variables

기존 연결된 베리어블을 로컬 내의 베리어블로 변경해줍니다.

주의해야할 점은 이름이 반드시 동일해야 합니다.

두번째도 또한 피그마에서 제공해주는 방법은 없습니다.

하지만 베리어블을 찾을 수 있는 플러그인을 추천드릴게요.

Variable Vision이라는 건데 컴포넌트, 인스턴스에 사용된 모든 베리어블을 보여줍니다.

뇌피셜이긴한데 베리어블 ID가 보이는데, 엄청 길게 나오는 거는 외부 베리어블, 짧은 거는 로컬 베리어블인 것 같습니다. 그걸 구분해서 찾으셔서 바꾸셔도 될 것 같습니다.

질문에 대한 답이 디자인 시스템 구축하시는데, 도움이 되시기를 바랍니다.

감사합니다.