묻고 답해요
167만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
next step?
현직 디자이너이지만, 여기서 정말 많은 걸 배우고 큰 도움이 되고 있어요. 혹시 시스템 디자이너와 엔지니어의 협업 방식, 그리고 프로덕트 디자인을 피그마에서 어떻게 핸드오버하는지에 대한 수업도 만들어주실 수 있을까요? 그런 내용이 있다면 정말 도움이 많이 될 것 같아요. 이렇게 잘 만들어진 시스템을 이용한 디자인 페이지를 데브들이 어떻게 사용하고, 디자이너가 어떻게 딜리버리 하는지 궁금하네요
-
해결됨디자인 시스템 with 피그마
안녕하세요! 강의잘 들었습니다.
좋은강의 잘 들었습니다 :) 아토믹디자인 시스템에대한 원리와 개발자 관점(?)에서의 구조적 설명이라 조금 더 원론적으로 잘 와닿았어요! (후반부에 실제로 git에 푸시하고 동기화하는 내용이 참 흥미로웠어요) 저는 프론트엔드 국비 6개월과정을 2년전에 수강하구 작은 회사에서 디자인겸 퍼블리싱을 같이한지 만 1년된 주니어 퍼블리셔입니다. 회사에서 개발인력이 백엔드개발자와 저밖에없고, 그동안 피그마를 못다뤄서 화면 만들 때 v0에서 그럴듯해보이는 적절한 템플릿을 먼저 다운받아서 tailwind.config를 수정하고 그뒤에 컴포넌트들 스타일을 AI 활용해서 원하는 방향으로 수정하면서 디자인을 해왔습니다. . 그러다 성장에대한 한계를 느껴서 피그마를 배웠고 이제는 강의로 사용법이나, 디자인시스템에대한 개념도 잡히는것 같아요 (테일윈드 기반으로 ai를통해 기본 토큰을 만들어서 넣어두고 그것을 시스템 삼아서 연습해보았어요) 문제는 이제 피그마 작업물 -> 개발환경 퍼블리싱 구현을 제가 하게되면 , 26년 현재 기준에서 어떤 방법이 가장 수월할지 고견을 여쭙고싶습니다. 회사에서 codex나 claudecode를 툴을 사용하고있어서 AI를 활용하면 ...우당탕탕 어찌저찌 조금씩 구현은 될것 같은데 ..실무기준에서 방향성을 알려주시면 그쪽으로 더 공부해보려 합니다 ! 스크린샷과 전반적인 컴포넌트 효율적인 재사용을 위한 프롬프트를 잘 전달하는것? 아니면 mcp(전혀 모르지만..)요즘 피그마완성본을 요즘개발환경으로 최대한 유사하게 제품화 하기에어떤방법이 가장 많이 쓰이며, 어떤점을 공부하면 도움이 될지 고견주시면 너무나 감사하겠습니다!
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
16강 Print Variables 출력 질문
안녕하세요. 수업 재미있게 잘 듣고 있습니다!!16강 마무리부분에서 Print Variables에서저는 강사님과 조금 다른 아웃풋이 나와서옵션을 조절해보려고 해도 그런 부분이 없더라구요.이 부분은 큰 문제 아닐것 같은데Varibales 세팅에서 제가 뭔가 잘못해서 이렇게 나오는 건 아닌지 궁금해서 질문 남깁니다 ^^감사합니다 .
-
미해결디자인 시스템 with 피그마
타이포그래피 16 -> 14 변경 시 XXXL만 변경 안 됨
피그마 화면 자체에서 등록 한 후 토큰 스튜디오로 임포트 했던 XXXL 항목의 경우에만 Default 값을 16 -> 14로 바꿨을 때 적용이 안 됩니다. XXXL 가 토큰 스튜디오 내에서는 44.202로 적용이 되었지만 피그마 화면, 그리고 네이티브 스타일 에서는 여전히 50.5 사이즈를 보이고 있습니다. 문제가 무엇일까요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
open in Figma 누르고 ui kit 다운?받았을 때
25강에서 피그마 커뮤니티에서 open in Figma 누르고 다운받고 Drafts 가면 썸네일로 표시되는게 안에 color 페이지 이미지와 Icons 페이지 이미지 들로 나오는데 강의에서 나오는 썸네일 이미지로는 안뜨는데 왜 그런걸까요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
variables 이름 지을때 소문자,대문자 사용에 관해..
19:51 에 italic 등록 할 때 Name은 소문자로 시작하고 Value는 대문자로 시작하도록 값을 넣으셨는 데 이유가 있나요?bold님 만의 규칙인가요? 아니면 실무에서 보통 그렇게 하는지 궁금합니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인 시스템 네이밍 순서에 대해 질문남깁니다!
섹션3을 수강중입니다. 강의의 내용은category - property - role - variant - state - scale로 이어지고 vriant안에 primary등이 쓰여집니다.이미지는 대한민국 정부 디자인 시스템의 내용인데여기서 primary는 type이고 쓰는 순서나 역할군도 다른거 같아서 너무 헷갈리는 것 같습니다..네이밍 순서를 어떻게 외워야할지 고민입니다..!
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
이미지 캐러셀 영상
영상 10분 쯔음에 Shift 누르고 뭔가를 두번 누르면 사이간격이 8 이 된다고 하시는데, 뭐를 누르는지 모르겠습니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
아이콘 사이즈 컴포넌트 구성 방식 관련
안녕하세요. 요즘 Figma Variables 강의를 통해 실무에서 많은 도움을 받고 있습니다. 28강 수업을 수강하던 중 질문이 있어 문의드립니다. 아이콘 사이즈 설정 방식과 관련된 내용입니다. 강의에서는 하나의 아이콘을 기준으로 아이콘 플레이스홀더(컴포넌트 영역)를 별도로 구성한 뒤, 4가지 사이즈로 나누어 설정하신 것으로 이해했습니다. 다만 실제 디자인 시스템에서는 아이콘이 아주 많이 구성되어 있다보니, - 모든 아이콘을 각각 동일한 방식으로 개별 컴포넌트화하여 보여주신 것처럼 4가지 이상의 사이즈를 모두 만들어야 하는지,- 아니면 아이콘 전체를 하나의 규칙으로 관리한 뒤, 사이즈만 공통적으로 분리해서 사용하는 방식이 가능한지 어떤 방식으로 접근하는 것이 적절한지 판단이 어려워 질문드립니다. 디자인 시스템 관점에서 권장되는 구조나 설정 방식이 있다면 안내해주시면 감사하겠습니다. 감사합니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
완강/리뷰 이벤트 후 강의자료
우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 안녕하세요!완강 후 리뷰 이벤트까지 하였는데 강의 자료는 어떻게 받을 수 있나요?pmr7348@naver.com 메일 공유드립니다.회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Stack 컴포넌트 관련하여 궁금한 점이 있습니다.
Stack 컴포넌트 관련하여 궁금한 점이 있습니다.해당 컴포넌트의 실용성은 '다양한 화면에서 동일한 간격으로 컴포넌트를 사용할 수 있다' 정도일까요?더한다면, 추후 사용하는 Slot 컴포넌트를 활용하기 위함일 것 같은데 제가 현재 Slot 컴포넌트는 활용하고 있지 않아서..궁금한 점이, 만약 버튼의 간격같은 것을 토큰화하여 해당 토큰으로만 사용을 한다면, 버튼 스택 컴포넌트의 활용도가 다소 떨어지게되는 것이 아닌가? 하는 생각에서 볼드 선생님의 의견이 궁금합니다Stack 형태로 여러 컴포넌트를 활용하는 라이브러리들을 봤지만, 결국에는 적절한 수만큼 자유롭게 늘리는것이 어려워서, 처음에는 2개만 쌓아놨다가, 3개, 4개, 드롭다운 메뉴 등에서는 10개 20개까지 늘려버리는 경우를 종종 본 터라, 어떻게 생각하시는지 궁금합니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
컴포넌트별 베리어블 구축
해당 강의를 듣고 실무에 적용을 해보려고 하고있는데, 진행할수록 단순히color/bg/interacitve/primary와 같은 버튼과 체크박스 등 다양한 곳에 적용할 수 있는 통합(?) 배리어블보다는color/FAB/bg/primary 와 같이 특정 컴포넌트를 위한 배리어블로 세분화를 해야할까? 하는 생각이 종종 들게됩니다예를들어, 일반 CTA버튼(파란색)에서는 color/bg/interacitve/primary와 같은 범용 배리어블을 적용했을 때 문제가 없지만,세그먼트 버튼같은 회색 박스 안에 있는 흰색 버튼에는 해당 배리어블을 활용할 수가 없겠는데..? 하는 생각이 들면서요. 그래서 결국 디자인 라이브러리가 발전하고 배리어블이 성숙해 나가면서부터는 컴포넌트별로 배리어블이 다양해지겠다는 생각이 드는데이에 대해서 어떻게 생각하시는지, 필연적이라고 생각하시는지, 주의할 부분은 없을지 궁금합니다...!
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
인풋 텍스트필드에서는 왜 'interactive/bg' 배리어블을 활용하지 않는 것인가요?
버튼과 같이 '클릭' 액션이 있는 인터랙티브한 부분에는 bg/interactive 그룹에 있는 컬러를 사용하는 것으로 이해하고있는데Text field의 bg는 그냥 일반형 컬러를 사용하는 것으로 보입니다. 강의상에서 빠른 제작을 위해 시적 허용...? 을 하신 것이죠?실제 현업에서 사용할때는 interactive 컬러와 일반 컬러를 구분해서 사용해줘야할 것 같다는 생각이 드는데, 이것은 제 일차적인 생각이고interactive라는 그룹을 색상 자체가 변동되는 (Hover, Press 액션이 있는) 컬러들의 그룹이라고 가정하면, 해당 텍스트 필드에서는 배경의 변화가 없으니 interactive가 아닌 컬러그룹을 사용하신 것인가? 라는 생각도 듭니다.물론 정답은 없겠고, 사용하려는 방향과 정책에 따라 다들 다르겠지만 강의에서는 어떤 의도로 사용하셨는지가 궁금합니다
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
UI Kit에서 배리어블 등록 안되는 문제
안녕하세요, 볼드님. 25강. 컴포넌트 만들기 전 라이브러리 세팅하기 에서 UI Kit 컬러 라이브러리 창에서 보면 저는 볼드님과 다르게 color/text/tertiary가 뜨지 않아요. 또한 color/bg/primary, .Companent/Promary도 뜨지 않습니다. 플러그인에서 Apply variables도 0 variables applied라고 아무 것도 적용되지 않았다고 뜨네요.. 어느 단계에서 잘못된 걸까요?
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
교육용 피그마 계정 문의
제가 개인 계정으로 강의를 듣고 있어서 BoldPlus Foundation 2025 v1의 Asset Publish가 되지 않는거 같아요. 수강생은 교육용 피그마 계정을 받을 수 있을까요?.
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
베리어블 등록했는데 스타일에 연결하려니까 안보여요..
시맨틱 베리어블 등록하고 스타일과 연결하기 수업6:46에 font size에다가 Primitive: Typography에 입력해뒀던거 불러와야하는데, 어쨰서인지, 강의 들으면서 다 만들었는데[Primitive : Typography_font style/normal]만 보이고 나머지 입력해둔 베리어블은 하나도 안보여요ㅠㅠ ㅠ
-
해결됨디자인 시스템 with 피그마
토큰스튜디오에서 폰트 스타일등록 문의
안녕하세요. 토큰을 배우고있는 디자이너입니다 폰트 스타일 등록시 토큰 Sizing > Scale(1.333) 값을 못불러오고Font Size > scale(1.333)로 등록하고 불러오면 적용이됩니다 같은 카테고리(폴더)안에 scale이 있어야 적용이되는게 맞는건가요?제가 등록을 잘못한것인지 궁금합니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요??
폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요?? 질문을 해놓고 답을 찾은 것 같은데바디의 경우 웨이트를 n개로 나누어놨기때문에, 변수에서 스타일로 끌어다가 쓸 '바디의 웨이트' 가 n개가 필요한 것이고, 때문에 바디 그룹에는 n개의 웨이트가 필요하니 별도로 그룹핑해서 가져다 둔 것이군요감사합니다
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
섹션 6 / 29.Button 강의 질문
안녕하세요 강의를 수강하고있는 수강생입니다.29번 강의에서 -> Leading Icon 제작중에 Instance 속성 넣을 때 아이콘 색이 inverse 색으로 변하지 않습니다. 어떠한 이유 때문인지 궁금합니다.감사합니다.
-
해결됨디자인 시스템 with 피그마
토큰에서 style로 export시 에러
토큰에서 style로 export 하니 에러가 뜨는데요ㅠPretendard, Semibold 철자도 맞고 한데 Label 값들이 오류가 떠서 Inter로 설정되고 Regular로 바뀌어 버렸어요 왜 그런건가요? ㅜㅜ