배우려는 사람만이 배울 수 있다

모르는 건 당연하고 배운 것을 활용하지 않으면 시간 낭비입니다.

figma 3

피그마 핵심1) 오토 레이아웃 리사이징 Fixed, Hug, Fill 살펴보기

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

피그마 핵심1) 오토 레이아웃에 대해 알아볼까요?

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

피그마 클래스에 오신 것을 환영합니다.

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