inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

3차시 실전 예시학습중입니다

해결됨

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

저는 기획 및 시스템 운영 업무를 주로 하고 있는데 UIUX 쪽을 좀 아는게 도움이 될것 같아 이 강의를 학습중입니다. 현재 3차시를 학습 중인데, 서비스소개 페이지 만드는 예를 들어서 보고 따라하고 싶은데 PPT로 하기에는 조금 한계가 있어보이는데, 이런 걸 하실때 강사님은 어떤 툴을 사용해서 작업 하시나요? 간단하게 따라 해 보고싶은데 간단하지가 않네요

  • 웹-디자인
  • ui
  • ux
  • 프로덕트디자인
  • 심리학
하루분 댓글 3 좋아요 0 조회수 95

강의자료 공유 부탁드립니다

해결됨

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

혹시 강의하실때 사용하신 자료를 pdf 형태로 공유 부탁드려도 될까요? 메모 하면서 강의 들으면 훨씬 도움이 많이 될 것 같습니다. 제 메일은 dytleekd@korea.kr 입니다

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

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

미해결

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

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

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

스피너 아이콘 크기 질문

미해결

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

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

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

미리보기 빈칸생기는 현상

미해결

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

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

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

아이콘 빌런 부분

미해결

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

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

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

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 조회수 100

해결되었습니다.

해결됨

디자인 시스템 with 피그마

해결되었습니다.

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

채팅 UI 추가 속성 설정 질문

미해결

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

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

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

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

미해결

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

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

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

Body>font weight 에서 semibold에 짝대기가 생기는 이유?

미해결

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

semibold에 짝대기가 생겼는데 연결이 깨졌다는 의미일까요? 짝대기가 없어지려면 어떻게 해야하나요?

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

Navigation Mobile 토글 베리어블이 안됩니당

미해결

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

Navigation Mobile 베리어블 만들었는데 오른쪽 위 옵션에 안떠요.. 그리구 Appearance의 눈모양 우클릭하면 거기에는 Navigation Mobile 옵션을 선택할 수 있는데 그걸로 설정하면 네비가 랩탑일때는 꺼지고 모바일일때는 보이는 방식으로 설정이 돼요 영상과 같이 랩탑모드로 하면 랩탑네비로 모바일일때는 모바일네비로 프레임 모드 클릭 한번에 바뀌게 하는 방법을 모르겠어요ㅠ.ㅠ

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

Typography 모드 적용시 표현된 값과 우측에 표시되는 값다름

미해결

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

따라해보고있는데 Mobile 모드로 했을때 표현되는건 40/48로 잘 적용이 됐는데 우측 Typography 창에는 60/68 이라고 뜨고 뜯어봐도 60 / 68 로 등록되어있어요 40/48 이어야되는데 왜이럴까요..?

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

안녕하세요.

미해결

생성형 AI를 활용한 UX/UI 디자인 포트폴리오 워크숍

안녕하세요. 해당 강의 Part 0 부분 어디에서 학습이 가능한가요? 또한, 수강 시 제공되는 자료 ① 프롬프트 엔지니어링 가이드 ② 실무형 포트폴리오 템플릿 ③ 핵심 UX/UI 용어집 자료 어디에서 확인해볼 수 있나요?

  • ux-리서치
  • 인공지능(ai)
  • ux
  • ux-기획
  • 프로덕트디자인
unclairdelune 댓글 1 좋아요 0 조회수 81

신규 업데이트 내용

미해결

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

4월 13일 무언가 업데이트 되었다는데 업데이트 내용은 어디서 확인할 수 있을까요? 인프런 강의 새소식 및 디스코드에 관련 내용이 없길래 질문드립니다.

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

예제 파일 오류

미해결

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

안녕하세요 예제 파일을 다운로드 받았는데 잦은 오류 발생으로 원활한 수업 진행이 되지 않는 상황입니다.가능하시다면 답변에 예제 파일을 기재해주시면 보다 쾌적한 수업 진행이 될 것으로 사료되어 요청드립니다.감사합니다.

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

디자인 시스템에 그룹명을 숨길 수도 있나요?

미해결

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

안녕하세요! 강의를 수강중 다른 회사의 디자인 시스템은 계층구조를 잘 쓰고 있을까? 궁금해서 피그마에 원티드 디자인 시스템을 살펴보았는데요 아무레이어를 만든 후 semantic이라는걸 보고 계층구조를 쓰고 있는건가? 해서 배리어블 창을 여니까 semantic이라는 그룹명이 보이지가 않습니다.. <질문> semantic은 외부 라이브러리의 잔여물인건지 아니면 숨길 수가 있는건지 궁금합니다. 이 회사의 게층 구조는 atomic(강의의 primitive) theme(theme,semantic) 이런 2구조 인지 궁금합니다. component와 frame은 role이지만 따로 포함하기엔 복잡해도 예외로 빼둔 걸까요? semantic의 역할이 궁금합니다! primitive는 재료, theme는 브랜드 스타일, 컨셉이면 semantic은 강의 내용에서는 라이트모드, 다크모드라 되어있지만 text,bg,icon등 전부를 포괄하는 ui 요소라고 봐도 될까요?

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

디자인 시스템 네이밍에 관한 질문드립니다.

미해결

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

네이밍 순서에서 막혀서 한동안 수강하지않다가 다시 마음다잡고 처음부터 보고 있는 수강생입니다. 1. 첫번째 질문입니다. 여기부분에서 Namespace - Object - Base - Modifier의 구성요소랑 내용이 머리속에 입력이안되어서 종이에 써가면서 맥락을 파악했는데요. 그다음 설명에서 위에 해당 이미지가 뜨면서 "외계어이지만 이제는 좀더 이해가하기 쉬울 것"이라고 말씀해주셨는데 혼란스럽습니다. 1.system(namespace) : p 2. Base(category) : color 3. Base(property) : bg 4. Role : interactive 갑자기 롤이 왜나오는지? 5. Modifier(Variant): subdeued 6. Modifier(State) : hover 앞선 강의내용대로 맥락을 파악했으나 뜬금없이 Role나와서 이해가 되지 않습니다.. 그리고 2번째 질문입니다. 배리어블 계층 구조가 뭔지 모르겠습니다. "Raw value - Primitive - Theme - Semantic" 이런 계층 구조가 디자인 시스템 이름 짓는 순서에 연관되는건지 폴더별 분류를 할때 쓰는건지 무언가 정리되지 않아서 혼란스럽습니다.

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

예시파일 불일치

미해결

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

저말고 다른분도 이와같은 문의를 남긴점이 확인됩니다. 강의시작 후 4강에서 통합 예시파일을 받았는데 Practice v1.fig 파일명이고 마지막 업데이트 날짜가 24/08/2024 로 되어있습니다. 이게 최신 자료가 맞는지요? 6강 내용중 '선과 방향선' '원형과 부채꼴' 등의 실습자료가 없고, '요약정리' 만 존재합니다. 어떤부분까지가 강의 화면에만 존재하는 내용인지, 어떤부분이 자료로 제공되는것인지 불분명해서 강의 초입에 불편함을 느끼고 있습니다. 최신 통합 예시파일 링크를 별도로 제공해주시거나 인프런 자료 다운받기 시 최신 자료를 받을 수 있도록 수정하여 업로드 부탁드립니다.

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

강의자료 요청드립니다.

해결됨

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

좋은 강의 올려주셔서 감사합니다. 잘 듣고 있습니다. 강의자료 요청드려도 될까요. 이메일 함께 첨부합니다. typhoony@naver.com

  • 웹-디자인
  • ui
  • ux
  • 프로덕트디자인
  • 심리학
이진경 댓글 3 좋아요 0 조회수 122

인기 태그

인프런 TOP Writers

주간 인기글