173만명의 커뮤니티!! 함께 토론해봐요.
미해결
[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
도형을 프레임 셀렉션으로 지정했을 때 프레임 이름이 나오지 않습니다. 또 사이즈를 조절해도 박스만 움직이고 안에 있는 도형들은 움직이지 않고 제자리에 있습니다. 마지막으로 피그마 버전이 다른지 ... 사이즈 핏 버튼이 없는데 어디서 찾을 수 있나요? 어떻게 해결해야 하나요? 감사합니다.
해결됨
디자인 시스템 with 피그마
선생님 컬러 맵핑까지 잘 따라하고 있는데 맵핑 후 라이트 다크모드 지정하면 선생님처럼 색상 반전이 일어나야 하는데 아무 반응이 없어요 ㅠㅠ 왜 그런걸까요...
해결됨
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
열심히 강의를 듣고 있습니다. 근데 혹시 핵심 컴포넌트가 모두 완성된 파일을 공유받을수 없는지요? 디자인시스템 파일은 공유해주셔서 다운받아서 참고하면서 보고 있는데요,
해결됨
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
듣다가 중간에 멈춰서 다시 처음부터 복습하려고 듣고 있는데요 초반 강의중에 color style guide 플러그인 이 강의를 따라하며서 해보면 강사님 화면처럼 모든 색상이 나오질 않고 아래처럼 나오는데요, 다시 처음부터 모든 색상이 다 나오게 하려면 어떻게 해야 하는지요? 저는 플러그인을 열면 아래처럼만 나옵니다. 예전에 연습했던 화면으로만 나오는건지...그렇다면 다시 처음부터 모든 색상이 나오게 하려면 어찌 해야 할까요?
미해결
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
섹션 13 질문입니다. 피그마 탬플릿에서 ctrl c + ctrl v 후에 강사님 강의에서는 asset을 선택하면 toolbar에서 asset이 뜨지만, 제꺼에서는 뜨지 않습니다.... 다른 ios example이 떠서요. detach는 되지만, 원인이 무엇인지는 모르겠습니다.
미해결
[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
Create boolean property이 안보입니다. 보이게 하려면 어떻게 해야하나요?
미해결
[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
라인 대각선 두개그리고 Constraints가 오른쪽 패널에 표시가 안돼는데요 표시될려면 어떻해야돼요?
미해결
[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
피그마 2024버전 인가요? 피그마 2025버전 인가요?
해결됨
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
안녕하세요 . 볼드님 강의 정말 잘 듣고 있습니다. 아이콘 union이 잘 안 되어서, 그룹을 풀고, outline stroke를 한 뒤, flatten을 하려고 하니 , 저렇게 깨져서요.. 방향키를 조절해보아도.. 잘 안 되네요 이럴 때는 어떻게 해야할까요? ㅜㅜ
미해결
피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z
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)
강의 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 문의하기 로 인프런 쪽으로 연락 주시기 바랍니다.
해결됨
[UI3 업데이트] 피그마 배리어블을 활용한 디자인 시스템 구축하기
안녕하세요. 먼저 좋은 강의 감사드립니다. 섹션5 버튼 부분 보고 있습니다. Assets 에서 아이콘 불러오기에서 막혔습니다. 섹션4 컴포넌트 만들기 위한 준비 에서 컴포넌트 만들기 전 라이브러리 세팅하기 에서 나온 BOLD PLUS Design System은 어디서 찾을 수 있나요? 현재 제 피그마는 스타터플랜으로 Library 보내지기가 안되는데 프로페셔널 플랜으로 업그레이드 시켜야만 Library 이용이 가능한가요?
미해결
[2024 업데이트] UX/UI 시작하기 : Figma 입문 (Inflearn Original)
4강부터 안나오네요 ㅠ 검은화면이 계속 나옵니다 어떻게 해결하면 될까요?
해결됨
디자인 시스템 with 피그마
안녕하세요. 6:15 에 나오는 'Create Style' 버튼이 안보이는데 최신 버전의 플러그인 기준으로 알려주실 수 있나요 ?
