FIGMA (4) 썸네일형 리스트형 [피그마] 베리언트, 컴포넌트에 프로토타입 적용 ★ 프로토타입 Change to 활용 ★ * 컴포넌트 적용 리스트 1. 체크박스 2. 라디오 3. 스위치 4. 햄버거메뉴 5. 텍스트 6. 드롭다운메뉴 등 7. 마우스 호버 8. 고급버전 1. Checkbox 2. Raido - radio와 같은 경우 smart animate 활용하여 테스트 3. Switch (toggle) - switch와 같은 경우 smart animate 활용하여 테스트 4. 메뉴 - menu와 같은 경우 smart animate 활용하여 테스트 * x 버튼 만드는 법 1. - 메뉴 프레임 오토레이아웃 제거 - 가운데 막대기 투명처리 및 레이어 잠금 - 위 막대기 각도 45 / 아래 막대기 각도 -45 처리 후 가운데 정렬 2. - 메뉴 프레임 오토레이아웃 제거 - 가운데 막대기 .. [피그마] 프로토타입 ✔ 프로토타입 : 디자인 요소와 화면 간의 상호작용을 시뮬레이션하고 시각화하는 기능 기본 용어 및 구조 - 핫스팟 : 사용자의 인터렉션이 시작되는 위치 - 커넥션 : 두 프레임 사이의 애니메이션, 인터렉션을 연결하는 화살표 - 데스티네이션 : 변경된 결과 화면 - Flow starting point : 프로토타입이 연결된 화면의 흐름. 구분하기 쉽도록 이름을 변경할 수도 있고 , 해달 flow만 따로 공유할 수 도 있음 - Interaction : 클릭, 드래그 등의 입력요소를 결정하고 여러 개의 중첩으로 적용 - Scroll behavior : 가로 스크롤, 세로 스크롤 옵션을 선택 - Show prototype settings : 목업의 디바이스 종류의 배경 색상 등을 선택 프로토타입 예시 1. On.. [피그마] 오토레이아웃 ✔ 오토레이아웃 : 각각의 요소를 프레임으로 묶어 요소 간의 일정한 간격을 자동으로 변경하는 기능 특징 오토 레이아웃은 프레임을 기반으로 작동하기 때문에 프레임이 아닌 일반 요소에 오토 레이아웃을 추가하면 자동으로 프레임이 생성 UI 컴포넌트들의 배치를 쉽게 관리 UI 디자인의 작업 속도 및 일관성을 높일 수 있음 다양한 화면 사이즈에 대한 대응 효율을 높일 수 있음 단축키 : shfit+A (해지 : shift+alt+A) 조작도 ⓛ Diretion : 오토 레이아웃의 방향입니다. 오토레이아웃의 방향은 Vertical( 수직 ) , Horizontal(수평) 중 한 방향을 지정 ② Spacing between items : 오토 레이아웃에 각격 설정, 수치를 입력하거나 auto를 입력 ③ Hoizont.. [피그마] 콘스트레인트 ✔ 콘스트레인트 : 오브젝트의 위치값을 상하좌우로 고정하는 기능 특이사항 프레임은 부모, 오브젝트는 자식 요소이며 부모가 움직을때 자식이 영향을 받음 바깥쪽의 선을 클릭하면 각각 Top, Right, Bottom, Left 방향에 고정 피그마에서는 기본값으로 Left, Top에 고정 Fix position when scrolling을 체크하면 스크롤해도 오브젝트가 같은 위치에 고정 예시 1 예시 2 적용 방법 1. 부모 영역은 무조건 fixed로 설정 2. 내용 부분만 오토레이아웃 설정 -> fill로 설정 3. 내용 프레임 하나하나 fill container로 설정 4. 콘스트레이트 양쪽 고정 (left and right / center) 예시 3 1. 콘스트레이트를 scale로 변경 2. 프레임 선택.. 이전 1 다음
