피그마 놀이터

안녕하세요. 오늘은 모바일 UI에서 많이 볼 수 있는 토글스위치에 대해 간략히 알아보고 디자인 및 프로토타입을 만들어 보도록 하겠습니다. 토글스위치는 1916년 William J. Newton이 발명한 물리적 토글스위치에서 유래되었습니다. 이러한 스위치는 전등이나 기기의 전원을 켜고 끄는 데 사용되었으며, 간단한 레버 동작으로 두 가지 상태를 전환할 수 있었습니다.(출처 : 위키피디아) 집에서도 흔히 볼 수 있는 전기 스위치로 생각하시면 됩니다. 스마트폰 환경 설정에서 토글스위치를 많이 보셨을 텐데요~ 물리적인 토글스위치의 형태와 기능을 디지털 환경에 맞게 구현하였습니다. 단순하고 직관적인 디자인으로 끄고/켜다 처럼 상반되는 의미를 두고 제작하고 사용하게 됩니다. 토글스위치 만들 때 주의사항 목..

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

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

안녕하세요. 피그마 클래스에 오신 것을 환영합니다. 이 공간은 개인 작업공간이면서 동시에 열린 공간입니다. 1day class, 2day class에서 공유하는 자료들은 피그마 입문자 및 독학하시는 분을 위한 내용입니다. 피그마 커뮤니티 https://www.figma.com/@yoongood 에서 무료로 누구나 이용할 수 있습니다. 현재 v1은 2023년 3월 기준으로 업데이트되어 있습니다. 피그마는 지속적으로 기능이 추가되므로 그에 맞춰서 저도 계속 업데이트할 예정입니다. 당분간 입문자나 개인 독학용 위주로 게시글이 먼저 작성되며 팀작업을 위한 내용은 추후 넣을 계획입니다. 피그마(figma) 프로토타이핑 툴을 활용해서 다양한 시도를 하고 혹시 도움이 되실 분들이 있다면 자료를 함께 공유하고 공부하는..