인프런 커뮤니티 질문&답변

김보준님의 프로필 이미지
김보준

작성한 질문수

피그마 배리어블을 활용한 디자인 시스템 구축하기

모바일 하단 네비게이션(Bottom Navigation)

[하단 네비게이션]

해결된 질문

작성

·

184

0

https://www.figma.com/file/bOSNSdPGVIn8ZpyTacom3d/%5B%EA%B1%B4%EB%84%88%EA%B1%B4%EB%84%88%5D-%EB%84%A4%EB%B9%84%EA%B2%8C%EC%9D%B4%EC%85%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8?type=design&node-id=7%3A484&mode=design&t=cn6j72TdmocKUhwt-1

  1. badge의 Type을 number나 letter로 만들면 위의 그림처럼 됩니다.

  2. dot형태와 동일하게 오른쪽 위에 나타나게 하려면 어떻게 해야할까요?

 

답변 2

1

볼드 UX님의 프로필 이미지
볼드 UX
지식공유자

보준님, 질문 주셔서 정말 감사드리고 강의 파일을 공유해주셔서 감사합니다.

저도 한번 파일에 들어가서 만져보면서 방법을 찾아볼 수 있었습니다.

 

본 강의에서는 모바일 네비게이션 하단의 경우 dot 부분만 보여주다 보니 보준님의 케이스는 다루지 못했습니다. 만약에 모바일에서 dot와 숫자가 자유롭게 움직이고 둘다 비슷하고 싶다고 하신다면 아래와 같이 하시는 것을 추천드립니다.

 

  1. dot, 숫자, letter모두 동일한 크기로 변경한다.

    1. 현재 dot는 4px로 둘러싸져 있는데, 이것을 16px 프레임 안에 있는 4px 원형 도형으로 만듭니다.

    2. 숫자는 레터 일의 자리나 십의 자리로 제한하고 높이가 16px이기에 너비의 값을 최소값으로 16으로 정해서 짜그러진 원형이 안되도록 합니다.

       

  2. 그리고 인스턴스를 배치해서 위치를 정해 봅니다.

    공유해주신 파일에 예시를 만들어 놓았습니다.

     

    (확인되면 공유를 보기로 바꾸셔도 됩니다. 다른 사람이 들어와서 망칠 수도 있으니깐요.)

    저도 고민해보면서 함께 배웠습니다. 나중에 강의 업데이트 할 때 참고하도록 하겠습니다. 좋은 질문 주셔서 감사합니다.

     

    볼드 드림.





0

김보준님의 프로필 이미지
김보준
질문자

친절한 안내 감사합니다.

혹시 기존의 dot을 프레임에 넣어 수정하는 방법도 있을까요? 아래와 같이 이미 만들어져 있는 것에 프레임을 넣었는데 원하는 대로 수정이 잘 안되더라구요.
https://www.figma.com/file/7hdCq1HOI1cUc5LCxvHlSm/%5B%EA%B1%B4%EB%84%88%EA%B1%B4%EB%84%88%5D-%EC%9E%85%EB%A0%A5-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8?type=design&node-id=57%3A592&mode=design&t=nwKLZBgA0CHOk4rh-1

김보준님의 프로필 이미지
김보준

작성한 질문수

질문하기