inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

피그마에 상단 가운데 툴바가 어디있죠?

미해결

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

상단 가운데 툴바가 안 보입니다. 버전이 달라서 그런 건가요?

  • 프로토타이핑
  • 모바일-디자인
  • figma
  • ux-기획
  • 프로덕트디자인
카피바라 댓글 3 좋아요 0 조회수 1840

자바강의도 하나짜리 full버전이 나오나요?

해결됨

모던 웹 인터렉티브 CSS3 부트캠프 [Full vers.]

자바강의 신청하려고하는데 이전사례처럼 하나짜리 통으로 풀버전으로 편집되서 출시될지 궁금해요

  • HTML/CSS
  • 웹-디자인
  • 모바일-디자인
  • 클론코딩
pcdo.omco 댓글 1 좋아요 0 조회수 163

피그마 작업환경을 어떻게 열어야 하나요?

미해결

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

회원가입부터 먼저 해서 동영상을 어떻게 따라해야 할지 모르겠어요. (제가 가입한 방법과 달라요) 왼쪽에 페이지, 레이어 나와있고 위에 화살표랑 네모도 있는 작업 환경을 어떻게 들어갈 수 있나요?

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

프레임 셀렉션 질문

미해결

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

도형을 프레임 셀렉션으로 지정했을 때 프레임 이름이 나오지 않습니다. 또 사이즈를 조절해도 박스만 움직이고 안에 있는 도형들은 움직이지 않고 제자리에 있습니다. 마지막으로 피그마 버전이 다른지 ... 사이즈 핏 버튼이 없는데 어디서 찾을 수 있나요? 어떻게 해결해야 하나요? 감사합니다.

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

섹션 13 질문입니다. Asset에 Toolbar가 뜨지 않습니다

미해결

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

섹션 13 질문입니다. 피그마 탬플릿에서 ctrl c + ctrl v 후에 강사님 강의에서는 asset을 선택하면 toolbar에서 asset이 뜨지만, 제꺼에서는 뜨지 않습니다.... 다른 ios example이 떠서요. detach는 되지만, 원인이 무엇인지는 모르겠습니다.

  • 웹-디자인
  • 모바일-디자인
  • figma
  • 프로덕트디자인
compile62 댓글 2 좋아요 0 조회수 179

Constraints가 안보입니다.

미해결

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

라인 대각선 두개그리고 Constraints가 오른쪽 패널에 표시가 안돼는데요 표시될려면 어떻해야돼요?

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

피그마 버전이 어떻게 도나요

미해결

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

피그마 2024버전 인가요? 피그마 2025버전 인가요?

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

Constraint기능에서 Top & Bottom 기능이 연동이 안되네요

미해결

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

Left & Right는 적용이 잘되었는데, Top & Bottom 기능에서는 Constraint center한거마냥 움직여요..어떤것이 문제 일까요

  • 웹-디자인
  • 모바일-디자인
  • figma
  • 프로덕트디자인
compile62 댓글 2 좋아요 0 조회수 200

모바일 웹 레이아웃 도움요청드립니다! (왕초보)

미해결

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

CSS 구조 문의드립니다. Wrapper를 이용해서 인증번호, 재발송, 우편번호 찾기 버튼을 화면 안으로 넣고 싶은데 어떻게 하는지를 도저히 모르겠습니다.. 아시는 분은 도와주시면 정말 감사하겠습니다. style.css 일부 /* Import Local CSS */ @import url('/css/reset.css'); @import url('/css/variables.css'); * { font-family: var(--primary-kr); font-weight: 500; box-sizing: border-box; } body { margin: 0; font-family: var(--primary-kr); color: var(--dark-black); font-size: 14px; } .container { width: 100%; max-width: 393px; margin: 0 auto; padding: 16px; background-color: var(--white); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border-radius: 10px; box-sizing: border-box; font-family: var(--primary-kr); } .phone-input-wrapper { display: flex; /* 플렉스 박스 설정 */ justify-content: space-between; } .phone-input-wrapper input[type="tel"] { width: 60%; /* 입력 필드가 가변적인 공간을 차지 */ padding: 10px; border: 1px solid var(--gray); font-size: 14px; height: 40px; /* 동일한 높이 */ box-sizing: border-box; /* 패딩과 테두리를 포함한 크기 계산 */ } .phone-input-wrapper .btn-certification { width: 40%; /* 선택박스의 고정 너비 */ height: 40px; /* 입력 필드와 동일한 높이 */ padding: 10px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; /* 패딩 포함 */ } /* 인증번호 입력 필드 */ .auth-input-wrapper { display: flex; /* Flexbox로 가로 정렬 */ align-items: center; /* 세로 중앙 정렬 */ justify-content: space-between; width: 100%; /* 부모 요소의 너비를 꽉 채움 */ max-width: 393px; box-sizing: border-box; /* 패딩 포함 */ position: relative; /* 타이머 배치를 위해 필요 */ flex-wrap: wrap; } .auth-input-wrapper input { flex: 0; /* 입력 필드가 가용 공간을 차지 */ height: 40px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; min-width: 70%; /* 최소 너비 설정 */ } .auth-input-wrapper .timer { flex: 0; position: absolute; /* 입력 필드 내부 배치 */ right: 45%; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--alert-red); pointer-events: none; /* 클릭 불가 */ } .auth-input-wrapper .reset { display: flex; position: absolute; align-items: center; right: 40%; justify-content: center; text-decoration: none; /* 기본 링크 스타일 제거 */ margin-left: 10px; /* 타이머와의 간격 */ overflow: hidden; } .auth-input-wrapper .reset-link img { width: 16px; /* 아이콘 크기 */ height: 16px; } .auth-input-wrapper .reset-link:hover { background-color: var(--lightblue); /* 호버 시 색상 변경 */ transition: background-color 0.2s ease; } .auth-input-wrapper .btn-resend { flex: 1; height: 40px; font-size: 14px; color: white; background-color: var(--blue); border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; /* 텍스트 줄바꿈 방지 */ min-width: 60px; /* 버튼 최소 너비 */ } /* 주소 필드 래퍼 */ .address-wrapper { display: flex; align-items: center; width: 100%; /* 화면 너비에 맞춤 */ box-sizing: border-box; } .address-wrapper input[type="text"] { width: 60%; height: 40px; padding: 10px; border: 1px solid var(--gray); font-size: 14px; box-sizing: border-box; min-width: calc(70% - 10px); /* 최소 너비 */ } .address-wrapper .btn-post-search { flex: 0 0 auto; /* 버튼 크기 고정 */ height: 40px; padding: 0 15px; font-size: 14px; color: white; background-color: var(--navybutton); border: none; border-radius: 6px; cursor: pointer; white-space: nowrap; /* 텍스트 줄바꿈 방지 */ min-width: 100px; /* 버튼 최소 너비 */ } signup-email.html <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>회원가입</title> <link rel="stylesheet" href="/css/style.css"> </head> <body> <!-- Signup Form --> <div class="signup-content"> <div class="signup-field"> <label for="username">아이디<em>*</em></label> <input type="text" id="username" placeholder="아이디 입력" required> </div> <div class="signup-field"> <label for="password">비밀번호<em>*</em></label> <input type="password" id="password" placeholder="영문+숫자+특수문자 8자 이상" required> </div> <div class="signup-field"> <label for="password-check">비밀번호 확인<em>*</em></label> <input type="password" id="password-check" placeholder="비밀번호 확인 입력" required> </div> <div class="signup-field"> <label for="name">이름<em>*</em></label> <input type="text" id="name" placeholder="이름 입력" required> </div> <div class="signup-field"> <label for="email"> 이메일<em>*</em> </label> <div class="email-input-wrapper"> <input type="email" id="email" name="email" placeholder="이메일 입력" required> <select name="email-domain" id="email-domain"> <option value="">선택하기</option> <option value="gmail.com">gmail.com</option> <option value="naver.com">naver.com</option> <option value="daum.net">daum.net</option> </select> <span class="dropdown-icon"></span> <!-- SVG 아이콘 위치 --> </div> </div> <div class="signup-field"> <label for="phone">휴대폰<em>*</em></label> <div class="phone-input-wrapper"> <input type="tel" id="phone" placeholder="숫자만 입력" required> <button class="btn-certification">인증번호</button> </div> </div> <div class="signup-field"> <label for="auth-code"></label> <div class="auth-input-wrapper"> <input type="text" id="auth-code" placeholder="인증번호 입력" required> <span class="timer">00:00</span> <a href="#" class="reset"> <img src="/images/reset.svg" alt="Reset Icon"> </a> <button class="btn-resend" type="button">재발송</button> </div> </div> <div class="signup-field"> <label for="address">주소<em>*</em></label> <div class="address-wrapper"> <input type="text" id="address" placeholder="주소 입력" required> <button class="btn-post-search">우편번호 찾기</button> </div> </div> <div class="signup-field"> <label for="address-detail"></label> <input type="text" id="address-detail"> </div> <div class="signup-field"> <label for="address-detail">상세주소<em>*</em></label> <input type="text" id="address-detail" placeholder="상세 주소 입력" required> </div> <p class="notice">배송지에 따라 상품 정보가 달라질 수 있습니다.</p> <div class="thirdline"></div> <!-- 위에 줄 --> </div> </body> </html> style.css

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

그리드 추가시 세부 설정

미해결

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

Layout grid를 한 개만 설정할 때에는 아이콘을 누르면 세부적으로 count, type 등을 지정할 수 있는데 2개 이상부터는 아이콘을 눌러도 세부 설정하는 모달이 안나오는데 어떻게 해야 하죠?

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

섹션6 컴포넌트 파고들기 [예제 실습] 컬러 테마 만들기 3 - 다크모드 관련 질문

미해결

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

강의 21초부터 레이어를 통해 다크모드를 현재 피그마에선 Layer 자체가 안 보여서 다크모드를 어떻게 적용하는지 모르겠습니다. 현재 피그마에서 레이어와 동일한 기능을 하는 메뉴가 뭔가요? ㅠㅠ

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

강의듣다가 궁금해져서 문의 남깁니다. (빼꼼이 슬라이드 반응형)

미해결

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

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 안녕하세요 선생님 강의듣다가 궁금해져서 문의남깁니다. 빼꼼이 슬라이드를 반응형에도 적용하고 싶을땐 .good-suggestion-items{ width:430px }말고 어떤 값을 줘야될지 궁금합니다.

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

예제 실습 채팅 ui 만들기

미해결

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

지금 44강 예제 실습- 기본 기능 활용한 채팅 ui 만들기를 듣고 있습니다 여기서 10분 43초의 화면처럼 오토 레이아웃 안에 사진을 가로정렬로 복제해서 넣고 싶은데 계속 세로정렬로만 됩니다. 디자인 패널에 가운데 위치하는 것과 horizontal layout 모양, 패딩 값까지 영상 속 내용처럼 동일하게 했는데 왜 저는 강사님처럼 가로정렬로 사진을 나열할 수 없는 걸까요? 챗 gpt의 도움으로도 해결할 수 없어 연락드립니다 강사님은 오토 레이아웃이 된 상태에서도 어떻게 사진을 가로정렬로 하신 걸까요?

  • 프로토타이핑
  • 모바일-디자인
  • figma
  • ux-기획
  • 프로덕트디자인
피그마학생 댓글 0 좋아요 0 조회수 205

피그마 활용 클래스 > 4 컴포넌트 boolean

미해결

피그마 시작하기

섹션 4. 피그마 활용 클래스 강의 중 4-4강에서 버튼을 만들어 하트 아이콘을 넣고 컴포넌트화 시킨 후 하트 아이콘을 클릭하고 boolean 기능을 추가하는 부분이 현재 피그마 UI와 달라서 어떻게 만들고 적용하는 지 모르겠습니다. 업데이트 되면서 패널 속성이 바뀐 것 같은데 어떻게 만들고 적용하면 되나요?

  • 웹-디자인
  • 모바일-디자인
  • figma
  • ui
  • ux
ican125 댓글 1 좋아요 0 조회수 973

섹션2 자료 확인 부탁드립니다~!

미해결

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

선생님 ~ 섹션2 [실습] HTML 와이어프레임 만들기 실습(커스텀 체크박스 로그인 폼) 듣고 있는데 자료 다운 폴더에 모바일 웹 HTML 와이어프레임 구조 폴더가 없는것 같습니다. HTML 와이어프레임 실습(로그인 폼), 모바일 웹 개별 페이지(PNG) 등 등, 그리고 피그마 주소도 보이지 않네요 ~! 자료 받을수 있을까요?

  • HTML/CSS
  • 모바일-디자인
  • wireframe
  • iframes
  • slick-slider
스리 댓글 2 좋아요 1 조회수 161

예제 실습

미해결

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

예제 실습에서 설정 아이콘을 만들 때 가운데 작은 원 4 4 사이즈는 stroke를 1로 설정해도 되는 건가요? 그러니까 톱니 모양은 stroke이 1.5 이지만 작은 원은 4 4 사이즈에 1로 해도 되는 것인지 여쭤보고 싶습니다

  • 프로토타이핑
  • 모바일-디자인
  • figma
  • ux-기획
  • 프로덕트디자인
피그마학생 댓글 1 좋아요 0 조회수 147

인기 태그

인프런 TOP Writers

주간 인기글