컴포넌트 파일에 파운데이션 라이브러리 연결 안되는 문제

작성한 질문수 9

0

선생님, 안녕하세요.

바쁘신데도 답변주셔서 정말 감사드립니다 ^ ^

컴포넌트에 베리어블이 없을 수 밖에 없는이유

그리고 파운데이션과 컴포넌트를 분리하는 이유에 대해 다시한번 확실하게 알수 있었습니다.

말씀하신대로 apply variable을 사용하는 경우는 다른 에셋으로 변경하고자 할때 편리하게 쓸수 있는 방법이라고 알게 되었습니다.

답변주셔서 정말 감사드립니다!!

0

안녕하세요. 미갱이님

제 추측이 맞다면 지금 첨부하신 파일은 컴포넌트를 만들기 위한 파일이고 이 경우에는 베리어블이 없습니다.

강의에서는 파일을 두개로 분리해서 사용하는데, 하나는 파운데이션(베리어블, 스타일 등) 그리고 다른 하나는 컴포넌트입니다.

이전 질문에서 에셋 물어보셨는데 에셋을 통해 컴포넌트 파일과 파운데이션 파일을 연결할 수 있습니다. 그러면 컴포넌트 파일에서 색깔 팔렛을 누르면 파운데이션 베리어블을 가져올 수 있습니다. 그리고, 당연히 컴포넌트 파일 안, 베리어블 창을 열면 아무 것도 없겠죠.

그러면 왜 이렇게 두개로 나누냐고 물으신다면, 보통 관리가 용이하기 때문입니다. 둘의 용도가 다르고 회사 규모에 따라 컴포넌트가 여러개로 나뉠 수 있기 때문입니다.(모바일용, 웹용 - 동일한 스타일) 그리고 보통 스타일은 잘 안 바뀌는 반면, 컴포넌트는 굉장히 많이 업데이트 되면서 바뀝니다.

플러그인, Apply variable은 다양하게 사용 될 수 있는데, 이 관점에서는 A에셋에서 다른 B 에셋으로 갈아 타고 싶은 경우 이름만 동일하면 쉽게 옮길 수 있습니다.

궁금하신 부분 있으면 언제든지 질문 주세요.

0

안녕하세요.
선생님께서 알려주신 방법대로 질문1에 대한 답변대로 했지만,

해당 피그마파일에 변수가 하나도 안보입니다.

혹시 변수 등록이 안되어 있는건지...

아래는 피그마 파일 변수부분 캡쳐본 입니다.

그래서, 그냥 전체 아이콘 선택하여 Selected colors에 #171717 하나만 보여서 그 색상을

등록한 라이브러리의 색상으로 일괄 바꿨습니다.

단지 플러그인 테스트는 어려울거 같아요.. 감사합니다 :)

0

미갱이님 아래 글을 인프런 인턴이라고 해서 AI가 작성한 글입니다. 우선 첨부해주신 이미지를 확인해보고, 제 피그마 파일에서 확인해보았습니다.

1. #171717 색상 코드 문제

우선 저렇게 나온 이유는 베리어블 값이 적용되지 않았기 때문입니다. 그래서 베리어블 값을 적용해주셔야 합니다. 지금 전체 #171717 색상을 누르시고 선택을 하시면 됩니다. 아래에 첨부 사진을 붙여 놓았습니다.

a. 미갱이님과 동일한 구성입니다.

b. Selection colors에서 호버를 하시고 Style이라는 dot 4개짜리 아이콘이 나타납니다. 그걸 선택하시고, 모달에서 Libraries를 선택하고 아이콘 베리어블을 선택해줍니다.

c. 그러면 #171717값이 아니라 베리어블이 잘 적용된 걸 확인할 수 있습니다.

2. Apply variable 플러그인 문제

네 맞습니다. 색상이 베리어블이 적용되지 않았기 때문에 다른 라이브러리의 이름이 동일한 베리어블로 바꾸려고 해도 바뀌지 않게 됩니다.

따라서 하셔야 하는건 #171717 값에 베리어블 값을 적용만 해주시면 됩니다. 한번 해보시고, 안되시면 알려주세요.

0

제가 캡쳐해서 보낸이미지를 확인하시고 답주신게 맞을까요? 캡쳐한 이미지에서 보면 활성화가 되어있어서 제거버튼이 보이고 있는데..ㅠ

일단 알겠어요. 그냥 제가 아이콘들 색상을 변수값들로 바꾼다음 플러그인을 실행해서 다시 테스트해볼게요

0

안녕하세요, 인프런 AI 인턴입니다. 미갱이님.

질문하신 현상은 Foundation 라이브러리가 실제로 활성화되지 않았거나, Apply Variables 플러그인에서 라이브러리 변수 대신 로컬 값만 인식하고 있는 경우 발생할 수 있습니다. 아이콘의 색상이 color/icon/primary가 아닌 #171717로 표시된다면, 해당 아이콘에 컬러 변수가 연결되지 않은 상태일 가능성이 높습니다.

아래 답변을 먼저 참고해 주세요.

UI Kit에서 배리어블 등록 안되는 문제

해당 답변에서는 다음 내용을 안내하고 있습니다.

• Figma의 Assets → Libraries에서 BoldPlus Foundation 라이브러리가 활성화되어 있는지 확인
  
• 라이브러리 목록에서 해당 항목이 보이지 않는다면 스크롤하여 찾아본 뒤 활성화
  
• Apply Variables 실행 시 라이브러리가 정상적으로 등록되어 있어야 변수 적용 가능
  
• 플러그인에 Apply variable name처럼 자동으로 생성된 항목이 있으면 삭제 후 다시 실행
  
• 라이브러리 변수 연결이 정상적으로 되면 #171717 같은 색상 코드 대신 color/icon/primary와 같은 변수명이 표시됨
  

참고 이미지:

• 라이브러리 활성화 확인 이미지
  
• 변수 목록 확인 이미지
  
• Apply Variables 설정 확인 이미지
  

또한 컴포넌트 파일에서 아이콘이나 에셋이 보이지 않는 경우에는 아래 답변도 함께 참고해 보시면 좋습니다.

라이브러리 세팅과 연결 관련 질문드립니다.

이 답변에서는 Foundation 파일은 스타일과 배리어블을 제공하고, 실제 컴포넌트와 아이콘 에셋은 별도의 UI Component Library 파일에서 관리해야 한다고 설명합니다. 따라서 다음 순서로 확인해 보세요.

1. BoldPlus Foundation 2025 라이브러리가 활성화되어 있는지 확인합니다.
   
2. 컴포넌트 UI Kit 파일에서 라이브러리가 정상적으로 연결되었는지 확인합니다.
   
3. 아이콘을 선택했을 때 색상 속성이 #171717로 고정되어 있다면, 해당 아이콘의 Fill에 컬러 변수를 다시 연결합니다.
   
4. 그 후 Apply Variables 플러그인을 다시 실행합니다.
   
5. 여전히 0 variables applied가 표시되면, 플러그인에서 올바른 라이브러리와 컬렉션을 선택했는지 확인합니다.
   

질문자님의 경우에는 질문 1의 아이콘 색상이 코드값으로 표시되는 문제와 질문 2의 0 variables applied 문제가 서로 연관되어 있을 가능성이 높습니다. 먼저 Foundation 라이브러리 활성화와 아이콘의 Fill 변수 연결 상태를 확인한 뒤 Apply Variables를 다시 실행해 보시는 것이 좋습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.