inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

174만명의 커뮤니티!! 함께 토론해봐요.

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

미해결

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

안녕하세요. 25강. 컴포넌트 만들기 전 라이브러리 세팅하기 part를 수강하다가 문제가 있어서 질문드립니다. 질문 1 ] 아래와 같이 파운데이션을 라이브러리에 추가하였는데, 컴포넌트 UI Kit 파일에서 아이콘을 클릭했을때 선생님 강의 화면에는 selection colors에 color/icon/primary로 뜨는데, 제 아이콘 colors에는 그냥 #171717로 색상코드값으로 나옵니다. 질문 2] Apply variables 플러그인 실행하여, 강의 내용대로 실행하였는데 저는 0 variables applied 0s remaining로 하나도 적용이 안되어 있습니다. 혹시 위 질문1번의 문제때문에 안된것일까요? 아래에는 질문과 관련된 화면 캡쳐하여 드립니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
미갱이 댓글 6 좋아요 0 조회수 62

섹션3. 스타일가이드 다운받고 난후

미해결

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

안녕하세요. 너무 초보적인 질문이라 해도 되는건지 모르겠어요.. 먼저 죄송하단 말씀드리겠습니다. 다름이 아니라, 섹션3에서 스타일가이드 파일 (BoldPlus Foundation 2025 v1 (Community)) 을 다운받았는데, 보니까 color, typography, grid, appearance 페이지가 있는데 각 페이지에 있는 값들을 style과 variable로 모두 등록해야 하는건가요? 저걸 왜 다운받았는지 일단 이해가 안되고, 다운받아서 등록하란건지 잘 모르겠어요 ㅠ.ㅠ

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
미갱이 댓글 2 좋아요 0 조회수 47

강의 파일 다운로드

미해결

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

안녕하세요! 해당 강의 속에서 볼드님께서 사용하시는 디자인 시스템이랑 같은 썸네일의 파일을 활용해서학습하고 있어요 근데 asset에서 버튼 아이콘을 검색해도 저는 이렇게 강의랑 다른 아이콘이 검색이 되는데, 제가 혹시 강의 파일을 잘못 다운로드한걸까요??

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
댓글 2 좋아요 0 조회수 48

아이콘 컬러 자동 변경

해결됨

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

안녕하세요, 강의 듣던 중 제가 까먹은 부분이 무엇인지 알고 싶어서 문의 남겨요! placeholder를 제작할 때, icon을 chevron-down으로 바꿀 때, 전에는 아이콘 변경할때는 컬러랑 사이즈도 고려되어 자동으로 다 변경이 되었던거 같은데, 이번 에는 그렇게 안되어서요! 혹시 전에 어떻게 해야 자동으로 다 변경이 되는지 , 한번만 다시 정리해주실 수 있을까요..? 헷갈리네요 ㅠㅠ 좋은 강의 만들어주셔서 감사합니다 : )

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
댓글 2 좋아요 0 조회수 65

auto layout 뎁스를 많이 넣는 이유?

해결됨

디자인 시스템 with 피그마

안녕하세요! 조금 예전 강의라 답이 달릴지는 모르겠지만 질문 남겨봅니다.. 헤더 작업할 때 각 메뉴에 오토 레이아웃을 여러번 중첩하는 이유가 있을까요? 제가 이제껏 해오던 방식은 (실무 X) 이런식으로 text와 박스를 한번만 묶고 패딩을 줬을거같은데 이렇게까지 여러번 묶어서 뎁스가 들어가는 이유가 무엇인지 궁금합니다. 그리고 이런 경우에는 코딩할 때에도 div를 감싸 각 박스에서 여백을 잡아주기를 개발자에게 바란다고 보면 될까요? 그리고 피그마가 최근 많이 업데이트가 되었는데 혹시 강의도 추가 강의나 업데이트 예정이 있으신지..궁금합니다! (GSAP 다음 강의도 기다리고 있어요... 무료로 풀려서 다양하게 배워보고 싶습니다)

  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • 프로덕트디자인
migyeong kim 댓글 2 좋아요 0 조회수 70

토큰 추출을 베리어블+AI 활용 vs 토큰 스튜디오 차이

해결됨

디자인 시스템 with 피그마

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요, 범쌤! 해당 강의를 보면서 디자이너와 개발자간의 협업에 있어서 토큰 스튜디오가 매우 중요한 역할을 하는구나 생각이 드는데요~ 그런데 최근 AI가 활용되면서 토큰 스튜디오 사용이 거의 없다는 얘기도 있던데, 토큰 스튜디오의 장점들이 대체가 가능한건지.. 실제 현업에서는 어떤지 궁금합니다. 그리고 피그마 베리어블만으로 AI를 활용해서 토큰으로 뽑고 활용하는 방법과 토큰 스튜디오의 토큰으로 사용할 때 차이점도 함께요!

  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • 프로덕트디자인
류지25 댓글 2 좋아요 0 조회수 84

'만능으로 쓰이는 기본카드' 강의 내용에 대해 질문드립니다.

미해결

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

안녕하세요, 강의듣고 있는 수강생입니다. '만능으로 쓰이는 기본카드' 강의 내용에서 utillties 부분에 해당하는 이미지 크기를 고정 시키는 플러그인을 알려주셨는데, 해당 플러그인 현재 2026년 8월 기준에는 나오지 않아서 첨부한 이미지와 같은 'Aspect Ratio Lock'을 사용해보았는데, 비슷하면서도 다른 플러그인이라 그런지, 강의에서 알려주신대로 도형에 바로 적용되지 않는 플러그인이며, 비율을 400:400로 키운다음에 1:1로 맞추려고 하면 고정 자체가 되지 않습니다 이렇게 플러그인을 사용할 수 없는 상황이라면, 이미지 비율을 고정시킬 수 있는 대체 방법에 대해 알려주실 수 있으실까요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
D.Hye 댓글 2 좋아요 0 조회수 73

figma.com/@boldux 계정이 없다고 나옵니다

미해결

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

bold님 계정 운영을 안하시는건가요? 강의에서 보이는 화면이 검색에서 나오지 않습니다

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
최정임 댓글 2 좋아요 0 조회수 74

반응형 웹 디자인

미해결

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

안녕하세요 볼드님! 정말 알차고 좋은 강의 감사합니다. Theme의 브랜드 컬러 모드 설정은 잘 활용하고 있는데요, Typography에서 desktop/mobile 모드를 적용해보니 변화가 거의 없어서 결국 폰트를 하나하나 수동으로 지정했습니다. 여기서 질문은 1. 볼드님은 반응형 웹 디자인 작업 시, 모바일을 디자인한 후 오토레이아웃으로 웹 1920 사이즈로 확장하시나요? 같은 디자인이더라도 모바일과 웹 간에 레이아웃이 조금씩 달라지는 부분이 생기는데, 이런 부분은 어떻게 처리하시는지 궁금하고, 폰트 부분에서는 모드로 잘 적용이 되는지도 궁금합니다. 답변부탁드립니다. 감사합니다:)

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
Semin Hur 댓글 3 좋아요 0 조회수 127

액션 아이콘 컴포넌트 질문

미해결

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

초반에 액션 컴포넌트를 설정할 때 범용적으로 icon placeholder 아이콘을 설정해 두는데, 게시판 별로 액션 아이콘을 다르게 설정하는 경우가 많잖아요?? 그러면 첫 부모 컴포넌트는 placeholder로 냅두고 첨부사진과 같이 컬럼 컴포넌트로 아이콘을 지정해두는게 맞나요? 근데 이렇게하면 셀렉티드로 변환 상태의 아이콘도 바꿔야해서 Columns/Status Actions 를 True/Flase 2개를 만들어놔야 하는건지.. 게시판 별로 부모를 만들어 놓는 것과 컬럼 컴포넌트로 여러개 만들어 놓는 것, 어떤게 효율적인 방법인지 질문드립니다 .

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
동팔이 댓글 2 좋아요 0 조회수 89

셀렉트(Select & Dropdown menu) - 파트 1 / selected 토글 버튼

미해결

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

오른쪽 화면 selected에서 ture/false가 강의에서는 토글로 껐다켰다 할 수 있게 나오는데 저는 화면에 다르게 구성되어 있어서 어느 부분을 놓친건지 헷갈립니다. 강의를 여러번 돌려봤는데도 문제점을 모르겠습니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
INFO EBIT 댓글 3 좋아요 0 조회수 112

스피너 아이콘 크기 질문

미해결

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

강의 내용 중 스피너 세그먼트 아이콘을 만들고 버튼에 붙여 넣어보는 작업이 있었는데 큰 버튼에는 정상적인 크기로 들어가는데 왜 Small button 에 넣었을때는 크기가 줄여져서 들어갈까요? sm-16px의 크기인데 10.67 의 소수점 크기로 들어갑니다 .

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
동팔이 댓글 2 좋아요 0 조회수 117

미리보기 빈칸생기는 현상

미해결

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

미리보기 했을 때 바텀 네비게이션 쪽에 빈틈이 생겨요 간격 0 이고 바텀네비게이션은 fill 로 되어있어요 인디케이터랑 바텀네비게이션 간격도 0 이고요! 어떻게 처리하면될까요? 우선은 그냥 네비게이션 아이템에 왼쪽 스트로크 넣고 홈 인디케이터 위아래로 스트로크 넣었어요! (아웃사이드로!)

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
한별 댓글 2 좋아요 0 조회수 97

아이콘 빌런 부분

미해결

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

안녕하세요 최근에 결제 후 수강하고 있습니다! 그래서 그런지 지금 아이콘 빌런부분 (앤트맨 전략) 스케일 조정후 깨지는 부분 관련해서 수강듣고있는데요, 최근 피그마가 계속 업데이트하면서 해당 오류가 없어진것 같은데.. (아닐수도 있지만..)그래도 유니온 하고 플랫 하는 방식으로 사용하는게 좋은거죠?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
yoojiwon64 댓글 2 좋아요 0 조회수 83

borderTransparent를 라이트/다크모드에 이중등록

해결됨

디자인 시스템 with 피그마

네이티브에 등록된 borderTransparent를 토큰플러그인에 라이트/다크모드에 이중 등록이 안되고, 둘중 하나에만 등록이 됩니다. 어떻게하면 되나요? https://www.figma.com/design/sNZYxS6FzfkmvAHKOxm6rD/%E2%9D%96-Uber--Started-?node-id=41-558&t=KCo6yU95fQT5nFgL-1

  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • 프로덕트디자인
hdae 댓글 2 좋아요 0 조회수 97

해결되었습니다.

해결됨

디자인 시스템 with 피그마

해결되었습니다.

  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • 프로덕트디자인
hdae 댓글 1 좋아요 0 조회수 95

배리어블 Value에 관해 질문있습니다.

미해결

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

강의를 보면서 뇌를 비우고 따라 만들다보니 어느순간 궁금증이 생겼는데, style의 경우는 크기,행간,자간등을 입력해 놓고 입력된 텍스트를 style로 만들면 되는거니까 상관이없는데 배리어블의 경우엔 name을 붙히고 value에다가 값만 썼는데 그 값이 자동으로 연결되는건가요? 완성된 데이터를 넣질 않았는데 피그마가 자동으로 인식하는건가요? 어떤식으로 물어봐야될지 몰라서, 두서가 없는점 죄송합니다. 폰트 패밀리로 다시 여쭤보자면 name은 제가 임의로 붙히는거니까 상관이없고 문제는 value입니다. inter라는 텍스트 파일을 따로 넣지를 않고 단순 텍스트로만 Inter라고 적었는데 피그마프로그램에서 알아서 찾아서 연결지어주는지가 궁금합니다. 만약 그렇다고 한다면 텍스트 이름을 대소문자, 띄어쓰기를 유의하면서 적어야할까요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
gusdyd20 댓글 1 좋아요 0 조회수 117

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

미해결

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

semibold에 짝대기가 생겼는데 연결이 깨졌다는 의미일까요? 짝대기가 없어지려면 어떻게 해야하나요?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
juhui 댓글 1 좋아요 0 조회수 96

Navigation Mobile 토글 베리어블이 안됩니당

미해결

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

Navigation Mobile 베리어블 만들었는데 오른쪽 위 옵션에 안떠요.. 그리구 Appearance의 눈모양 우클릭하면 거기에는 Navigation Mobile 옵션을 선택할 수 있는데 그걸로 설정하면 네비가 랩탑일때는 꺼지고 모바일일때는 보이는 방식으로 설정이 돼요 영상과 같이 랩탑모드로 하면 랩탑네비로 모바일일때는 모바일네비로 프레임 모드 클릭 한번에 바뀌게 하는 방법을 모르겠어요ㅠ.ㅠ

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
한별 댓글 2 좋아요 1 조회수 102

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

미해결

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

따라해보고있는데 Mobile 모드로 했을때 표현되는건 40/48로 잘 적용이 됐는데 우측 Typography 창에는 60/68 이라고 뜨고 뜯어봐도 60 / 68 로 등록되어있어요 40/48 이어야되는데 왜이럴까요..?

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
  • 프로덕트디자인
한별 댓글 1 좋아요 0 조회수 103

인기 태그

인프런 TOP Writers

주간 인기글