디자인 시스템 세팅 임포트

안녕하세요. 퍼블리시 버튼을 오류가 나는 경우는 여러 상황이 있습니다.혹시 파일이 드래프트 안에 없는지?새로 한번 retry를 해보셔도 됩니다. 저의 경우 다운 받아서 해본 결과 퍼브리싱이 잘됩니다. 혹시나 안되시면 강의에서는 기존 스타일 가이드에 페이지를 만들어서 컴포넌트를 추가하셔도 됩니다. 컴포넌트 관련된 파일은 현재 공유해드리지 않으며, 추후 어려움이 있으시면 글이 아닌 온라인 구글 챗으로 제가 화면을 보면서 도와드리겠습니다혹시 계속 안되시면 boldplus.ux@gmail.com으로 연락주시면 스케쥴을 잡도록 하겠습니다. 강의 어려운 부분이 있다고 하셔서 그 부분도 제가 자세히 안내해드리면 좋을 것 같습니다. 볼드 드림.

디자인 시스템 세팅 임포트

안녕하세요, 예진님. 섹션 1에서 강의 제목 중 피그마 파일 공유를 찾으시면, 섹션 2에서 만든 스타일 파운데이션을 확인하실 수 있습니다. 이를 클릭하시면 피그마 커뮤니티 파일로 이동합니다. 거기서 “Open in Figma” 버튼을 누르신 후 원하시는 폴더로 옮기시면 바로 사용 가능하며, 이후 섹션 3로 진행하시면 됩니다. 인프런 강의 화면(사진) 피그마 커뮤니티 화면(사진) 또한, 섹션 2를 진행하시다가 막히는 부분이 있다고 하셨는데, 필요하시면 온라인 라이브 세션을 통해 차근차근 설명드리겠습니다. 언제든지 편하게 알려주세요!감사합니다.볼드 드림.

스케치 피그마 임포트

안녕하세요, 예진님 질문 주셔서 감사합니다.현재 제가 제공드리는 파일은 .fig 확장자로 되어 있는 피그마 파일입니다. 한번 확장자를 확인해보시기 바랍니다. 피그마 파일, 스케치파일 상관없이 외부 파일을 피그마로 가지고 오고 싶으면 가져오기(Import)를 하셔야합니다. 아래의 메인 화면에서 오른쪽 상단의 Import를 누르시고 모달에서 버튼(Import from comupter)을 하시면 가지고 오시면 예진님의 폴더에 생성될 것입니다. (이미지 첨부) 잘 안되시면 또 질문 주세요!감사합니다. (사진)

업데이트가 되어 강의부분과 많이 달라 따라가기 어려워요.

안녕하세요, imyevely님, 강의를 들으시면서 불편을 겪게 해드려 죄송합니다. 제 강의는 UI2로 제작되었습니다. 따라서 강의를 수강하실 때 Figma를 UI2 모드로 변경하시길 권장드립니다. 강의를 모두 수강하신 후에는 UI2에서 UI3로 변경하는 방법을 안내하는 “UI3 컴포넌트 강의”를 들으시길 추천드립니다. 추가적으로 "UI3 컴포넌트로 버튼 컴포넌트 만들기" 강의는 이번 주 내로 업데이트될 예정입니다. 추가로 어려움이 있으시다면 언제든지 디스코드로 문의 주시면 라이브로 도움을 드리겠습니다. 강의 업데이트는 순차적으로 진행될 예정입니다:• 피그마 변수와 스타일 가이드• 컴포넌트• 모드와 페이지 각각 내년 상반기 중으로 업데이트될 예정이며, 현재도 UI3는 불완전하여 지속적으로 업데이트되고 있다는 점 참고 부탁드립니다. imyevely님께서 거의 완강하셨으므로, UI2와 강의를 통해 개념과 원리를 이해하시고, UI3는 별도로 연습해보시길 추천드립니다. 혹시 추가로 궁금하신 사항이 있으시면 언제든지 문의해주세요. 감사합니다.

완강 이벤트에 참여 했는데, 자료는 언제쯤 받아 볼 수 있을까요?

안녕하세요, 호랭이님. 강의를 완강해주시고 이벤트에 참여해주셔서 감사합니다. 제가 수기로 확인하고 보내드리느라 늦어졌습니다. 메일 확인 부탁드리며, 문제가 있으시다면, boldplus.ux@gmail.com으로 문의주시기 바랍니다. 감사합니다.볼드 드림.

버튼 생성시

네 맞습니다. 컴포넌트 내부의 인스턴스를 선택하면 디자인 패널에서 눈 아이콘 옆에 있는 버튼을 선택하시고 프로퍼티를 등록하시면 됩니다. 제 강의를 들으실 때는 우선 UI2로 적용해서 들으시면 보시는데 편할 것 같습니다. 오른쪽 디자인 패널의 Appearance(사진) 눈 옆에 아이콘을 선택한 후 plus 버튼 선택 그러면 create property or vaiable이 나타나며 여기서 property를 선택한 다음 이름 및 값을 적용하면 됩니다.(사진) 이번 주에 완강자 분들을 위한 UI3로 컴포넌트 만들기 미니 30분 강좌를 올릴 예정입니다.또한 UI3로 변형된 전체 강의는 현재 촬영 및 편집 준비 중이며, 업데이트 되는대로 공지 올리도록 하겠습니다. 감사합니다.

디스코드 참여 안됨

안녕하세요, 미진님 혹시 boldplus.ux@gmail.com으로 메일 보내주실 수 있으실까요?제가 따로 링크 보내드리겠습니다. 최근까지 접속이 가능한 것으로 봐서는 링크는 작동을 하는 것 같습니다.불편을 드려서 죄송합니다.감사합니다.

디자인시스템 작업중 생긴 여러 질문들 드립니다.

안녕하세요, Cloe님, 좋은 질문들 주셔서 정말 감사합니다. 사소한 질문도 언제든지 남겨주세요.1. 두 개의 Shadow를 사용하는 이유첫째, 효과(effect)를 사용하는 이유는 우리가 구현하는 UI가 현실과 최대한 비슷하게 보이도록 하기 위함입니다. 그중에서도 Shadow는 빛과 관련되어 입체감을 나타내는 중요한 역할을 합니다. 제가 준비 중인 기초 강의 내용을 참고하자면, 미술 시간에 원형 구에 빛이 비추었을 때를 떠올려보세요. 아래에 넓게 드리워진 그림자와 그 안에 반사광이 미치지 않는 매우 어두운 그림자를 기억하실 것입니다. Shadow를 구현할 때도 이와 마찬가지로, 빛이 비추면서 반사광에 의해 희미해진 Cast Shadow와 Occlusion Shadow를 함께 표현한 것입니다. 이 두 가지 개념이 두 개의 Shadow를 사용하는 주요 이유 중 하나라고 생각합니다.(사진) 2. Scrim, Overlay, Dimmed의 의미 Scrim, Overlay, Dimmed는 모두 모달 창과 배경 콘텐츠를 구분하기 위해 사용됩니다. 명확하게 구분하면 약간의 차이가 있겠지만, 역할 측면에서는 비슷합니다. 여러 디자이너들과 작업하다 보면 각자의 경험에 따라 다른 용어를 사용하는 경우가 많습니다. 특히 베리어블(variable)을 작성하거나 컴포넌트 네이밍을 정할 때도 마찬가지입니다. 이런 경우 저는 워크샵을 통해 용어를 통일하는 편입니다. • Status vs. State• Disable vs. Disabled, Enable vs. Enabled• Collapsed, Expanded vs. Open, Close• Collapse vs. Collapsed (수동태, 능동태 등)등등이러한 용어들을 함께 정리하고 문서화하는 것이 매우 중요합니다. 3. 레이어 네이밍 전략 네이밍의 경우, 제가 4월에 진행한 워크샵에서 진행한 다음의 방법이 매우 유용합니다.우리가 디자인을 할 때 보통 세 가지 단계가 있습니다: 아이디어, 디벨롭, 핸드오프. 1. 아이디어 단계: 레이어 이름에 신경 쓰지 말고 마음껏 만듭니다. 예를 들어 ‘Frame2212312’처럼 이름이 되어도 상관없습니다. 아이디어에 집중하는 것이 중요합니다.2. 디벨롭 단계: 이 단계에서는 깔끔하게 정리하면 됩니다. Figma의 AI Rename 기능을 사용하면 간단히 정리할 수 있습니다.3. 핸드오프 단계: 개발자들이 이해하기 쉽도록 의미 있게 정리합니다. 번거로울 수 있지만 ‘Container’, ‘Wrap’ 등 기본적인 용어를 사용하여 정리하면 됩니다. 너무 멋진 이름을 만들려고 하지 않아도 됩니다. 개발자분들은 레이어보다는 오른쪽의 프로퍼티에 더 관심이 많습니다. 4. 라이브러리 활용라이브러리를 사용할 때는 베리어블(토큰)을 만들 때 라이브러리의 용어를 참고하여 만드는 것을 추천드립니다. 하지만 무엇보다도 개발자분들과 상의하여 어떻게 구성할지 결정하는 것이 가장 중요합니다. 라이브러리의 장점은 이미 만들어져 있다는 것이지만, 서비스에 따라 수정이 필요할 수도 있습니다. 최대한 라이브러리와 동일하게 구현하거나 비슷한 라이브러리를 찾아 커스텀하는 것도 좋은 방법입니다. 제 강의에서 제공하는 33개의 컴포넌트를 만들어보시면 모두 구현하실 수 있을 것입니다. 5. 에이전시의 멀티 프로젝트 관리 에이전시에서 여러 프로젝트를 동시에 진행하는 경우, 초기에도 언급했던 Conde Nast의 방법이 유용할 것 같습니다. 화이트라벨 컴포넌트 라이브러리를 사용하여 스타일 가이드를 스왑하는 방식인데요. 제 강의에서 언급한 방법도 좋지만, 엔터프라이즈 계정은 40개의 모드를 지원하는 반면, 오거나이제이션 계정은 최대 4개까지만 지원합니다. 그래서 추천드리는 방법은 예를 들어, 디자인 시스템 관리를 프로젝트 5개를 동시에 진행한다면: • 화이트라벨 컴포넌트 라이브러리를 만들고,• 각 프로젝트마다 스타일 가이드를 생성하며,• 베리어블 이름을 동일하게 설정합니다.그런 다음 Apply Variable 플러그인을 사용하면 동일한 이름의 베리어블을 한꺼번에 스왑할 수 있습니다.이렇게 하면 프로젝트마다 컴포넌트 라이브러리를 만들 수 있습니다. 에이전시마다 다르지만 클라이언트가 만약 라이브러리와 스타일가이드를 요청하면 그 프로젝트 해당하는 것만 보내면 됩니다. 질문 주신 부분에 대해서 위와 같이 정리해보았는데, 혹시 추가 질문이 있으시면 언제든지 말씀해주세요. 볼드 드림.

컬러선택시 아이콘 컬러가 리스트에서 안보여요

안녕하세요, 아이콘에서 원하는 color/icon/interactive 베리어블이 나타나게 하려면 다음의 2가지 조건이 있어야하며, 이것이 충족되어 있는지 한번 꼭 체크해보시기 바랍니다. 아이콘의 경우는 면으로 처리 되어 있어야 합니다. 면으로 처리하는 과정은 새로운 아이콘 강좌에서 살펴보시면 됩니다.베리어블의 Scope가 Shape로 지정되어 있는지 확인 해보시기 바랍니다.두가지 조건이 만족하면 보이게 됩니다. 혹시 안되시면, 제 이메일로 파일 공유해주시면 한번 체크해드리도록 하겠습니다. boldplus.ux@gmail.com

Frame 생성 시, layer가 모이지 않음

안녕하세요, 정인님 질문 주셔서 감사합니다. 왼쪽에 보시면 오토레이아웃이 감싸진 레이어 Frame 1이 보이며, 제 생각에는 그 안에 원형 레이어가 있을 것 같습니다. 레이어 Frame 1에서 Enter/Return을 누르시거나 호버하시면 화살표가 나타날텐데, 한번 눌러보시기 바랍니다.만약 프로페셔널 계정이 아니시고 에듀 계정이시면, boldplus.ux@gmail.com으로 공유해주시면 제가 파일로 들어가서 체크해드리도록 하겠습니다. 감사합니다.(사진)