묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[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 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
강의 완강 후 노션자료
안녕하세요. 강의 완강해서 설문조사와 수강평남겼습니다.노션자료도 공부해보고 싶은데 확인해 주시면 감사하겠습니다!
-
미해결[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
섹션6 컴포넌트 파고들기 [예제 실습] 컬러 테마 만들기 3 - 다크모드 관련 질문
강의 21초부터 레이어를 통해 다크모드를 현재 피그마에선 Layer 자체가 안 보여서 다크모드를 어떻게 적용하는지 모르겠습니다. 현재 피그마에서 레이어와 동일한 기능을 하는 메뉴가 뭔가요? ㅠㅠ
-
해결됨[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
디자인 시스템, 시멘틱 컬러 관련 질문이 있습니다.
안녕하세요, 질문이 여러개 있어서 글 남깁니다.시멘틱 컬러 강의에서 interactive 컬러들은 주로 Interactive한 요소, 즉 버튼 등에 활용을 하신다고 말씀하셨었는데 현재 예제에서는 text-interacitve-primary와 bg-interactive-primary가 색상이 파란색으로 동일한데 이런 경우에 파란색 primary 버튼을 만든다고 치면 텍스트는 Primary 컬러를 활용할 수 없는건가요? 컴포넌트는 Primary라는 이름을 쓰지만 텍스트 컬러는 sescondary가 활용되어도 되는건가요? 그리고 component는 버튼 등 필요한 경우에만 활용한다고 하셨는데 interacitve 컬러가 있는데도 버튼 컬러를 다시 한번 만들 이유가 있는건지 궁금합니다.마지막으로 디자인 시스템 뿐만 아니라 실제로 이걸 활용해서 컴포넌트나 실무 디자인을 한 예제는 볼 수 없을까요..?? 디자인 시스템 자료는 많은데 실제로 어떻게 활용되는지 감이 안 와서요 ㅠㅠ 우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.
-
미해결[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
파운데이션과 컴포넌트 파일 별도로 관리해야할까요?
안녕하세요 강사님! 덕분엔 베리어블 사용성에 대해 한층 더 깊게 알게 되었습니다. 감사합니다.수강 중에 궁금한 사항이 있는데요, 섹션 4에서 Foundation 과 Component 피그마 파일을 별도로 작업하신 이유가 무엇인가요? 하나의 피그마 파일 안에 컴포넌트 작업을 같이 진행해도 되는지 궁금합니다. 우선 강의를 들어주셔서 감사합니다. 강의 들으시면서 궁금하신 부분을 남겨주세요. 회사 일 관계로 빠른 답변이 어려울 수 있으며, 최대 3일 이내에 답변드리도록 하겠습니다. 이해를 돕기 위해서 스크린샷 이미지, 피그마 파일 링크를 반드시 첨부해주세요. 마지막으로 먼저 유사한 질문이 있는지 한번 찾아보시는 걸 권장 드립니다. 인프런 서비스 운영 관련해서는 1:1 문의하기로 인프런 쪽으로 연락 주시기 바랍니다.