Inflearn brand logo image

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

ifuwonder님의 프로필 이미지
ifuwonder

작성한 질문수

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

컴포넌트 워크시트 다운받기

베리어블 중복 리스트 삭제 방법

작성

·

46

0

안녕하세요 볼드님!
작업을 이 파일 저 파일 옮겨다니며 연습하다 보니
베리어블리스트가 첨부한 이미지 처럼 중복된 리스트가 생겼는데요. 이 문제를 해결할 방법이 궁금합니다.

스크린샷 2025-07-08 오후 4.19.37.png.webp

 

답변 2

0

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

안녕하세요, ifuwonder님

 

중복된 모드가 생기셔서 당황하셨겠습니다.

우선 저도 이번 년도에 강의를 업데이트하면서 비슷한 경험이 있어서 애를 먹었던 기억이 나네요.

그 당시 모두 찾아봤지만 딱히 방법은 없었습니다.

제가 했던 방법은 다음과 같습니다.

 

  1. 우선 내가 가지고 갈 베리어블 모드의 이름을 바꿉니다. 그래서 필요없는 베리어블 모드랑 구분을 합니다.

  2. 페이지 -> 섹션 -> 컴포넌트 -> 레이어로 내려가면서 중복된 모드가 있는지 체크를 합니다.

  3. 만약 있는 경우 우선 색부터 정리하는 걸 추천드립니다. Selection Color 들어가셔서 필요없는 베리어블 모드에서 가져온 색상 베리어블을 하나하나씩 찾아서 새 베리어블 색상으로 바꿔줍니다.

  4. 다음으로는 타이포그래피이고, 이도 동일합니다.

  5. 마지막으로 간격 베리어블 순으로 합니다.

Apply variable이라는 플러그인을 사용하면, 이름이 동일하면 내가 원하는 베리어블 모드로 어느정도 바꾸어주어, 어느정도가 커버가 가능하지만 많이 해결 해주지는 않습니다.

많이 번거러우시겠지만 한번 위의 방법을 시도해시기 바랍니다.

도움이 되셨으면 좋겠습니다.

 

 

0

안녕하세요, 인프런 AI 인턴입니다. ifuwonder님!

베리어블이 여러 파일에서 중복되어 리스트가 지저분해진 상황을 해결하고자 하시는군요. 중복된 베리어블을 정리하는 것은 디자인 시스템을 깔끔하게 유지하는 데 매우 중요합니다. Figma에서 베리어블을 정리하는 방법에 대해 몇 가지 팁을 제공해드리겠습니다.

중복 베리어블 정리하기:

  1. 베리어블 내보내기 및 임포트:

    • 중복된 베리어블 리스트를 정리하고자 할 때, 기존 베리어블을 하나의 파일로 내보내고 동일한 환경에서 다시 임포트하는 방법을 사용할 수 있습니다.
    • 베리어블을 파일로 내보내고 새로운 프로젝트나 문서에 필요한 베리어블만 선택적으로 붙여 넣어 관리할 수 있습니다.
  2. 라이브러리 사용:

    • 피그마 설정에서 라이브러리를 활용하여 원하는 베리어블만 불러와 사용하도록 하십시오. 라이브러리를 잘 관리하면 중복 베리어블의 사용을 최소화할 수 있습니다.
  3. 정리 플러그인 활용:

    • Figma 플러그인 중에서는 베리어블을 정리하거나 불필요한 베리어블을 한 번에 찾아주는 유용한 도구들이 있습니다. 이를 활용하여 중복된 베리어블을 제거할 수 있습니다.
  4. 그룹화 및 네이밍 컨벤션:

    • 베리어블의 이름을 직관적이고 체계적으로 지정합니다. 또한, 중복을 피하기 위해 베리어블 사용에 대한 팀 내 가이드를 마련해 두십시오.

추가적인 도움이 필요하시다면, 기존의 피그마 사용법에 대한 질문과 답변이 도움이 될 수 있습니다:

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

ifuwonder님의 프로필 이미지
ifuwonder

작성한 질문수

질문하기