디자인 시스템 컴포넌트 properties 사용 시 오류에 대해
안녕하세요! 디자인 시스템을 구축하고 사용하는 과정에서 생각지 못한 오류가 있어 질문 드립니다:)
현재 실무에서 디자인 시스템을 구축하면서 컴포넌트를 생성하고 properties를 설정한 후에
이 컴포넌트를 피그마 새로운 디자인 파일을 생성하여 가져다 쓰는 경우가 많습니다.
이때에 원본 컴포넌트를 수정하는 경우에 가져다 쓴 복제된 컴포넌트도 같이 수정되어 연동되는 것으로 알고 사용하고 있었는데 연동이 되지 않는 경우가 있더라구요.
디자인 시스템을 만드는 이유가 원본 컴포넌트를 수정하면 복제된 컴포넌트들도 같이 연동되어 반영시키기 위해 사용하는 장점이 크다고 생각하는데요.
같은 디자인 파일에서 다른 페이지에 가져온 컴포넌트는 연동되는데 아예 다른 파일 페이지에 가져오면 연동되지 않아서 이동된 복제된 컴포넌트를 다시 한번 컴포넌트를 생성해주어 해당 페이지에서 원본 컴포넌트와 추가로 복제된 컴포넌트를 사용해야 하는 상황이 되었습니다.
선생님도 이렇게 사용하는 경우가 있으신지 궁금합니다! 😅
답변 1
0
안녕하세요 yeseon96 님 :)
명명규칙부터 잡고 설명을 드리겠습니다.
재사용을 목적으로 만든 대상 : 컴포넌트 (component)
컴포넌트를 복제해 만든 복사본 : 인스턴스 (instance)
컴포넌트를 지정 후 인스턴스를 사용해 디자인 하는 형태가 시스템에서 가장 중요하며 컴포넌트 수정시 모든 인스턴스들이 수정되야 보다 좋은 시너지가 발생하는건 맞습니다.
하지만! 피그마에서는 컴포넌트 지정 후 인스턴스들이 메인 컴포넌트의 수정을 따라갈 수 있는 경우는 하나의 피그마 파일 안에서 page 들 에서만 적용이 되고 완전 새로운 피그마 파일에서는 수정되지 않습니다.
이 문제를 해결하기 위해선 피그마에선 팀프로젝트를 생성할 수 있고 해당 팀 프로젝트에 팀원들을 초대해 여러개의 피그마 파일을 공유할 수 있으며, 컴포넌트를 생성 후 publish를 하게되면 해당 프로젝트의 모든 팀원들과 모든 피그마 파일에서 해당 컴포넌트를 가져다 사용할 수 있으며 수정 또한 가능합니다.
팀 이름 지정
팀원 초대
무료 플랜일 경우 해당 라이브러리를 공유할 수 없습니다.
professional 플랜은 Libraries를 하나의 프로젝트 안에서 공유받을 수 있으며 Organization은 모든 프로젝트에서 공유받아 사용할 수 있습니다.
결론은 유료 플랜이 들어가야 한다는 것이죠 ^^;;
감사합니다 :)
borderTransparent를 라이트/다크모드에 이중등록
0
25
1
해결되었습니다.
0
23
1
안녕하세요! 강의잘 들었습니다.
0
73
2
타이포그래피 16 -> 14 변경 시 XXXL만 변경 안 됨
0
48
1
토큰스튜디오에서 폰트 스타일등록 문의
0
65
2
토큰에서 style로 export시 에러
0
71
2
컬러시스템 등록 관련
0
71
2
토큰 light/dark mode 오류
0
67
2
Pretendard 없으면 에러납니다
0
228
2
폰트 토큰 작업 할때
1
98
3
여기 수업에서 엘로우나 레드나 블루 이런 컬러들을 다양하게 만드는 이유가 뭔가요?
0
57
2
토큰을 깃허브에 올리는 방법이 없어진거 같은데요
1
81
2
토큰 export 할때 어떻게 해야 하나요? 버전이 바뀌어서 그런지 못찾겠어요
0
208
2
인프런 할때마다 짜증나는데 수업내용이 너무 오래된건 제발 삭제좀 하던지 다시 찍던지 해주세요
1
79
1
tailwind color generator 이게 작동이 잘 안되네요
0
73
2
figma tokens플러그인 안나오는데요??
0
122
2
혹시 토큰 가공할 수 있는 강의도 따로 있을까요??
1
54
2
피그마 배리어블에 export시 값 저장 안됨
0
201
3
Style - variable 문으ㅣ ㅜㅜ
0
67
2
borderTransparent 임포트가 안됩니다
1
68
2
화면이 보이지가 않아요?
0
67
1
컬러맵핑하고 라이트/다크 모드 설정시 색상 반전이 안돼요 ㅠㅠ
1
270
2
피그마 토큰 플러그인
1
292
2
깃허브 sync 오류
1
193
2