inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

선생님 섹션 2의 색상 설명 자료는

미해결

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

없는걸까요?.. 예제 연습파일만 있고! 강의 ppt는 따로 제공이 안되는걸까요?ㅎㅎ

  • 웹-디자인
  • 프로토타이핑
  • figma
  • 반응형-웹
  • 프로덕트디자인
허지원 댓글 2 좋아요 0 조회수 84

2강 질문

미해결

피그마UI3 기초 + 실무 탄탄 초스피드 완강코스

치아를 그리고 선택해제를 해도 입모양을 그리고 자꾸 하나로 합쳐져서 동일하게 인식을 하는 데 따로 인식하게 하거나 피해서 그릴려면 어떻게 해야하나요;; 일러스트도 안 해보고 포토샵도 안해봐서 좀 어렵네요

  • figma
  • ui
ehdnswk 댓글 2 좋아요 0 조회수 110

3강 이모티콘 이미지

미해결

피그마UI3 기초 + 실무 탄탄 초스피드 완강코스

3강 이모티콘이미지는 어디서 받을 수 있나요?

  • figma
  • ui
JJJ 댓글 1 좋아요 0 조회수 88

안녕하세요, 강좌 5의 피그마 파일은 어디서 볼 수 있나요?

미해결

Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오

안녕하세요, 강좌 5의 피그마 파일(라이브클랙스 강좌)은 어디서 다운받을 수 있나요?

  • HTML/CSS
  • figma
  • 포트폴리오
  • 인공지능(ai)
  • 바이브코딩
prayforyooh 댓글 2 좋아요 0 조회수 133

반응형 웹 디자인

미해결

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

안녕하세요 볼드님! 정말 알차고 좋은 강의 감사합니다. Theme의 브랜드 컬러 모드 설정은 잘 활용하고 있는데요, Typography에서 desktop/mobile 모드를 적용해보니 변화가 거의 없어서 결국 폰트를 하나하나 수동으로 지정했습니다. 여기서 질문은 1. 볼드님은 반응형 웹 디자인 작업 시, 모바일을 디자인한 후 오토레이아웃으로 웹 1920 사이즈로 확장하시나요? 같은 디자인이더라도 모바일과 웹 간에 레이아웃이 조금씩 달라지는 부분이 생기는데, 이런 부분은 어떻게 처리하시는지 궁금하고, 폰트 부분에서는 모드로 잘 적용이 되는지도 궁금합니다. 답변부탁드립니다. 감사합니다:)

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

액션 아이콘 컴포넌트 질문

미해결

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

초반에 액션 컴포넌트를 설정할 때 범용적으로 icon placeholder 아이콘을 설정해 두는데, 게시판 별로 액션 아이콘을 다르게 설정하는 경우가 많잖아요?? 그러면 첫 부모 컴포넌트는 placeholder로 냅두고 첨부사진과 같이 컬럼 컴포넌트로 아이콘을 지정해두는게 맞나요? 근데 이렇게하면 셀렉티드로 변환 상태의 아이콘도 바꿔야해서 Columns/Status Actions 를 True/Flase 2개를 만들어놔야 하는건지.. 게시판 별로 부모를 만들어 놓는 것과 컬럼 컴포넌트로 여러개 만들어 놓는 것, 어떤게 효율적인 방법인지 질문드립니다 .

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

셀렉트(Select & Dropdown menu) - 파트 1 / selected 토글 버튼

미해결

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

오른쪽 화면 selected에서 ture/false가 강의에서는 토글로 껐다켰다 할 수 있게 나오는데 저는 화면에 다르게 구성되어 있어서 어느 부분을 놓친건지 헷갈립니다. 강의를 여러번 돌려봤는데도 문제점을 모르겠습니다.

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

노션에 20.Contact가 없어요

미해결

Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오

노션 정리본에 20.Contact에 관한 내용이 없이 19번에서 21번으로 건너뛰어요

  • HTML/CSS
  • figma
  • 포트폴리오
  • 인공지능(ai)
  • 바이브코딩
김가희 댓글 2 좋아요 0 조회수 99

스피너 아이콘 크기 질문

미해결

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

강의 내용 중 스피너 세그먼트 아이콘을 만들고 버튼에 붙여 넣어보는 작업이 있었는데 큰 버튼에는 정상적인 크기로 들어가는데 왜 Small button 에 넣었을때는 크기가 줄여져서 들어갈까요? sm-16px의 크기인데 10.67 의 소수점 크기로 들어갑니다 .

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

미리보기 빈칸생기는 현상

미해결

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

미리보기 했을 때 바텀 네비게이션 쪽에 빈틈이 생겨요 간격 0 이고 바텀네비게이션은 fill 로 되어있어요 인디케이터랑 바텀네비게이션 간격도 0 이고요! 어떻게 처리하면될까요? 우선은 그냥 네비게이션 아이템에 왼쪽 스트로크 넣고 홈 인디케이터 위아래로 스트로크 넣었어요! (아웃사이드로!)

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

7- 상품확대 인터렉션

미해결

피그마 시작하기

첫번째 화면 처럼 상품확대 이미지가 이미지 안에 들어가야하는데 두번째 화면의 왼쪽 레이어를 보면 이미지5가 상품확대 안으로 안들어가져요 이미지들을 flatten slection을 만들었는데 이미지로만 남겨지구요 그리고 상품확대 인스턴스를 이미지 위에 덮으면 프로토타입이 걸리지만 이미지가 안 덮어지면 프로토타입이 안 걸려요 해결방법 상세히 알려주시길 바랍니다.

  • 웹-디자인
  • 모바일-디자인
  • figma
  • ui
  • ux
이지영 댓글 3 좋아요 0 조회수 156

아이콘 빌런 부분

미해결

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

안녕하세요 최근에 결제 후 수강하고 있습니다! 그래서 그런지 지금 아이콘 빌런부분 (앤트맨 전략) 스케일 조정후 깨지는 부분 관련해서 수강듣고있는데요, 최근 피그마가 계속 업데이트하면서 해당 오류가 없어진것 같은데.. (아닐수도 있지만..)그래도 유니온 하고 플랫 하는 방식으로 사용하는게 좋은거죠?

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

Json 플러그인 사용시 variable collection 없음

미해결

Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오

안녕하세요. Json화 하려고 플러그인 실습을 해보고 있는데, 선생님이 업로드해주신 파일들을 제 드래프트에 복붙하고 사용하고 있습니다. 플러그인 실행시 다음과 같이 배리어블 컬렉션이 비어 있는데 어떻게 불러올수 있나요?

  • HTML/CSS
  • figma
  • 포트폴리오
  • 인공지능(ai)
  • 바이브코딩
김혜령 댓글 2 좋아요 0 조회수 140

배리어블 목록 없음

미해결

Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오

안녕하세요. 첨부해주신 Figma 파일을 복사해서 제 피그마로 가져온 후, 배리어블이 잘 나오는지 보기 위해 클릭했는데요. 선생님 화면에는 윈도우 상단에 responsive-more options가 보이는데, 제 화면에서는 타이틀이 variables이고, more options 버튼이 없습니다. 설정된 배리어블 값을 어떻게 불러올수 있나요?

  • HTML/CSS
  • figma
  • 포트폴리오
  • 인공지능(ai)
  • 바이브코딩
김혜령 댓글 3 좋아요 0 조회수 248

Token 등록 방법 문의

미해결

Figma MCP × AI x Vibe Coding 4시간만에 완성하는 반응형 웹포트폴리오

안녕하세요. 배리어블 작성법 관련하여 궁금한 점이 있습니다. 강의에서는 모든 컴포넌트에 대하여 배리어블 값을 쪼개서 등록하는것으로 이해하였는데요. 토큰에 대해 리서치 했을 때, Primitive와 Semantic을 따로 활용하라는 권장도 있었어서 실무에서 어떻게 쓰는게 좋은지 궁금합니다. 예시 상황 : Component의 상단 Padding이 20, 하단 Padding이 10일 경우 -> TypeA (현재 강의안) : margin-top-section 20, margin-top-bottom 10으로 각각 등록 -> TypeB : Primitive로 padding 20px, 10px으로 등록 후 margin-top-section-> padding 20px margin-bottom-section -> padding 10px

  • HTML/CSS
  • figma
  • 포트폴리오
  • 인공지능(ai)
  • 바이브코딩
김혜령 댓글 1 좋아요 0 조회수 84

인스턴스스왑

미해결

피그마 시작하기

아이콘 하트 클릭 후 오른쪽 패널에서 인스턴스 스왑을 하려고 하는데 강의에서 나오는 것처럼 인스턴스 스왑 아이콘이 오른쪽 패널에 보이지가 않습니다. 해결 방법 알려주세요

  • 웹-디자인
  • 모바일-디자인
  • figma
  • ui
  • ux
이지영 댓글 2 좋아요 0 조회수 138

borderTransparent를 라이트/다크모드에 이중등록

해결됨

디자인 시스템 with 피그마

네이티브에 등록된 borderTransparent를 토큰플러그인에 라이트/다크모드에 이중 등록이 안되고, 둘중 하나에만 등록이 됩니다. 어떻게하면 되나요? https://www.figma.com/design/sNZYxS6FzfkmvAHKOxm6rD/%E2%9D%96-Uber--Started-?node-id=41-558&t=KCo6yU95fQT5nFgL-1

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

해결되었습니다.

해결됨

디자인 시스템 with 피그마

해결되었습니다.

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

채팅 UI 추가 속성 설정 질문

미해결

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

저는 선생님처럼 왜 아래 말풍선이 안보일까요..ㅠㅠ 제 프레임 말풍선 아래(안보임) 선생님 프레임 아래 말풍선(보임)

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

배리어블 Value에 관해 질문있습니다.

미해결

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

강의를 보면서 뇌를 비우고 따라 만들다보니 어느순간 궁금증이 생겼는데, style의 경우는 크기,행간,자간등을 입력해 놓고 입력된 텍스트를 style로 만들면 되는거니까 상관이없는데 배리어블의 경우엔 name을 붙히고 value에다가 값만 썼는데 그 값이 자동으로 연결되는건가요? 완성된 데이터를 넣질 않았는데 피그마가 자동으로 인식하는건가요? 어떤식으로 물어봐야될지 몰라서, 두서가 없는점 죄송합니다. 폰트 패밀리로 다시 여쭤보자면 name은 제가 임의로 붙히는거니까 상관이없고 문제는 value입니다. inter라는 텍스트 파일을 따로 넣지를 않고 단순 텍스트로만 Inter라고 적었는데 피그마프로그램에서 알아서 찾아서 연결지어주는지가 궁금합니다. 만약 그렇다고 한다면 텍스트 이름을 대소문자, 띄어쓰기를 유의하면서 적어야할까요?

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

인기 태그

인프런 TOP Writers

주간 인기글