피그마 놀이터

안녕하세요. 피그마로 모바일 앱 화면시 많이 보이는 chip list 만드는 방법을 설명드리겠습니다. 그전에 칩이 어떤 건지 알아볼까요? Chip(칩) 이란?앱 화면에서 자주 보이는 Chip(칩)은 작은 UI 요소이지만, 사용자 경험을 크게 향상하는 중요한 디자인 컴포넌트입니다. 칩은 일반적으로 태그, 카테고리, 필터, 사용자 입력 값 등을 표시하며, 터치 한 번으로 쉽게 선택하거나 제거할 수 있어 직관적인 인터페이스를 만드는 데 유용합니다.Chip의 주요 특징작고 가벼운 디자인 – 화면을 깔끔하게 유지하면서도 필요한 정보를 효과적으로 전달합니다.상호작용 가능 – 터치하여 활성화하거나 제거할 수 있어 사용자 경험이 향상됩니다.다양한 형태 – 필터, 태그, 입력값 등 여러 용도로 활용할 수 있습니다.앱에서..

안녕하세요. 이번 포스팅에서는 지난번 카드 만들 때 슬쩍 사용했던 오토 레이아웃의 특별한 기능 Fixed, Hug, Fill을 살펴보려고 합니다. 리사이징의 개념을 이해하려면 부모-자식 관계를 먼저 설명해야 할 것 같습니다. 어떤 객체든 오토 레이아웃을 하면 프레임이 객체를 감싸는 형태로 변경됩니다. 이해를 위해 아래의 이미지를 참고해 주세요. 첫 번째 이미지의 텍스트, 벡터, 프레임 레이어를 살펴볼까요. 각각 개별 레이어로 되어 있습니다. 두 번째 이미지는 동일한 텍스트, 벡터, 프레임을 오토 레이아웃을 (단축키 : Shift+A) 적용한 예시입니다.벡터와 텍스트를 오토 레이아웃하면 상하좌우 패딩이 객체 바깥으로 자동 8로 세팅됩니다. 벡터와 텍스트의 자체 크기보다 폭 16, 높이 16 더 커진 상태입..

피그마의 다양한 기능 중에 단연 으뜸가는 기능은 오토 레이아웃(Auto layout)이 아닐까 생각합니다! 오토 레이아웃만 잘 활용해도 정말 빠르게 UI 시스템을 만들 수 있습니다. 오토 레이아웃을 쓰지 않아도 디자인은 할 수 있지만 장기적으로 보면 오토 레이아웃을 사용해야 더 원활한 시스템을 구축할 수 있습니다. : ) 내용이 방대하여 한 번에 설명하기보다는 필요한 부분만 볼 수 있도록 여러 타입을 순차적으로 포스팅할 예정입니다. 1. 오토 레이아웃 - 버튼 만들기 2. 오토 레이아웃 - 리스트 만들기 3. 오토 레이아웃 - 카드 만들기 오늘은 오토 레이아웃을 적용하는 방법에 대해서만 간단히 다뤄볼까 합니다. 오토 레이아웃을 만드는 방법은 3가지입니다. 첫 번째, 모든 아이템을 선택 후 단축키 Shif..