피그마 놀이터

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

안녕하세요. 프로토타입 인터렉션 복사 붙여 넣는 방법을 알려드리겠습니다. 프로토타입을 간단히 설명하면 디자인 후 서비스에 대해 코딩이나 개발을 하지 않고도 움직임을 넣어서 기획자, 디자이너, 개발자... 등 이해관계자들이 실제 구현될 서비스에 대해 미리 사전에 점검을 할 수 있고 최종으로 서비스 출시 전 사용자가 실제로 서비스를 이용하면서 화면 흐름상 어색하진 않은지 개선할 영역은 없는지... 등 사용성 테스트(Usability Testing)를 할 수 있습니다. 프로토타입은 크게 스크롤과 화면연결로 볼 수 있습니다. 스크롤(scroll) : 콘텐츠의 길이가 뷰포트 영역보다 클 경우 콘테츠를 보는 방식을 수직스크롤, 수평스크롤, 모든 방향 스크롤로 지정합니다. 스크롤은 프로토타입 패널에서 설정할 수 있으..

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