묻고 답해요
156만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
navbar 인스턴스 selected on/off
강의처럼 NavBar 인스턴스 컴포넌트에서 Selected 불린 프로퍼티를 끄고 켬에 따라 컬러의 변경을 주고싶은데 아이콘 인스턴스 스왑한 아이콘들은 컬러가 안바뀝니다ㅠ디자인 패널에서 NavBarItems-1은 셀렉트에 따라 바뀌는데 2번같이 아이콘을 Person 아이콘으로 스왑한 아이콘에 대해선 셀렉트 상태에도 컬러가 변하지 않는데요, 원래 이런건가요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
칩
안녕하세요 볼드님 강의 너무 잘 듣고 있습니다. 다름이아니라 아이콘을 변경하려고 할 때 색깔이 변경이 안 되는 경우, 아이콘 굵기가 다르게 나올 때가 있는데 어떤 부분이 문제인지 궁금합니다.
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
피그마 작업환경을 어떻게 열어야 하나요?
회원가입부터 먼저 해서 동영상을 어떻게 따라해야 할지 모르겠어요. (제가 가입한 방법과 달라요)왼쪽에 페이지, 레이어 나와있고 위에 화살표랑 네모도 있는 작업 환경을 어떻게 들어갈 수 있나요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
SelectOption 컴포넌트에서 체크 On/Off
강의에서는 체크박스를 Boolean으로 처리하면 껏다가 켜는게 동시에 작동해서 따로 만드는걸 추천한다고 하셨는데, 지금 만들면서 테스트해보니까 복사한 인스턴스 각각에서 켰다가 끄는게 각자 동작하는데 혹시 동시에 동작하는게 어떤 상황에서 발생하는걸까요 ? 감사합니다 !!!
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
Component group 이름에 접두사로 part/를 붙이면 왜 검색이 안되나요 ?
이전 강의 자료에서 설명해주셨던 것 같은데 까먹었습니다.. 왜 검색이 안되고 어디에서 검색이 안되었던거였죠..?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
반응형 디자인 만들기 -> imagePlaceholder 배리어블
안녕하세요 볼드님!반응형 디자인 만들기 14:00쯤 레이어 눈 아이콘 우클릭을하면 로컬 배리어블이 나와야하는데 나오질 않습니다.... ㅠㅠTimeFrame은 눈모양 우클릭 배리어블 적용이 잘되는데imagePlaceholder 홀더에는 우클릭 적용이 안됩니다... 어디서 부터 잘못된건지 모르겠네요ㅜㅜ 도와주세요..
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
프레임 셀렉션 질문
도형을 프레임 셀렉션으로 지정했을 때 프레임 이름이 나오지 않습니다. 또 사이즈를 조절해도 박스만 움직이고 안에 있는 도형들은 움직이지 않고 제자리에 있습니다. 마지막으로 피그마 버전이 다른지 ... 사이즈 핏 버튼이 없는데 어디서 찾을 수 있나요? 어떻게 해결해야 하나요? 감사합니다.
-
해결됨디자인 시스템 with 피그마
컬러맵핑하고 라이트/다크 모드 설정시 색상 반전이 안돼요 ㅠㅠ
선생님 컬러 맵핑까지 잘 따라하고 있는데 맵핑 후 라이트 다크모드 지정하면 선생님처럼 색상 반전이 일어나야 하는데 아무 반응이 없어요 ㅠㅠ 왜 그런걸까요...
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
핵심컴포넌트 공유
열심히 강의를 듣고 있습니다.근데 혹시 핵심 컴포넌트가 모두 완성된 파일을 공유받을수 없는지요?디자인시스템 파일은 공유해주셔서 다운받아서 참고하면서 보고 있는데요,
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
color style guide 플러그인이 안나오는데요
듣다가 중간에 멈춰서 다시 처음부터 복습하려고 듣고 있는데요초반 강의중에 color style guide 플러그인이 강의를 따라하며서 해보면 강사님 화면처럼 모든 색상이 나오질 않고 아래처럼 나오는데요, 다시 처음부터 모든 색상이 다 나오게 하려면 어떻게 해야 하는지요?저는 플러그인을 열면 아래처럼만 나옵니다. 예전에 연습했던 화면으로만 나오는건지...그렇다면 다시 처음부터 모든 색상이 나오게 하려면 어찌 해야 할까요?
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
섹션 13 질문입니다. Asset에 Toolbar가 뜨지 않습니다
섹션 13 질문입니다.피그마 탬플릿에서 ctrl c + ctrl v 후에 강사님 강의에서는 asset을 선택하면 toolbar에서 asset이 뜨지만, 제꺼에서는 뜨지 않습니다.... 다른 ios example이 떠서요.detach는 되지만, 원인이 무엇인지는 모르겠습니다.
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
Create boolean property이 안보입니다. 보이게 하려면 어떻게 해야하나요?
Create boolean property이 안보입니다. 보이게 하려면 어떻게 해야하나요?
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
Constraints가 안보입니다.
라인 대각선 두개그리고 Constraints가 오른쪽 패널에 표시가 안돼는데요 표시될려면 어떻해야돼요?
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
피그마 버전이 어떻게 도나요
피그마 2024버전 인가요?피그마 2025버전 인가요?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
신 아이콘 등록방법
안녕하세요 . 볼드님 강의 정말 잘 듣고 있습니다. 아이콘 union이 잘 안 되어서, 그룹을 풀고, outline stroke를 한 뒤, flatten을 하려고 하니 , 저렇게 깨져서요.. 방향키를 조절해보아도.. 잘 안 되네요 이럴 때는 어떻게 해야할까요? ㅜㅜ
-
미해결피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
Constraint기능에서 Top & Bottom 기능이 연동이 안되네요
Left & Right는 적용이 잘되었는데, Top & Bottom 기능에서는 Constraint center한거마냥 움직여요..어떤것이 문제 일까요
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
베리어블 등록 이동하기
안녕하세요 볼드님1- 한 프로젝트에서 저장된 베리어블을 다른 프로젝트 파일에서 쓰는 방법이 있나요?2- 그리고 반응형 웹작업을 할때 네비게이션이 있는 페이지 구성 시 그리드는 피그마에서 어떤 방식으로 잡고 가시는지 궁금합니다. (좌측 네비랑 우측 메인을 따로 생각하여 구성하는지?)3- 웹 작업을 처음 하는데 피그마에서 1440px 일경우 보통 마진을 얼만큼으로 설정한다 이런 정해진 값이 있는것인지, 웹에서는 아이콘 픽셀 사이즈가 1.5/2px이 아닌 소수점으로 작업해도 되는지 등 모바일 작업보다 많이 막막한데 사이즈 지정에 대해서 도움을 받을수 있는 사이트 같은게 있을까요?늘 친절한 답변 감사드립니다.
-
미해결모바일 웹 퍼블리싱 포트폴리오 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
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
그리드 추가시 세부 설정
Layout grid를 한 개만 설정할 때에는 아이콘을 누르면 세부적으로 count, type 등을 지정할 수 있는데 2개 이상부터는 아이콘을 눌러도 세부 설정하는 모달이 안나오는데 어떻게 해야 하죠?
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
강의 완강 후 노션자료
안녕하세요. 강의 완강해서 설문조사와 수강평남겼습니다.노션자료도 공부해보고 싶은데 확인해 주시면 감사하겠습니다!