inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

피그마 배리어블에 export시 값 저장 안됨

해결됨

디자인 시스템 with 피그마

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 토큰 스튜디오에 아래와 같은 식으로 스페이싱 정리 후, 배리어블로 export를 했는데 아래처럼 값이 0으로 나옵니다. 모드 이름을 다르게 해서 그런 건가요? ㅠ 스타일은 아무래도 범용성이 적어서 실제 사용할 때는 배리어블로 토큰 정리를 하려고 하는데, 배리어블에서 토큰스튜디오로 import는 도ㅣ는데 반대가 안 돼서요… 토큰 스튜디오에는 primitive.spacing.* 식으로 저장을 하고 실제 값은 중괄호로 변수처리했습니다. 배리어블에는 primitive.spacing.* 식으로 저장을 해뒀는데 mode 이름이 default라서 그런 건가요?? 궁금합니다ㅠㅠㅠㅠㅠㅠ

  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • 프로덕트디자인
이다은 댓글 3 좋아요 0 조회수 262

Style - variable 문으ㅣ ㅜㅜ

해결됨

디자인 시스템 with 피그마

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님! 강의 잘 듣고 있습니다. 그런데 한 가지 이해가 가지 않는 것이… 피그마 토큰 플러그인을 사용해서 등록한 후에 네이티브로 스타일에 등록을 하신다고 했는데, 배리어블에 등록을 하면 되는 것 아닌가요? 스타일은 참조 같은 기능이 안 돼서 피그마에서 실제로 사용할 때도 배리어블로 토큰 관리하는 게 좋다고 알고 있는데 뭐가 맞는 건지 모르겠습니다 ㅠㅠ

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

Rename layers

미해결

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

안녕하세요 볼드님! 강의를 듣다 문의 사항이 생겨 질문드립니다. 기존 베타 버전이던 Rename layers가 사라지고 하기와 같이 뜨는데요, 클릭하여 진입해도 rename layers가 없어 여쭤봅니다!

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

타이포그래피 primitive typeface 네이밍 질문있습니다

미해결

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

우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다. 안녕하세요! primitive:typography 에 궁금한 점이 있습니다. font family/typeface 를 등록할 때, Name열에 어떻게 명명할지 고민이 됩니다. 주로 화면들에는 거의 pretendard를 사용하고 있고, Geist 폰트 부분으로 조금씩 (페이지네이션 숫자, 영어 정도) , inter (한 두개) 정도를 사용하고 있다면 어떻게 해야할까요? 폰트가 모두 sans여서 어떻게 구분해서 Name열에 적어야할지 모르겠습니다. (강의에서 설명주신 부분은 아래 사진입니다)

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

플러터(Flutter) 개발 환경에서 svg 깨짐 현상 해결 방법 문의

미해결

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

플러터(Flutter) 개발 환경에서 svg 깨짐 현상 해결 방법 문의 쌤 안녕하세요~ 피그마에서 아이콘 키라인 가이드에 맞춰 아이콘 제작(union > flatten 모두 적용 완료)하여 svg로 아이콘을 전달하였으나, 플러터 개발 환경 > 배포하여 적용해보면 svg 아이콘 깨짐이 발생하는 문제를 겪고 있습니다~ svg export 플러그인, SVG 최적화( SVGOMG ) 적용하여 수정했으나, 동일하게 SVG 깨짐 현상이 해결되지 않는데요~ fill rule editer 플러그인은 아직 적용하지 않았으나, 이를 적용하지 않는 것이 문제일까요? fill rule editer도 다시 적용해 볼 예정입니다만, 해결이 될지 알 수 없어서 문의 드려봅니다! 🥺 실무에 유익한 강의 항상 감사합니다!!

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

디자인시스템네이밍

미해결

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

안녕하세요 볼드선생님! 디자인시스템은 강의를 듣고 만들고있지만 디자인시스템네이밍에 관련해서 네이밍을 어떤식으로 정해야하는지 잘 모르겠는데 혹시 관련해서 팁이 있을까요!?

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

Theme에서 다크와 라이트를 구분하지 않고 Semantic에서 구분하는 이유가 궁금합니다

미해결

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

안녕하세요 Theme에서 다크와 라이트를 구분하지 않고 Semantic에서 구분하는 이유가 궁금합니다 Theme에서 부터 - brand1 - dark - brand1 - light - brand2 - dark - brand2 - light로 구분하게 되면 semantic에서는 - bold-sementic-backgound로 모든 브랜드와 다크모드가 대응 되는거 아닌가요? 제가 구조를 제대로 이해한게 맞나요?

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

semantic typography Responsive 가이드 문서 (font size, line height) 부분 질문

미해결

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

쌤 안녕하세요. semantic typography 등록 후 가이드 문서 제작 중인 상황입니다. 공유해주신 🔹 파운데이션 스타일 가이드 + 컴포넌트 워크시트 통합본 https://www.figma.com/community/file/1469798941319486391/bp-design-kits-single-version-v1 을 참고해서 가이드 문서를 제작하다가 semantic typography 등록 및 스타일 가이드 문서에서 같은 24, 20 폰트 사이즈의 line height가 데스크탑, 모바일에서 다른 숫자로 적용된 이유가 궁금합니다. desktop: 24px/28, 20px/24 mobile: 24px/32, 20px/28 어떤 규칙이 적용된 것인지 궁금합니다! 같은 font size에서 line height가 다른 숫자로 적용되어 배리어블 등록 및 가이드 문서 제작 시, 이 부분이 헷갈려서 질문드렸습니다! 헷갈릴 경우에는 데스크탑, 모바일 모두 같은 폰트 사이즈에 같은 line height를 적용해도 될지 궁금합니다!! 실무에 유익한 강의와 좋은 자료 공유해주셔서 항상 감사합니다!

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

영어/ 한국어 타이포 다를경우

미해결

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

안녕하세요 선생님, 항상 꼼꼼하게 답변 달아주셔서 감사합니다. 텍스트 스타일을 영어와 한국어 폰트를 다르게 쓰는데 이럴 경우, 컴포넌트를 어떻게 관리 해야할까요? 1) 한국어로 컴포넌트를 등록해둘 경우, 가져와서 영어 타이포로 변경하는게 너무 번거로워 방법이 있는지 궁금합니다. 2) 컴포넌트를 한국어로 적용해두고 영어와 한국어 그냥 교체해서 사용해도 되는 걸까요? 약간씩 차이가 생길것 같아 우려가 됩니다.

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

타이포그래피 배리어블 등록 관련 질문

미해결

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

쌤 안녕하세요, 타이포그래피 배리어블 등록 관련 질문드려요! 브랜드가 1개예요. 컬러 배리어블 등록시에는 브랜드 컬러와 Theme을 등록하지 않았어요. Sematic Typography 등록 시에 font family는 Theme을 등록하지 않은 경우, 어디에 등록해서 사용하는 것이 좋을지 궁금합니다! 아직 경험이 많지 않아서요~ 쌤의 예제 파일을 참고하면서 등록하다보니 헷갈려서 질문드려요! 도움 부탁 드립니다!! 실무에도 유용한 강의와 예제 공유해주셔서 항상 감사합니다!

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

완강했습니다 :)

미해결

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

안녕하세요. 처음 들었을때는 어려웠는데 피그마 사용하면서 강의를 재차 들으니까 도움이 많이 됩니다. 완강과 설문남겼습니다. 완주선물혜택도 부탁드릴게요. 감사합니다!

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

아이콘 크기 변화

미해결

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

아이콘을 24/ 32/ 36 -> 텍스트필드 크기 S M L에 따라 다르게 적용을 해둔 상태에서 세개를 한번에 잡아서 아이콘 종류 선택할 수 있게 크리에이트 프로퍼티를 했는데요. 적용을 한 순간 모든 아이콘이 24로 바뀌어버리는 상황인데요. 24, 32, 36을 각각 프로퍼티 적용할 경우는 괜찮더라구요. 이 방법 말고 다른 방법은 없을까요? 1) 기존 다르게 넣은 아이콘 크기 2) 적용 3) 크기 작아짐

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

borderTransparent 임포트가 안됩니다

해결됨

디자인 시스템 with 피그마

피그마에서 borderTransparent를 만들고 토큰에 임포트하려고 하는데 라이트 모드에서 임포트를 한 후에 다크모드에 임포트하려고 하면 색상이 보이지 않습니다!

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

코딩 할 때 그리드 구조로 코딩을 안하고, flex구조로 코딩을 들어가도 그리드를 잡아줘야 하나요?

해결됨

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

강의를 듣다 궁금한 점이 생겨서요 수업 중에 그리드로 레이아웃을 잡아주던데, 이게 코딩 할 때 그리드 구조로 코딩을 안하고, flex구조로 코딩을 들어가도 그리드를 잡아줘야 하나요? 디자인 시 그리드가 필수인지 궁금해서..

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

reset 버튼 어디에 있을까요?

미해결

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

버튼 스택 만드는 강의에서 전체 컴포넌트 선택한 후 enter 누른 후 ... 버튼이 보이지가 않아서... current varient 로 들어가면 enter 누르면서 단일 선택된게 해제되고 reset 버튼이 보이지 않아요. 버튼 하나 단일로 눌렀을때는 보여요.

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

Swap 기능문의

미해결

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

안녕하세요! 디자인시스템 제작중에 유지보수를 고려하여 기존에 하나의 파일로 관리했던 Foundation과 Components를 분리하는 작업에 있습니다. Components의 Foundation 요소는 Publishing 을 통해서 적용할 계획입니다. 분리하는 작업을 진행할 경우, Variable과 Styled이 깨져버리는데요 이름이 동일할 경우 자동으로 교체 할 수 있는 방법이 있나요?

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

Primitive는 왜 스코핑할때 모두 비활성화하는 것일까요?

해결됨

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

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

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

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

미해결

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

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

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

18번 강의 질문

미해결

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

강의 쭉쭉 잘 듣고잇어요! 18번 강의 21분 쯤에서 플러그인을 통해서도 베리어블을 만들수 있다는 뜻으로 이해했는데 어떤 플러그인인지도 알수있을까요?

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

10번 강의 관련 자료 질문

미해결

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

안녕하세요 10번 강의 잘 봤습니다 🙂 처음이라 그런지 개념이 많이 어려운데 혹시 도움이 될만한 관련자료 받아볼수 있을까요? 이미 공유 하셨다면 어디서 찾을수 있을지 궁금합니다

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

인기 태그

인프런 TOP Writers

주간 인기글