인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

gangsugi님의 프로필 이미지

작성한 질문수

[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기

color style guide 플러그인이 안나오는데요

해결된 질문

작성

·

102

0

듣다가 중간에 멈춰서 다시 처음부터 복습하려고 듣고 있는데요

초반 강의중에 color style guide 플러그인이 강의를 따라하며서 해보면 강사님 화면처럼 모든 색상이 나오질 않고 아래처럼 나오는데요,

 

다시 처음부터 모든 색상이 다 나오게 하려면 어떻게 해야 하는지요?

저는 플러그인을 열면 아래처럼만 나옵니다. 예전에 연습했던 화면으로만 나오는건지...그렇다면 다시 처음부터 모든 색상이 나오게 하려면 어찌 해야 할까요?

20250118_053545.jpg.webp

 

 

답변 2

0

볼드 UX님의 프로필 이미지
볼드 UX
지식공유자

안녕하세요, gangsugi님.

다시 강의를 들으신다니 정말 반갑습니다! 완강하실 때까지 언제든지 질문 주시면 성심껏 답변 드리겠습니다. 😊

 

우선, 화면에서 보니 Color Style Guide 플러그인을 적용한 결과물이 잘 나온 것 같습니다. 현재 스타일에서 blue, foundation/violet/... 등의 결과가 표시되는 것을 보니 올바르게 적용된 것 같아요.

 

다만, 제 강의에서처럼 모든 컬러가 나오게 하시려면 Color Style Guide 플러그인을 사용하시기 전에 아래 플러그인을 먼저 사용해주셔야 합니다. 이를 통해 TailwindCSS 컬러를 스타일로 등록하실 수 있습니다.

 

플러그인 링크 바로가기

 

위 플러그인을 활용하여 모든 컬러 스타일을 등록한 후, 다시 진행하시면 제 강의의 내용대로 적용하실 수 있을 겁니다.

 

질문 있으시면 언제든지 주세요.

감사합니다!

gangsugi님의 프로필 이미지
gangsugi
질문자

아 네 답변 감사합니다. 다행히 차근히 다시 해서 해결하였습니다.

 

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다. gangsugi님. 강의 중 ‘Color Style Guide’ 플러그인을 활용하여 색상 스타일을 설정하는 부분에서 발생한 문제를 해결하기 위한 몇 가지 단계를 안내해 드리겠습니다.

전체 색상 스타일이 나타나지 않는 문제 해결 방법

  1. 로컬 컬러 스타일 확인: 먼저, 피그마 내에서 ‘시스템 스타일’이 제대로 설정되어 있는지 확인해주세요. 모든 색상 스타일이 ‘로컬 스타일’ 탭 아래에 존재해야 합니다. 만약 색상 스타일이 설정되지 않았다면, 수작업으로 추가하거나 편리한 플러그인을 사용하여 설정할 수 있습니다.

  2. 플러그인 사용 시 주의사항: Color Style Guide 플러그인은 일반적으로 해당 로컬 스타일을 기반으로 색상 목록을 생성합니다. 따라서, 로컬 스타일에 색상들이 제대로 등록되었는지를 확인한 후 플러그인을 실행하셔야 합니다. 그렇지 않을 경우, 등록된 스타일만 보여질 것입니다.

  3. 시도 및 초기화: 예전 연습 화면이 나온다면, 피그마 파일을 초기 상태로 복구하거나 새로운 작업 파일을 만들어 색상 스타일 설정을 처음부터 진행해 보세요. 이때, 정확한 순서로 플러그인 기능을 활성화하면 문제가 없이 다양한 색상을 확인할 수 있을 것입니다.

  4. 다른 플러그인 탐색: 때때로 특정 플러그인이 요구하는 조건을 충족하지 못하는 경우가 있습니다. 가능하다면 다른 색상 스타일 관련 플러그인을 탐색하여 여러분의 필요에 맞는 플러그인을 찾아보실 수 있습니다.

이미지 및 강의 URL에서 보여준 바이올렛 색상은 강의에서 설정한 색상 예시로 보입니다. 이를 참고하여 본인의 디자인에 맞는 색상 스타일을 정의해 보세요.

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

gangsugi님의 프로필 이미지

작성한 질문수

질문하기