묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨디자인 시스템 with 피그마
디자인 시스템 컴포넌트 properties 사용 시 오류에 대해
안녕하세요! 디자인 시스템을 구축하고 사용하는 과정에서 생각지 못한 오류가 있어 질문 드립니다:) 현재 실무에서 디자인 시스템을 구축하면서 컴포넌트를 생성하고 properties를 설정한 후에이 컴포넌트를 피그마 새로운 디자인 파일을 생성하여 가져다 쓰는 경우가 많습니다. 이때에 원본 컴포넌트를 수정하는 경우에 가져다 쓴 복제된 컴포넌트도 같이 수정되어 연동되는 것으로 알고 사용하고 있었는데 연동이 되지 않는 경우가 있더라구요. 디자인 시스템을 만드는 이유가 원본 컴포넌트를 수정하면 복제된 컴포넌트들도 같이 연동되어 반영시키기 위해 사용하는 장점이 크다고 생각하는데요. 같은 디자인 파일에서 다른 페이지에 가져온 컴포넌트는 연동되는데 아예 다른 파일 페이지에 가져오면 연동되지 않아서 이동된 복제된 컴포넌트를 다시 한번 컴포넌트를 생성해주어 해당 페이지에서 원본 컴포넌트와 추가로 복제된 컴포넌트를 사용해야 하는 상황이 되었습니다. 선생님도 이렇게 사용하는 경우가 있으신지 궁금합니다! 😅
-
해결됨디자인 시스템 with 피그마
Text Type Setting에서 대문자 전환이 되지 않습니다! 도와주세요!
게시판에 이미 유사한 질문이 있지만 선생님 답변을 참고하고도 해결되지 않아서 질문 드려요!저도 Uppercase로 전환하는 선택지가 뜨지 않습니다ㅠㅠ 버전을 확인했는데도 이미 최신버전이라고 떠요!혹시나해서 재설치했는데도 잘 해결되지 않습니다해결할 수 있는 방법이 있을까요?
-
해결됨디자인 시스템 with 피그마
컴포넌트 프로퍼티 지정하는 경우 리스트가 다릅니다
안녕하세요. 우선 유익한 강의 감사드립니다!강의를 보다가 아무리 보아도 제가 보는 화면과 다른 것 같아서 질문 올립니다. 이렇게 컴포넌트를 만들고 프로퍼티 기능을 추가할 때 + 버튼을 누르면 나오는 메뉴가 강사님께서 보여주시는 화면에는 Variant 아래에 Boolean, instance swap, text 가 다른 목록으로 분류되어 나오는데요. 제가 작업할 때 화면은 위와 같이 Variant, Boolean, instance swap, text가 나오는데 어떻게 해야 강사님이 작업하신 화면처럼 나오는건가요??그리고 아래에 Nested instances 라는 기능은 어떤 경우에 쓰는건지 궁금합니다!
-
해결됨디자인 시스템 with 피그마
안녕하세요 선생님 질문있습니다.
안녕하세요 선생님! 강의 너무 유익하고 잘 시청하고 있습니다.궁금한게 있습니다. 타이포 강의를 듣던 중에,1.333배를 입력해서 전체 가이드를 가지고 기준이 되는 "디폴트"값을 정해놓고. 디폴트 값만 변경해도 다 맞춰서 변경되니까 이런 좋은 점은 알겠는데폰트가 12가 티폴트이면 +2pt 만큼 늘어난다 이런거는 안되나요?배수로 정해 놓으면 소수점으로 끝나는데 디자이너한테 이런 부분이 생소해서요!!! {디폴트}+2pt = xl 이런식은 불가능한건지 궁금합니다.그리고 소수점이 문제가 안되는지 궁금합니다(보통 다 디자이너는 1px 이 최소단위니까 궁금해요!_
-
해결됨디자인 시스템 with 피그마
인풋 밑에 헬프 텍스트가 두가지일 경우 컴포넌트 구조
플레이스 홀더 영역을 만들고 아래에 힌트텍스트가 하나있을 때는 오토레이아웃과 불린 기능을 이용해서 힌트 텍스트가 제거되었을 때 플레이스홀더 영역만큼만 보여지게 할 수 있는데힌트텍스트 우측에 텍스트 카운터가 있을 경우(헬프 텍스트가 2가지인 경우) 어떻게 짜야 하나씩 껐을 때 한쪽으로 치우치지 않고 제거했을 때 해당 영역이 사라지고 플레이스 홀더 영역만큼만 잡히게 하는지 모르겠습니다..
-
해결됨디자인 시스템 with 피그마
디자인 시스템 관리
안녕하세요! 사내에 두 개의 프로덕트가 있는데 그럼 디자인시스템을 각각 프로덕트마다 따로 만들어야 하는걸까요?그리고 새로 생기는 프로덕트마다 계속 만들어서 각각 관리하는것인지 궁금합니다.만약 하나의 디자인시스템으로 관리한다고하면 각 프로덕트마다 버튼크기나 사용하는 컴포넌트들도 다를거고 색상도 다를텐데 어떻게 관리해야할까요? 감사합니다!
-
해결됨디자인 시스템 with 피그마
글로벌과 다크모드/라이트모드, 토큰스튜디오 프로
안녕하세요?글로벌에 타이포그래피 토큰을 만들면 다크모드, 라이트모드 테마쪽에는 굳이 안만들어도 상관이 없는건가요?글로벌에 등록된 토큰은 모든 테마에 전반적으로 적용이되는건가요??그리고 토큰스튜디오 프로를 사용했을때의 큰 메리트가 있을까요? 감사합니다!
-
해결됨디자인 시스템 with 피그마
디자인 시스템에 등록한 토큰 중 사용하지 않는 토큰에 관하여
안녕하세요.강의를 듣던 중 궁금한 점이 생겨서 질문 드립니다.색상이나 스페이싱 등 다양한 스타일을 미리 지정해 두는데, 피그마 토큰에 등록 해두었으나, 디자인 작업이 끝날때까지 단 한번도 사용하지 않는 스타일값도 있더라구요.예를 들어 blue색상을 등록할 경우 총 9가지의 단계로 (blue 100 - blue 900) 지정하는데, blue 400은 사용되지 않는 그런 상황이 발생하더라구요. 물론 9단계든 5단계든 정해진 법칙이 있는건 아니지만, 이렇게 다양한 색상을 미리 지정해 두는 이유가 궁금합니다. 답변 부탁드립니다 !ㅎㅎ (강의 너무 유익하게 잘 듣고 있어용!!)
-
해결됨디자인 시스템 with 피그마
개발자 입장에서 필요한 최대 단위 토큰은 어느정도일까요?
범쌤님 질문 답변 정말 감사합니다. 궁금했던 속이 뻥 뚫리네요.ㅜㅜ추가질문1. 프론트 개발자 입장에서 필요한 최대 단위 토큰은 어느정도일까요?전역에서 베이스단위 토큰으로 관리되는것만으로도(큰단위 필요 없이) 개발에 매우 용이한것이라는거죠? 개발자가 아니여서 어느정도 매력적인지가 감이 안와서 여쭤봅니다. (현재 '토큰'으로 개발되어있지 않음)사실 디자인 관리측면에서는 아무리 못해도 원자단위 까진(버튼,인풋) 만들어서 개발연동해두고 싶어서요.생각의 차이인듯해서 어느정도가 서로가 생각하는 필요선의 합의점일지가 궁금합니다.추가질문2. 버튼 토큰은 무료버전에서 만들수없을까요?테스트 단계라 아원자보다 더 큰 단위의 토큰까지 테스트 해보고싶습니다.그리고 유료버전 강의는 생각하고 있지 않으신걸까요?
-
해결됨디자인 시스템 with 피그마
컴포넌트구조중 어디까지 토큰 등록이 가능할까요?
안녕하세요. 범쌤님~ :) 두가지 질문드립니다.질문1. > 아토믹디자인 방식 중 어느단계까지 토큰 등록이 가능할까요?토큰 등록 가능 범위에 대해 알고싶습니다.저는 원래 아토믹 디자인 방식중 조직체단계까지는 토큰등록이 가능하다고 생각했는데지금 강의에는 아원자 단위(글로벌) 까지만 등록하는 법을 알려주시더라구요.질문2. > 만약 아원자단위(글로벌) 까지만 등록이 되면 이미 구현되어있는 상황에 어떤 장점이 있을까요?저는 토큰 스튜디오를 사용하면 저희가 조직체 단계까지는(아무리못해도 원자단위 까진(버튼,인풋)) 토큰으로 등록을 해서 개발자분들이 Json으로 추출해서 사용하실꺼라고 생각을 하고있었거든요.ㅠ그럼 공통 컴포넌트를 저희가 디자인해서 코드로 사용하는 방식이 되는거라 정말 나이스한것이라고 생각했어요.참고로 저는 이미 개발 구현되어있는 상황입니다. 아원자단위까지만 등록을 하는거면 굳이 토큰스튜디오로 다시 개발에 전달드리는게 의미가 있을까 싶어서요.(개발<>디자인 끼리 정의해있는 공통 요소들이 개발상 정리 되어있는 상태)
-
해결됨디자인 시스템 with 피그마
안녕하세요 선생님!
타이포그래피 피그마 토큰에서 default 값 16에서 14로 변경을 해도 폰트의 크기가 줄어들지 않는데 적용이 잘못된걸까요??..
-
해결됨디자인 시스템 with 피그마
오토 레이아웃 줄 때
안녕하세요 강사님! :)혹시 오토 레이아웃에서 간격 줄 때 꼭 토큰 플러그인의 spacing으로 해야 디자인 시스템 구축이나 개발자분께작업물 전달드릴 때 문제가 없는 걸까요?저는 피그마 패널의 오른쪽 auto layout 부분을 이용하고 싶은데 그렇게 해도 개발자분과의 협업, 디자인 시스템 구축에문제가 없는지 궁금합니다!
-
해결됨디자인 시스템 with 피그마
오토 레이아웃 한번 더 하는 이유
강사님, 혹시 '앱 다운로드' 버튼 만들 때'아이콘 + 앱 다운로드' 부분을 1차적으로 오토 레이아웃 생성하는 것은 알겠는데 거기에 한번 더 오토 레이아웃을 해주는 이유를 알 수 있을까요? 한번만 해도 상하좌우 패딩 값 주면 충분할 것 같아서요!!
-
해결됨디자인 시스템 with 피그마
그리드 토큰
안녕하세요 선생님! 강의에서 가르쳐주신대로 그리드 시스템을 연핑크로 만들고, 그리드 시스템 꺼도 보일 수 있는 그리드를 블루로 만들어보았는데 알려주신대로 auto layout의 horizontal gap, horizontal padding 모두 각각 36으로 주면 다음처럼 간격이 원래 그리드 시스템과 맞지 않게 되더라구요. 강의 화면에서는 모두 핑크색이라 잘 안보였던 것 같은데 이렇게 서로 일치하지 않는게 정상인지 궁금합니다! :) - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨디자인 시스템 with 피그마
피그마 토큰 플러그인
안녕하세요! 강의 이제 막 보기 시작했어요! :)그런데 강의에서 알려주신 것처럼 피그마 토큰 플러그인에서 green.500을 등록한 후 create style을 하면 (첫번째 사진),2,3번째 사진처럼 피그마 오른쪽 패널에 green.500 뿐만 아니라 엄청 많은(?) 컬러들이 등록되어서요!어떻게 하면 green.500만 등록시킬 수 있을까요?! +) 그리고 저는 플러그인을 실행하면 강의에서와는다르게 아래 사진처럼 보입니다..!!!
-
해결됨디자인 시스템 with 피그마
간격맞추기
선생님처럼 Visual의 높이를 359로 맞춰도 저는 Inner와 Visual의 간격이 70이 돼요ㅠㅠ 왜그럴까요..?
-
해결됨디자인 시스템 with 피그마
태블릿과 모바일 넓이 질문입니다!
선생님은 태블릿과 모바일 넓이를 각각 900과 500으로 바꾸었을때 이렇게 되는데저는 이렇게 돼요ㅠㅠ다시 돌아가서 3번째나 다시해보고있는데 잘 안됩니다ㅠㅠ 문제가 무엇일까요..?ㅠㅠ
-
해결됨디자인 시스템 with 피그마
타입 세팅값!!
저 텍스트를 잡고 선생님 화면에서는 타입세팅을 누르면 이렇게 나오는데제 화면에서는 이렇게밖에 안나와요ㅠㅠ버전이 달라서 그런걸까요..!?
-
해결됨디자인 시스템 with 피그마
피그마 토큰에서 색상이 전환이 안되는데 오류일까요?
피그마 토큰 플러그인창에서다크모드를 선택했을 때라이트 모드에서 보이는 그레이 색상(color > G, GH)들이다크모드에 설정한 그레이컬러들로 전환이 안됩니다!질문을 드리고 싶은건이 현상이 오류인가요? 나중에 작업을 하다가 영향을 끼칠 우려가 있을까요?작업한 사각형UI에는 적용이 잘 되지만! 피그마 토큰 플러그인 창에서만 전환이 안됩니다(피그마 토큰에서 다시 지우고 새로 등록해봤고,,색상도 네이티브에 다시 등록하고 했답니당,,,)근데 라이트 모드를 선택할 때 다크 모드에서는 색상이 전환됩니다동일하게 사각형 UI에서도 색상을 잘 적용됩니다뭐가 문제일까요!?,,,
-
해결됨디자인 시스템 with 피그마
프레임 도형 복사
선생님께서 이런 모양으로 복사해서 만드셨는데 어떻게 하셨나요..?ㅠㅠ서