inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

베리어블 적용 중 문제

해결됨

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

우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 시멘틱 베리어블 등록하고 스타일과 연결하기 강의의 2:20초에 보면 등록된 폰트? 베리어블? 이 두개만 뜨는데,, 저는 왜이이렇게 많이 뜨는 걸까요? 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.

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

플러그인 질문

해결됨

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

안녕하세요 볼드님 해당값이 있는 베리어블 값일 경우 자동으로 등록해주는 플러그인을 설명해주셨던거 같은데요. 혹시 알 수 있을까요?

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

디스플레이 파트 Accordian 스트로크 질문

해결됨

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

안녕하세요 디스플레이 아코디언 컴포넌트에 관해서 여쭤봅니다. 아코디언에 이렇게 바텀만 스트로크를 주셨는데 볼드님 강의에서는 일직선 으로 보이는데 제가 한거는 아코디언 border radious 값 때문에 살짝 선이 둥글게 보이더라구요 inside outside 다 해봐도 똑같네요. 어떻게 일직선으로 만들 수 있나요? 감사합니다. 우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.

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

베리언트 레이어 표기 ◑ 관련 문의건

해결됨

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

안녕하세요! 강의 잘 듣고 있습니다. 한가지 문의 사항이 있는데요! 협력사 피그마 문서에 베리언트로 만든 스위치 셋트중 레이어 페이지에서 표기에서 State=pressed, ◑ On/off=off 이런게 있는데요 On/off는 불린 기능 설정인데 그 왼쪽옆에 ◑ 반원의 아이콘이 있더라고요.... 이게 일반적으로 만들때는 안생기던데 일부러 추가한건지 숨겨진 기능이 있는것인지 궁금합니다.

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

브레드크럼 인스턴스에서 Underline 넣는 방법

해결됨

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

브레드크럼 파트에서 수강 중 질문드립니다! 브레드크럼 인스턴스의 Label text property가 수정되면 Style을 Underline으로 변경이 안됩니다. Underline을 넣고 싶으면 브레드크럼 컴포넌트 셋트에서 적용해야 인스턴스에도 적용되는데, 이렇게 하는게 맞는지 궁금합니다. 우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.

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

Lock Aspect Ratio 관련

해결됨

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

우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다. ============================================================ 안녕하세요. 해당 질문관련 검색을 해보았지만 나오지 않는 것같아서 문의드립니다. 현재 8-8 만능으로 쓰이는 기본 카드 를 수강중에 있습니다. Lock Aspect Latio의 플러그인이 사라졌는지 검색을 해도 이것밖에 안나오더라구요. 저 첫번째 것을 사용하면 강의내용처럼 원하는 대로 나오지 않습니다. 방법이 있는지 아니면 제가 검색을 잘못했는지 알고 싶습니다. 감사합니다!!

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

Local variables

해결됨

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

안녕하세요 볼드님 local variables을 등록한 후, Mobile, Tablet, Desktop Frame을 눌러서 등록한 베리어블을 적용하려고 하니, 안 뜨는 경우는 무엇일까요? ㅜㅜ 프레임 밖에 벗어나서 Page자체에서는 등록된 베리어블을 확인을 할 수 있습니다 ㅜㅜ

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

Fill이 안 되는 이유

해결됨

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

width가 Fill로 변경이 안 되는 이유가 무엇일까요 선생님ㅜㅡㅜ Fixed, Hug만 뜹니다 ㅜㅜ

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

버튼 미작동

해결됨

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

우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 배리어블 인터페이스와 친해지기 편의 6:07분에서 '리네임' 버튼을 눌러도 이름 변경이 되지 않아요 이유가 뭘까요? 이미지: 제 컴퓨터 상황 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.

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

버튼 컴포넌트에서 불린프로퍼티 아이콘이 안 보입니다.

해결됨

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

버튼 컴포넌트에서 불린 프로퍼티를 넣으려고 하는데요, appearance에서 눈 옆에 육각형 아이콘이 안 보입니다. 안 보이는 이유가 뭘까요?

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

컴포넌트 파일에 파운데이션 라이브러리가 연결이 안됩니다!

해결됨

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

말씀해주신대로, 파운데이션 파일에서 라이브러리 publish 한 후, 컴포넌트 파일에서 add to file을 했는데 베리어블과 local style에 파운데이션이 뜨지 않습니다! 제가 어떤 부분을 누락한 걸까요?

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

네비게이션 탭 강의에서의 질문

해결됨

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

강의 10분 정도의 내용입니다. 아래 컴포넌트에서 Tabs를 fixed로 Tabs item들을 fill로 설정하니 인스턴스에서 전체적으로 간격이 잘 유지 되면서 탭바가 늘어나고 줄어듭니다. 그런데 길이가 다른 데이터를 넣으니 저렇게 간격유지를 못하고 틀어지는데 어떻게 해야하나요? Tabs와 Tabs item을 둘 다 hug로 설정하면 데이터를 넣어도 간격유지가 잘되며 늘어나지만 그 후 탭바를 전체적으로 늘리고 줄이는게 안됩니다.

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

상태칩 강의에서의 질문

해결됨

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

볼드님 상태칩을 만들때 아이콘을 끄고 켤 때 텍스트와 버튼의 앞 뒤 간격이 달라지는데 이건 어떻게 해결해야하나요?

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

Print variables 대체 플러그인 없을까요?

해결됨

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

플러그인이 강의에 나온 버전보다 업데이트 되었는지 아래 사진처럼 출력이 됩니다. 갠적으로 컬러 크기가 Description 폰트에 비해 너무 크고 세로로 1자 형태로 배열되니까 보기 불편하다고 느낍니다! 혹시 또 다른 플러그인은 없을까요? 이번 미션은 Print variables로 하겠지만, 추후에는 더 유용한 플러그인을 사용해보고 싶습니다ㅎㅎㅎ

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

알림/경고 메세지 만들기 강의에서의 질문

해결됨

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

폰트사이즈와 간격 등 모든 사이즈를 다 일정하게 따라했는데 (선생님은 높이값이 72, 저는 80으로 됩니다) 아이콘을 추가할때 선생님과 다르게 위치가 지정되는 이유가 무엇일까요? 알려주신대로 패딩값을 위아래 16으로 주면서도 앞의 아이콘은 타이틀 상단 기준으로 위치하게하고 Close icon은 중앙에 위치하게 지정하려면 어떻게 해야하나요? 이럴땐 앱솔루트 포지션으로 원하는 위치를 지정하면 되나요?

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

셀렉트-파트1 강의에서의 질문

해결됨

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

안녕하세요 볼드님 강의를 다시한번 재수강 중인데 강의대로 실행되지 않는 부분이 있어 질문드립니다. (셀렉트-파트1 강의 6분 31초 부분 입니다) 1) 아이콘을 24에서 16으로 줄이는 과정에서 변화가 없는 이유가 무엇일까요? 2) 페이지 패널에서 저렇게 체크한 표시처럼 디바이더로 나눌수 있는 방법이 뭔가요?

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

폰트 사이즈에 홀수 (13pt, 11pt, 21pt)는 잘 안쓰나요?

해결됨

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

폰트 사이즈 예시에는 모두 짝수 폰트만 있는걸로 보여서 질문드립니다! 웹 UI 레퍼런스 찾아보거나(Linear) 디자인 시스템 예시( https://www.remain.co.kr/page/designsystem/font-size.php 애플 / https://developer.apple.com/design/human-interface-guidelines/typography ) 찾아봤을 때 종종 홀수 폰트들도 봤어서 이게 예외적인 사례인지 아니면 필요하다면 홀수 폰트도 사용해도 되는건지 궁금합니다. 제가 만드는 서비스에선 13pt를 사용하고 있어서.. 자주 사용되는 패턴이 아니라면 짝수로 다 바꿀까 싶어서요!

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

문의드립니다.

해결됨

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

안녕하세요! 혹시 타이포그래피 베리어블 스타일을 지정했을때 line height를 1.4로 계산해서 지정했는데, 작업하다보니 1.2로 더 줄여야 하는 상황이 생긴다면 디자인 시스템 자체를 바꿔서 1.2로 적용해야하나요? 아니면 해당 작업물만 로컬로 별도 타이포그래피 지정해서 해야할까요? 다른 속성값들보다 Line height는 프로젝트 스타일에 따라 스타일로 정해놨어도 값이 조정이 되어야 할때가 발생해서 이런 경우의수는 어떤식으로 대응하는게 좋을지 의견 여쭤보고싶습니다. 베리어블값이 weight나 line height 와 같은 값들을 primitive에 지정해놓고, semantic에서 다양하게 참조해서 쓸 수 있다고 생각해서 확장성이 있는것 같은데, 만약에 로컬 타이포그래피에 베리어블을 참조해놓았고 (heading 4xl는 line height 56이라면) 이 값으로 개발팀에 공유가 됐다면 이후에 line height베리어블 참조값을 50 이렇게 바꿀때 개발팀에 공유를 매번 별도로 해야하는거죠? 마지막으로, color는 로컬 스타일을 지워주셨는데 타이포그래피는 로컬에 베리어블을 다 적용하고 로컬 스타일을 지우지 않는 이유가 무엇인가요?

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

문의드립니다.

해결됨

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

안녕하세요! 혹시 타이포그래피 베리어블 스타일을 지정했을때 line height를 1.4로 계산해서 지정했는데, 작업하다보니 1.2로 더 줄여야 하는 상황이 생긴다면 디자인 시스템 자체를 바꿔서 1.2로 적용해야하나요? 아니면 해당 작업물만 로컬로 별도 타이포그래피 지정해서 해야할까요? 다른 속성값들보다 Line height는 프로젝트 스타일에 따라 스타일로 정해놨어도 값이 조정이 되어야 할때가 발생해서 이런 경우의수는 어떤식으로 대응하는게 좋을지 의견 여쭤보고싶습니다. 베리어블값이 weight나 line height 와 같은 값들을 primitive에 지정해놓고, semantic에서 다양하게 참조해서 쓸 수 있다고 생각해서 확장성이 있는것 같은데, 만약에 로컬 타이포그래피에 베리어블을 참조해놓았고 (heading 4xl는 line height 56이라면) 이 값으로 개발팀에 공유가 됐다면 이후에 line height베리어블 참조값을 50 이렇게 바꿀때 개발팀에 공유를 매번 별도로 해야하는거죠?

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

완강 이벤트

해결됨

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

볼드님 안녕하세요! 설문조사 및 수강평 작성했습니다. 제공해주시는 자료는 이메일로 전달해주시는걸까요??

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

인기 태그

인프런 TOP Writers

주간 인기글