inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

라이브러리 세팅과 연결 관련 질문드립니다.

해결됨

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

안녕하세요~ 현재 [섹션 4. 컴포넌트 만들기 전 라이브러리 세팅하기] 부분을 듣고 있는데 어디서 잘못 된 건지 알 수 없어 이렇게 질문 드립니다. [섹션 4. 컴포넌트 만들기 전 라이브러리 세팅하기] 에서 라이브러리를 발행하는 건 앞강의에서 실습한 베리어블 파일 말고 올려주신 BOLD PLUS Foundation v1.2.1를 발행하는 걸로 이해했는데 맞을까요? UI component library space 파일은 그냥 제가 따로 새 파일을 만드는건가요? 아니면 혹시 파일을 공유해 주신 걸까요? 일단 제가 UI component library space파일을 새로 만들고 영상대로 따라 해본다고 했는데 뭐가 잘못 된건지 에셋들이 뜨지 않고 계속 아래 이미지로 보이는데 어떻게 하면 퍼블리시한 에셋들이 보일까요? ㅜㅜ

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

업데이트 버전 토큰 스튜디오 import 시 ..and 2 more

해결됨

디자인 시스템 with 피그마

보더 색상을 피그마에서 지정 후 토큰으로 import하여 색을 옮기려 했는데요. 노란색으로 체크한 것 처럼 ...and 2 more 이라고 뜨고 선택할 수가 없습니다. 이 more 안에 피그마에서 지정한 색이 있을 것 같은데.. 방법이 없을까요?

  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
오재용 댓글 1 좋아요 1 조회수 212

오토레이아웃

미해결

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

오토레이아웃 추가를 하면 강의에서처럼 박스 두개 모양이 아니라 그래프 같은 모양이 생기고 글자를 수정해도 박스 크기가 안변해요ㅠㅠㅠ

  • 웹-디자인
  • 모바일-디자인
  • figma
haaari07 댓글 2 좋아요 0 조회수 157

앱개발-입문자-플러터-네컷일기-with피그마 소스 다운로드

미해결

앱 개발 입문자를 위한 플러터 네컷일기 만들기 with 피그마

안녕하세요 [제로투원] 의 포레스트 입니다 :) 제 강의를 선택해주셔서 감사합니다 ! 청강하시는 도중 질문사항이 있으시다면 언제든지 코멘트로 질문 바랍니다 소스 및 강의 자료 다운로드 받는 github url 이 있는지요? 좋은하루되세요 !

  • flutter
  • 모바일-디자인
  • figma
  • dart
changhyun.chun 댓글 1 좋아요 0 조회수 172

이번 피그마 업테이트로 인해 인터페이스가 달라진 듯 합니다.

미해결

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

특히, 컨포넌트 세부 설정 부분이 달라진 것과 상단에 있던 버튼들이 하단으로 나오면서, 바뀐 부분이 있는데요. 이 부분에 대한 업데이트는 언제 진행이 될 지 여쭤봅니다.

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

완강이벤트

해결됨

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

안녕하세요. 완강 후 설문조사와 수강평을 남겼습니다. 선물혜택은 메일로 발송이 되나요? 감사합니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
SUNA HWANG 댓글 2 좋아요 0 조회수 188

퍼블리싱 작업 마무리 하기 01 강의

미해결

모바일 웹 퍼블리싱 포트폴리오 with Figma

안녕하세요. 강의 잘 보고 있습니다 ! 강의를 듣다 궁금한 점이 생겨 문의를 남깁니다. 퍼블리싱 작업 마무리 하기 01 강의 중 .btn-fold에 left : 0 을 주라고 하셨는데, 이전 강의 에서 .goods-order-final 에 position: relative; 로 부모로 선언하고, 그 자식으로 .btn-fold 로 position: absolute; 를 선언하여 굳이 left : 0 을 주지 않아도, 위치가 잘 잡히는데, .goods-order-final 에 position: relative; 를 제거하고.btn-fold 에 left: 0 을 주신 이유가 궁금합니다.

  • HTML/CSS
  • jquery
  • 모바일-디자인
  • figma
  • 포트폴리오
디디 댓글 2 좋아요 1 조회수 199

디스코드 채널에 들어가지지 않습니다.

해결됨

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

디스코드는 이제 들어갈 수 없는걸까요? 링크로 진입했는데 초대를 수락할 수 없다고 뜨네요.

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

반응형 / 적응형 웹의 정의에 대한 질문이 있습니다.

해결됨

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

안녕하세요. 좋은 강의 잘 보고 있습니다. 디자인 시스템을 구축하는데 있어 큰 도움이 될 것 같습니다. 🙇‍♂ 영상 초반 반응형과 적응형 웹의 정의 설명 부분에서 질문이 있습니다. 제가 아는 기준에선 반응형은 기기에 상관없이 브라우저의 사이즈에 따라 미디어 쿼리로 구현해놓은 브레이크 포인트에 맞춰서 스타일이 달라지는 것이고, 적응형은 클라이언트의 기기를 웹서버에서 미리 파악하여 해당 레이아웃을 서버에서 내려주는 방식으로 알고 있습니다. 이에 따라 반응형은 브라우저의 크기가 변경될때마다 레이아웃을 비롯한 스타일이 변경되고, 적응형은 이미 내려 받은 소스코드가 해당 레이아웃이므로 변경이 없을텐데요. 그래서 예시로 알려주신 애플 웹 사이트는 반응형 웹이고, 적응형의 예시는 네이버가 아닐까 생각이 들었습니다. 제가 아는 것이 틀렸을수도 있고, 디자인에서는 반응형/적응형에 대한 정의가 조금 다른 것일수도 있다고 생각이 들었고, 무엇보다, 협업을 하면서 정확한 정의로 커뮤니케이션이 이루어져야할 것 같아, 어떻게 보면 강의에서 중요한 개념은 아닐 수 있지만, 이 부분에 대해서 조금 더 설명을 듣고 싶어 질문을 남기게 되었습니다. 감사합니다!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
it 댓글 2 좋아요 1 조회수 291

피그마 라이브러리 스왑 질문

해결됨

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

안녕하세요. 피그라 라이브러리 스왑 관련해서 질문드립니다. A 파일에서 로컬로 마스터컴포넌트 생성해서 사용중인데, 마스터 컴포넌트만 파일을 분리하여 B 파일을 생성하고 이를 링크시켜 사용하고자 합니다. A 파일을 퍼블리싱하고 새로운 B 파일에 마스터 컴포넌트를 복사하여 퍼블리싱한 하여 링크시키고 라이브러리 스왑한 후 A 파일에서 원본을 삭제하는 방식으로 하고싶은데, 라이브러리 스왑을 진행해도 오류메시지는 없느나 스왑이 되지 않고있습니다. 방법이 잘못된 것인지 궁금합니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
mina 댓글 2 좋아요 0 조회수 918

vector 아이콘 유니온시 아이콘이 깨지는 현상이 있어요!

해결됨

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

첫번째 사진은 유니온 하기 전 두번째 사진은 유니온 후 입니다! 지금 사진에 나와있는건, 벡터가 아예 깨지는 현상이지만 어떤건 색깔이 아예 빠지는 것도 있는 등.. 유니온 시 그대로 유니온이 되지 않은 현상이 있는데 버그인지 아니면 제가 잘 못 해서 그런건지 궁금합니다!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
치치 댓글 2 좋아요 0 조회수 912

아이콘 사이즈 변경

해결됨

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

안녕하세요! 강의 잘 들으며 실습해보고 있습니다. 버튼을 컴포넌트 세트로 만드는 연습을 하고 있는데요. 사이즈별 버튼 생성시, 기존 24*24 사이즈의 아이콘에서 버튼의 사이즈에 맞게 아이콘 사이즈도 키워지면 좋을 것 같은데, 아이콘 프로퍼티 변경시 24*24 사이즈로 복귀됩니다. 아이콘 파운데이션을 크기별로 생성하는 것 말고 혹시 어떤 방법을 사용할 수 있는지 여쭙습니다. 혹 제가 해당 개념을 강의 중 놓쳤거나 했다면 알려주시면 감사하겠습니다!

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
수진 댓글 2 좋아요 0 조회수 685

컬러 베리어블에서 semantic 관련

해결됨

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

컬러 베리어블에서 semantic 관련 semantic - text 정의 interactive를 따로 구분한 이유는 무엇인가요? 예를들어 웹 사이트의 GNB 텍스트 메뉴(버튼)의 primary, hover, pressed를 설정하기 위함 인가요? 그럼 버튼 컴포넌트의 텍스트는 모두 컬러 설정 할때 semantic - text 정의 interactive로 정의 하면 되나요? 아래 볼드님 피그마 파일로 스터디 중인데요. 위에 언급햇듯이 GNB의 텍스트 메뉴(버튼) 기본이 블랙컬러, 호버하면 블루 컬러로 변경되는 형태일 경우 컬러 베리어블 정의된 값을 어떻게 적용해야 하나요? 아래 첨부파일 이미지 보면 text>primary는 블랙, text>interactive>primary는 블루로 정의하셨는데...이런 부분은 뭔가 부딪치는 느낌입니다..text>interactive>primary가 필요한가요? interactive에서는 호버, 프레스, 디세이블, 셀렉티드 같은 상태값(states)만 정의 되야 하는거 아닐까 싶은데..의견 부탁드립니다. ? 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변 드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크 를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문 이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
Son Byung Ho 댓글 2 좋아요 0 조회수 402

타이포 폰트 소수점 사용 관련 질문

해결됨

디자인 시스템 with 피그마

안녕하세요 강의 잘 듣고 있습니다. 다름이아니라 폰트 관련해서 질문이 있어 질문 남깁니다. 왜 소수점을 사용하는지 이해가 안됩니다..! 기본 정수로 사용하면 안되는건가요? 다른 디자인 시스템 같은 거 살펴보면 폰트 또한 소수점으로 끝나는 게 아닌 정수에 맞게 떨어지도록 정리를 해놨는데 소수점으로 하는 이유가 있을까요? 이렇게 소수점으로 이용했을 경우 실제 개발 시에 문제가 생기거나 그런 건 없을까요?

  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
김광기 댓글 2 좋아요 1 조회수 411

Auto layout 글자가 늘어나도 버튼이 같이 안 늘어나요

해결됨

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

이게 될 때도 있고 다른 데에서 해보면 또 안돼서 감을 못 잡겠습니다

  • 웹-디자인
  • 모바일-디자인
  • figma
Jay 댓글 1 좋아요 0 조회수 213

semantic 컬러 베리어블 정의 할때 왜 여기선 무조건 theme 컬러를 참조하는 이유가 무엇인가요?

해결됨

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

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

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
Son Byung Ho 댓글 2 좋아요 0 조회수 256

궁금합니다.

해결됨

그 누구도 알려주지 않았던 UXUI 필수 지식, 디자인 시스템

위에는 프레임 인데 아래 아이콘은 어떤 경우 인가요?? 도형인 경우에는 다른 모양이라서요!

  • figma
  • 디자인-시스템
  • 아토믹-디자인
  • ux
seonyeong 댓글 1 좋아요 1 조회수 173

Part/MenuItems 컴포넌트 세트 만들때 badge 문제

해결됨

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

다양한 형태의 사이드 네비게이션(Side Navigation) - 파트2 Part/MenuItems 컴포넌트 세트 만들때 badge값을 하나만 변경해도 Full, Icon only, Icon & label 모두 변경됩니다. Full만 Number로 왜 안될까요??? 그리고 강의 너무 감사합니다. 한국어로 된 디자인 시스템 강의도 잘 없지만, 반복해서 연습해볼 수 있게 강의를 구성해주셔서 쉽게 잘 따라갈 수 있어요. 케이스별 실무 팁도 자연스럽게 배울 수 있고요. 수강생들에겐 참 알찬 강의인데, 강의 제작하시는 과정이 쉽지 않으셨을 것 같고.. 여러모로 정말 많이 배웁니다, 볼드님 :)

  • 웹-디자인
  • figma
  • figma-tokens
  • 디자인-시스템
  • 아토믹-디자인
  • figma-variable
SUNA HWANG 댓글 2 좋아요 0 조회수 180

핸드오프 링크와 그냥 공유 링크와 차이점을 모르겠어요

해결됨

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

Share공유를 눌러서 개발자에게 보낸다고 했는데 그 전에 있던 강의 중에서 공유하는 방법이 똑같은데 그냥 핸드오브링크는 그냥 공유하는 방법과 똑같다고 보면 될까요?

  • 웹-디자인
  • 모바일-디자인
  • figma
Jay 댓글 1 좋아요 0 조회수 166

인기 태그

인프런 TOP Writers

주간 인기글