세로형 카드에서 가로형 카드되는 반응형 카드 UI 만들기! 먼저 프레임을 만들어 준다. card 이름 지어주고 이펙트, 라운드 넣어줘서 디자인해준다. 카드에 rectangle으로 이미지 들어갈 영역 만들어주고 Unsplash 플러그인으로 이미지 넣어준다. (이미지 플러그인은 다음 글에 소개할 예정) 이미지 밑에 Label, Heading, 본문, 프로필 이미지등등 텍스트들을 넣는다. 여기까지는 아직 오토레이아웃 노노! 참고로 Label/프로필 이미지는 레이어가 2개라서 그룹을 해줘야한다. Label 그룹/프로필 그룹 이렇게 각각 그룹 따로! 이제 여기서부터 오토레이아웃 시작! 밑에 순서대로 하면 된다. 1. Label/Heading/본문/프로필 사진 4개 잡고 오토레이아웃을 준다. 2. 카드 프레임한테 ..

이전 글에서는 오토레이아웃으로 버튼 만드는 방법을 간단하게 만들었다. 오토레이아웃 패널에 대해 간단하게 알 수 있었는데 이번에는 응용 버전으로 리스트를 만들어봤다. 2023.08.01 - [Product 디자인] - [피그마] 왕초보 오토레이아웃(Auto layout)으로 Button 만들기 [피그마] 왕초보 오토레이아웃(Auto layout)으로 Button 만들기 어라인(Align) 알아보기 먼저 아래 이미지처럼 프레임 만들어주고 텍스트 추가해서 버튼 만들어 준다 프레임+텍스트 레이어 두개 잡고 마우스 오른쪽 클릭해서 Add auto layout을 선택(아래 이미지)하 null-piglet.tistory.com 먼저 프레임으로 배경을 깔고 날짜 텍스트, 본문 텍스트, 구분 짓는 선 총 3개의 레이어를..

어라인(Align) 알아보기 먼저 아래 이미지처럼 프레임 만들어주고 텍스트 추가해서 버튼 만들어 준다 프레임+텍스트 레이어 두개 잡고 마우스 오른쪽 클릭해서 Add auto layout을 선택(아래 이미지)하거나 쉬프트+A 오토 레이아웃으로 만들어주면 오른쪽 패널에 오토레이아웃이 활성화 된다. Horizontal layout/Align center 상태이며 버튼 텍스트를 바꿔주면 center 기준으로 버튼이 자동으로 늘어남 Align 선택시 텍스트가 고정되기 때문에 이 부분을 활용해서 추후에 반복되는 리스트UI 작업이 가능하다. 패딩값(Padding) 알아보기 파란색 빗금쳐진 부분이 상단 Padding이며 마우스 오버시 확인이 가능하다 마우스로 조절 할 수도 있고 하단 이미지처럼 패널에서 아이콘 눌러 수..