피그마(figma) 핵심

안녕하세요. 지난 포스팅에서 프레임과 아트보드 그룹의 차이에 대해서 알아보았습니다. 이번엔 프레임의 속성 중 프레임 설정방법과 컨스트레인트에 대해 살펴보겠습니다. 사전설정된 디바이스 프레임을 툴바에서 선택하면 사전 설정된 디바이스가 우측 디자인 패널에서 보입니다. 아이폰, 안드로이드 모바일부터 데스크탑 태블릿 종이 소설미디어... 등 이미 프레임 영역을 만들어져 있습니다. 사전 설정된 디바이스를 선택해서 디자인을 하면 프레젠트 모드에서 목업에 씌워진 형태로 프로토타입을 할 수 있습니다. 사전 설정된 프레임 활용 1. 프레임 단축키 A, F 누르거나 툴바에서 프레임 아이콘을 클릭 2. 우측 디자인 패널에서 원하는 디바이스를 선택 3. 캔버스에 프레임 생성 4. 프로토타입 패널로 전환 5. 프레젠트 모드에서..

안녕하세요. 이번 포스팅에서는 지난번 카드 만들 때 슬쩍 사용했던 오토 레이아웃의 특별한 기능 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) 프로토타이핑 툴을 활용해서 다양한 시도를 하고 혹시 도움이 되실 분들이 있다면 자료를 함께 공유하고 공부하는..