inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

섹션 6 / 29.Button 강의의 아이콘 인스턴스 스왑 질문

미해결

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

안녕하세요 강의를 수강하고있는 수강생이자 스타트업 외주제작사의 디자인시스템을 구축중인 인턴입니다. 29번 강의에서 강사님께서 공유해주신 아이콘 Union파일을 다운로드 받아 버튼 제작 중이나, 등록한 버튼의 아이콘 인스턴스 스왑의 컬러부분이 컴포넌트 색상과 연동되지않는 문제로 문의드립니다. 문제상황: 버튼 컴포넌트를 제작하여 1) → Leading Icon인스턴스 스왑을 등록 2) Select preferred values (+버튼)을 통해 다른 아이콘을 등록 3) 가져온 Union Icon 원본 파일에 제가 제작한 베리어블(Primitive 컬렉션)의 색상을 적용하여 4) 제작한 버튼 컴포넌트의 아이콘 역시 Union 아이콘과 일치하는 베리어블(Primitive 컬렉션)를 설정해준뒤, 버튼 컴포넌트와 어울리는 베리어블(Semantic 컬렉션)컬러로 변경하여 베리언츠를 Alt를 활용해 인스턴스를 뽑았습니다. 5) 등록한 프로퍼티의 → Leading Icon에서 다른 아이콘으로 변경 시 컴포넌트에 등록된 컬러와 동일한 컬러가 아닌 3번에서 적용된 베리어블 색상이 적용되어 출력됩니다. 유사 질문의 답변으로 문제가 1. 아이콘 레이어 이름이 반드시 동일해야한다. 2. 아이콘 형태가 반드시 동일해야한다. 라고 확인했는데, 아이콘 레이어 이름은 반드시 동일함을 이해하고 확인했으나 이상없습니다만, 아이콘 형태가 반드시 동일해야한다는 말이 이해되지않습니다. 예로, 제가 강사님께서 공유해주신 Icon 컴포넌트 중 Shape 아이콘을 복사하여 버튼 제작을 위해 사이즈를 16x16px로 조정하여 버튼 컴포넌트를 제작한 경우 2번째 상황으로 인하여 컬러 연동이 안되는 건지 궁금합니다.

  • figma
  • figma-tokens
  • 디자인-시스템
  • figma-variable
  • 프로덕트디자인
  • figma-인스턴스_스왑
  • 베리언츠-인스턴스
이지미 댓글 2 좋아요 0 조회수 79

강의자료 요청 건

해결됨

디자인 감각? 타고나는 게 아닙니다. '뇌과학'으로 설계하는 UX/UI 디자인 법칙

안녕하세요, 강의 너무 잘보고있습니다. 혹시 강의하실때 사용하신 자료를 pdf 형태로 공유 부탁드려도 될까요? 메모 하면서 강의 들으면 훨씬 도움이 많이 될 것 같습니다. 제 메일주소는 id_139@hotmail.com 입니다. 감사합니다.

  • 웹-디자인
  • ui
  • ux
  • 프로덕트디자인
  • 심리학
roadtoserenity3 댓글 2 좋아요 0 조회수 123

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

미해결

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

안녕하세요, 볼드님. 25강. 컴포넌트 만들기 전 라이브러리 세팅하기 에서 UI Kit 컬러 라이브러리 창에서 보면 저는 볼드님과 다르게 color/text/tertiary가 뜨지 않아요. 또한 color/bg/primary, .Companent/Promary도 뜨지 않습니다. 플러그인에서 Apply variables도 0 variables applied라고 아무 것도 적용되지 않았다고 뜨네요.. 어느 단계에서 잘못된 걸까요?

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

교육용 피그마 계정 문의

미해결

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

제가 개인 계정으로 강의를 듣고 있어서 BoldPlus Foundation 2025 v1의 Asset Publish가 되지 않는거 같아요. 수강생은 교육용 피그마 계정을 받을 수 있을까요? .

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

베리어블 등록했는데 스타일에 연결하려니까 안보여요..

해결됨

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

시맨틱 베리어블 등록하고 스타일과 연결하기 수업 6:46에 font size에다가 Primitive: Typography에 입력해뒀던거 불러와야하는데, 어쨰서인지, 강의 들으면서 다 만들었는데 [Primitive : Typography_font style/normal]만 보이고 나머지 입력해둔 베리어블은 하나도 안보여요ㅠㅠ ㅠ

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

폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요??

미해결

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

폰트 웨이트 지정에서, '바디만 따로 웨이트를 시멘틱에 그룹핑 하는 이유'가 무엇인가요?? 질문을 해놓고 답을 찾은 것 같은데 바디의 경우 웨이트를 n개로 나누어놨기때문에, 변수에서 스타일로 끌어다가 쓸 '바디의 웨이트' 가 n개가 필요한 것이고, 때문에 바디 그룹에는 n개의 웨이트가 필요하니 별도로 그룹핑해서 가져다 둔 것이군요 감사합니다

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

피그마 질문

미해결

기초부터 실전까지! 모바일 UX/UI 디자인 완성

게시판 color를 수정하면 자꾸 게시판 폰트가 위로 조금 더 올라가는 문제가 발생하는 데 원인이 뭔지 궁금합니다. 다른 요소들도 더블 클릭하거나 그러면 원래 위치에서 높이가 조금 더 올라가버립니다 undo 기능을 사용해도 돌아오질 않네요

  • 모바일-디자인
  • figma
  • ux
  • 클론-디자인
  • 프로덕트디자인
coding 댓글 1 좋아요 0 조회수 73

강의 내용 중 질문

미해결

기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스

안녕하세요 강사님 15분 49초에서 도형을 만들어줘야되서 m을 눌러서 이렇게~ 이렇게~ 하시는데 전 안되는데요 ㅠ

  • 웹-디자인
  • 프로토타이핑
  • figma
  • 반응형-웹
  • 프로덕트디자인
강노니 댓글 2 좋아요 0 조회수 105

섹션 6 / 29.Button 강의 질문

미해결

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

안녕하세요 강의를 수강하고있는 수강생입니다. 29번 강의에서 -> Leading Icon 제작중에 Instance 속성 넣을 때 아이콘 색이 inverse 색으로 변하지 않습니다. 어떠한 이유 때문인지 궁금합니다. 감사합니다.

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

토큰에서 style로 export시 에러

해결됨

디자인 시스템 with 피그마

토큰에서 style로 export 하니 에러가 뜨는데요ㅠ Pretendard, Semibold 철자도 맞고 한데 Label 값들이 오류가 떠서 Inter로 설정되고 Regular로 바뀌어 버렸어요 왜 그런건가요? ㅜㅜ

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

안녕하세요. 강사님 min width 질문입니다.

미해결

기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스

안녕하세요. 열심히 수강중인 수강생입니다. 강의를 듣던 중 문득 궁금한 사항이 생겨서 질문 드립니다. min width를 정할 때 특정값(?) 이랄까요 어떤 기준값에서 여백을 빼서 정의하시는 것 같앗는데 그 값의 기준은 어떤걸까요? 강의를 기준으로 말하자면 8분 23초 ~ 강사님께서 320 에서 16 * 4를 빼시는데 사실 이 부분이 이해가 잘 가지 않았습니다. 320 이라는 값도 16을 4개나 빼는것도 왜그런지 다시 설명해주실 수 있으실까요 ㅜㅜ

  • 웹-디자인
  • 프로토타이핑
  • figma
  • 반응형-웹
  • 프로덕트디자인
tndms1027 댓글 1 좋아요 0 조회수 83

컬러시스템 등록 관련

해결됨

디자인 시스템 with 피그마

첫번째 화면: 모든 오브젝트에서 마우스를 뗐을 때 컬러 시스템 등록된 화면 두번째 화면: 오브젝트 선택 시 설정 가능한 라이브러리에 생성된 시스템 Q. 컬러 시스템을 만드는 와중에 border / 로 하여 네이티브 설정을 잘못했더니 오브젝트를 아무것도 선택 안하면 첫번째 화면과 같이 등록이 잘되었는데 두번째 화면처럼 필요없는 것들이 등록된걸 볼 수가 있어요. 삭제도 안되고 자꾸 쌓이는 구조같은데 어디서 찾을 수 있을까요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

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

67강, 70강, 75강 자료 다운로드

미해결

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

67강, 70강, 75강 자료 다운로드 하면 폴더 만 있거나 내부 ._.DS_Store 파일만 있고... 다른 파일은 없습니다. 자료 파일 다시 확인 부탁드립니다.

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

토큰 light/dark mode 오류

해결됨

디자인 시스템 with 피그마

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. https://inf.run/UeHLQ 해당 링크와 같은 오류로 보입니다. 토큰이 업데이트되고 강의로 알려주신 방법으로 적용해봐도 전혀 light/dark모드가 안먹네요. 전달주신 강의가 지속적으로 오류난다면 해결방안 있을지 답변 부탁드립니다.

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

자주 사용하는 아이콘 만들기

미해결

[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)

3 분 1초에 레이아웃 그리드 만들때 프레임을 그냥 새로 만들어서 한건가요? 똑같이 따라했는데 분홍색 배경이 안 만들어지는데요 가운데 컬럼 그냥 얇게 하나만 나타나고요 UI 도 너무 다르고 예제 파일도 업데이트 다운받았느데 그냥 다 다르고 제대로 확인하시는 지도 궁금하네요 그냥 뭔 설명없이 화면도 그냥 넘겨버리시고 실습으로 따라하기 매우 힘든 영상입니다.

  • 프로토타이핑
  • 모바일-디자인
  • figma
  • ux-기획
  • 프로덕트디자인
댓글 1 좋아요 0 조회수 114

강의 화면이 안나와요 까맣게나옴

미해결

기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스

인프런 > 내학습 > 강의클릭시 들어오면 자꾸 이렇게 나오고 소리만 들리는데 왜이런가요?? 나갔다가 들어와도 그러고 어떤강의는 보이는데 어떤 강의는 안보이고 불편해요

  • 웹-디자인
  • 프로토타이핑
  • figma
  • 반응형-웹
  • 프로덕트디자인
경은khloe 댓글 1 좋아요 0 조회수 115

베리어블 이름에 대해 질문드립니다

미해결

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

베리어블의 구조 이름을 살펴보기 강의를 수강중인데요.. 아직 취준생이라 각각의 용어에 대해 두루뭉실하게 넘어가서 이해가 잘 되지 않습니다. 질문) 1. p는 원시,기본값이라고 했는데 그러면 디폴트 값인가요? 아무것도 설정하지 않았을때의 기본값을 뜻할까요?? 2.베리어블 이름 구조의 순서가 헷갈립니다. Twillo 디자인 토큰에서 "Variant"에 Primary라고 되어있는데, primary는 Role아닌가요? 3. 지금 이름 짓는 구조를하나하나 의미를 꼼꼼하게 파악하고 가야할지 뒤의 수업을 들으면서 자연스레 익히게 되는지 궁금합니다.

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

오토레이아웃 그리드에 이미지를 넣을 때 질문입니다.

미해결

기초부터 실무까지 제대로 배우는 피그마 UI 디자인 클래스

안녕하세요. 피그마 완전 초보자 입니다. 강의 5분경 ~ 보면 오토레이아웃 - 그리드를 한 프레임에 이미지 프레임을 가져다 놓으면 강사님의 영상에서는 Fill이 되면서 그리드의 크기에 맞게 들어가는데 저의 경우에는 이미지 프레임에 맞게 크기가 변경이 되어버리고 fill이 아닌 상태로 들어가게 되더라구요. 혹시 제가 설정을 빼먹었다거나 한 부분이 있을까요?? 계속 뭐가 문제인지 비교해보다가 너무 모르겠어서 질문 올리게 되었습니다 ㅜ

  • 웹-디자인
  • 프로토타이핑
  • figma
  • 반응형-웹
  • 프로덕트디자인
tndms1027 댓글 3 좋아요 0 조회수 193

16강 실습 예제 파일 어디있나요

미해결

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

16강 예제 파일이 BOLD PLUS Foundation v2 로 강의 내용이 촬영되었는데 따라하면서 강의 들으려니까 12강 수업자료에서 공유된 예제 가이드는 BoldPlus Foundation 2025 v1인데.... v2는 어디있는거에요... 좀 설명이 불친절해요 ㅠㅠ 예제 파일 그대로 보면서 따라하는 형식이 아닌거에요??

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

인기 태그

인프런 TOP Writers

주간 인기글