게시글
질문&답변
2024.05.24
보조색을 다른 hue로 사용할 경우엔 베리어블 구조를 어떻게 짜야할까요?
머티리얼 가이드 처럼 짜시려면 아예 구조를 머티리얼 용어로 가지고 가시는 것을 추천드립니다. 왜냐하면 개발 쪽에서 바꿀 때도 복잡하기 때문입니다. 하지만 만약 강의 예제를 연결해서 사용하시려면, 두가지 방법 모두 가능할 것 같습니다. 하지만 아래와 같이 하는 것을 추천 드립니다. Primitive에 Teal 계열 추가 >> Theme에 Brand 세컨더리(Secondary) 또는 터셔리(Tertiary)가 1 번 참조 3. Semantic 에서 세컨더리 인터랙션 또는 터셔리(Tertiary) 만들어서 2번 참조. 또 궁금하신 점 있으시면 알려주세요!
- 0
- 1
- 68
질문&답변
2024.05.22
인스턴스 섹션이 보이지 않습니다.
안녕하세요. Kim mihyun님, 질문 주셔서 정말 감사합니다. 우선 컴포넌트를 반드시 레이어에서 선택해줍니다. 그리고 컴포넌트 안에 있는 인스턴스를 레이어에서 선택해줍니다. 그러면 오른쪽 창이 바뀌는데요, 첨부한 사진에서 인스턴스 스왑을 찾아보실 수 있습니다. 질문 내용은 아니지만, 인스턴스 스왑 창에서 select preferred value(+ 버튼)를 선택하시면 자주 사용하고 선호하는 다른 인스턴스를 바로 꺼내 볼 수 있습니다. (사진) 또 궁금하시거나 헷갈리는 내용 있으시면 알려주세요. 감사합니다.
- 0
- 3
- 71
질문&답변
2024.05.20
Color scoping 적용이 안되어 문의드립니다!
안녕하세요. 제 생각에는 왼쪽 버튼을 누르시면서 inverse 부분만 Text가 선택된 것 같습니다. 저도 자주하는 실수입니다. 오른쪽 버튼을 누르셔서 Edit variable 누르시면 선택한 모든 베리어블의 스코프를 일괄 수정하실 수 있습니다. 한번 color/bg/primary 선택해보시면 전체 스코프가 켜져 있는 것을 확인하실 수 있으실거에요. 감사합니다.
- 0
- 2
- 77
질문&답변
2024.05.16
Function Component 가 뭔가요?
안녕하세요. dev_traveler님, 질문 주셔서 감사합니다. 제가 언급한 "Function Component"는 주로 기능을 수행하는 컴포넌트를 의미합니다. 페이지에서는 Utilities라고도 지칭하였는데요. 개발 쪽에서는 사용하지 않고 피그마 쪽에서 디자인 에셋을 잘 관리하기위해 용이한 목적으로 사용됩니다. 예를 들어, 이 용어는 나중에 나오겠지만 여러개로 구분할 수있는 Slot, 이미지 Ratio 구분하는 Image Placeholder 등을 지칭할 때 사용됩니다. 제가 전에 사용했던 디자인 시스템에서 사용했던 용어라 언급했는데, 저도 찾아보니 보편적인 용어는 아닌 것 같습니다. 이점 참고해주시기 바랍니다. 혹시 궁금하신 점이나 이해가 안되시는 부분 있으면 알려주세요. 감사합니다.
- 0
- 1
- 100
질문&답변
2024.05.13
아이콘 관련 질문
보준님, 안녕하세요. 우선 질문 주셔서 정말 감사합니다. 질문 주셔서 감사합니다. 혹시 저에게 파일을 공유해주실 수 있을까요? 제가 한번 자세히 한번 봐드리도록 하겠습니다. (boldplus.ux@gmail.com) 아이콘을 하나로 그룹화 하는 방법은 정말 다양합니다. 일반적인 방법은 지금 두개로 나뉜 Vector가 모두 Fill로 구성되어 있다고 한다면 바로 Flatten Selection을 하시면 됩니다. 만약 말씀하신대로 Border로 되어 있는 경우는 Outline Stroke를 하신다음에 면으로 처리한 후 Union 하시고 Flatten Selection 하시면 됩니다.
- 0
- 1
- 55
질문&답변
2024.05.13
배리어블 컬러 추가한 것만 볼 수 없나요?
강의에서는 두 가지 피그마 파일이 있습니다. 첫번째: 파운데이션 파일(베리어블 콜렉션이 포함됨) 두번째: 컴포넌트 라이브러리 컴포넌트 라이브러리 디자인 파일의 에셋에서 파운데이션 파일을 추가 하면 기존 베리어블 콜렉션이 가지고 오게 되어 있습니다. 제 생각에는 mina님의 피그마가 파운데이션 파일이 자동으로 "add" 더 해져서 그렇게 된 것 같습니다. 이 경우는 문제는 전혀 문제가 없을 것 같습니다. 계속 컴포넌트 라이브러리에서 작업하시면 될 것 같습니다. 혹시 그래도 문제가 생기시면 저에게 두가지 파일 모두 아래 이메일로 공유해주시면 제가 한번 체크해드리도록 하겠습니다. boldplus.ux@gmail.com
- 0
- 3
- 111
질문&답변
2024.05.13
variables 색상이름 설정
안녕하세요. 우선 질문 주셔서 감사합니다! 우선 Library에서 스타일을 선택했는지 한번 체크해보세요. 반드시 베리어블을 선택하셔야 합니다. Primitive 콜렉션 내부에서 선택하신 경우에는 베리어블 이름을 color/blue/50 이렇게 해주셔야 합니다. 이것을 구조적인 측면에서 보면 그룹 color 안에 그룹 blue 안에 50 이렇게 되겠죠. 만약 blue/50 으로 되어 있는 경우 Edit variable 들어가셔서 이름을 blue/50 에서 color/blue/50 으로 바꾸시면 됩니다. 또 어려우신 부분 있으시면 알려주세요!
- 0
- 1
- 63
질문&답변
2024.05.13
local variables vs local styles
안녕하세요! 저의 주 강의 대상이 토큰, 베리어블에 대한 지식이 전무한 분들이기 때문에 언제든지 질문 주셔도 됩니다! 강의가 만들어진게 작년 11월인데, 그때는 색상만 베리어블이 적용되었습니다. 4월에 이제 타이포 베리어블이 적용 가능한 업데이트가 되었는데, 이 부분에 대해서는 아직 강의가 업데이트 안되었습니다! 곧 6월 중으로 할 예정입니다. 하지반 업데이트가 안된 현재 강의로 진행하시는데, 큰 어려움이 없을 것입니다. 왜냐하면 피그마에서 스타일도 여전히 쓰도록 하고 있으며, 이것은 복합 토큰(즉, 여러 베리어블이 합쳐진 토큰)으로 사용될 예정입니다. 스타일 중 그라디언트도 없어지는게 각각 색의 조합익에 기본 베리어블을 가지고 옵니다. 타이포그래피도 여전히 우리가 쓰는 H1, Body는 그대로 스타일에 사용 되어지고 이 안에 세부적인 weight, font family 등을 기본 베리어블로 사용되어 집니다. 이해가 안되시거나 더 궁금하신 부분 있으면 알려주세요!
- 0
- 1
- 60
질문&답변
2024.05.12
배리어블 컬러 추가한 것만 볼 수 없나요?
안녕하세요, mina님 질문 주셔서 감사합니다. 베리어블을 활용해서 디자인 시스템 구축을 하시나 보네요! 본 강의가 도움이 되셨으면 좋겠습니다. 우선 질문하신 부분은 전부 피그마의 자체 기능으로는 전혀 지원하지 않습니다. 베리어블이 자동으로 연결 되는 것은 당연한 것이기 때문입니다. 하지만 전혀 안되는 것은 아니고 플러그인을 사용해보시는 것을 추천드립니다. Swap variables 기존 연결된 베리어블을 로컬 내의 베리어블로 변경해줍니다. 주의해야할 점은 이름이 반드시 동일해야 합니다. (사진) 두번째도 또한 피그마에서 제공해주는 방법은 없습니다. 하지만 베리어블을 찾을 수 있는 플러그인을 추천드릴게요. Variable Vision 이라는 건데 컴포넌트, 인스턴스에 사용된 모든 베리어블을 보여줍니다. 뇌피셜이긴한데 베리어블 ID가 보이는데, 엄청 길게 나오는 거는 외부 베리어블, 짧은 거는 로컬 베리어블인 것 같습니다. 그걸 구분해서 찾으셔서 바꾸셔도 될 것 같습니다. (사진) 질문에 대한 답이 디자인 시스템 구축하시는데, 도움이 되시기를 바랍니다. 감사합니다.
- 0
- 3
- 111
질문&답변
2024.05.07
아이콘 등록 방법-아이콘 색상 변환
안녕하세요, 조한나님 이 경우는 Outline stroke를 하신 다음 Flatten Selection을 이미 하신 것 같은데, 이 경우는 다시 되돌릴 수 없을 것 같습니다. 추천 드리는 방법은 원본을 다시 다운로드 받으셔서 연습해보시는 방법을 추천드리구요. 그리고 기존의 만드신 것도 그대로 사용하셔도 무방할 것 같습니다. 만약 PNG로 뽑는 경우는 크게 차이는 나지 않습니다. 하지만 SVG로 뽑아내는 경우 현재 하신 방법은 Path가 두개로 쪼개져서 나오는 반면 Union을 하면 하나로 나옵니다. 그래서 현재 하신 방법이 용량이 100kb 정도 더 나오는 경우가 있습니다. 하지만 이것을 제외하고는 피그마에서는 거의 비슷한 편입니다.
- 1
- 1
- 87