UI/UX Part 4~6

UI/UX 2주차입니다. 

커리큘럼 일정이 빠듯해서 벌써 Part 4에 들어왔습니다.

다른 할 일들에 밀려 미루고 있던 기술블로그의 마감일이 오늘입니다. 

오늘 밤안에 161p의 진도를 다 끝내는 기적을 보여드리겠습니다^^

(지현아 기다려라 언니가 간다)

 

Part 4. 오토 레이아웃

 

01) 오토 레이아웃 구성 요소

1. 오토 레이아웃 생성하기

레이아웃 생성방법: 오브젝트 선택 후 단축키 Shift+A, 프레임 선택 후 Auto layout 패널의 + 아이콘 클릭

*단축키 Ctrl+D: 복제하기

2. 방향 따라 오브젝트 배열하기

Auto layout 패널의 아래 화살표: 수직방향, ->:수평방향, 감기화살표: 줄바꿈(수평방향으로만 적용)

 

3. 간격 설정하기

Auto layout 패널의 막대기 3개모양 아이콘으로 간격 조절

 

4. 패딩- 오브젝트와 프레임 사이 크기 조절하기

Auto layout 패널의 제일 아래 상자 아이콘: 오브젝트와 프레임 사이 크기 조절

Auto layout 패널

5. Auto layout 패널 사용않고 간격과 패딩 제어하기

오토레이아웃이 생성된 오브젝트 사이에 커서 가져가면 빗금 생기는데 드래그하여 간격 및 패딩 변경한다

6. 정렬- 프래임 내부 오브젝트 정렬

오토 레이아웃 패널의 해당 아이콘 글릭해서 프레임 내부 오브젝트를 정렬한다(9가지 방향)

7. 분배-오브젝트 분배하기

원 모두 선택후 Shift + A 로 오토 레이아웃 생성 후 간격 조절하고 색 채우기

Auto 누르면 간격 자동 조절한다

 

8. 레이아웃 외곽선 설정하기

Advanced auto layout settings의 ...아이콘 클릭후 Strokes 지정 -> 오브젝트 외곽선 크기가 오토 레이아웃 프레임에서 공간을 차지할지 여부 선택 

 

9. 캔버스 레이어 순서 조정하기

Canvas stacking으로 순서 변경

 

10. 텍스트 기준선 정렬하기

Align text baseline 으로 기준선 정렬

 

 

11. Absolute position - 오토 레이아웃 옵션에 영향 받지 않기

주로 내부 오브젝트 강조하거나 오토 레이아웃 해제 안하고 다른 디자인 요소 추가하고 싶을때 사용

 

 

12. 오토 레이아웃 해제하기

Auto layout 패널의 ㅡ아이콘 클릭 or  단축키 Shift+Alt+A 

 

 

02) 크기 조절 옵션 

1. Hug contents - 하위 오브젝트 감싸기

HugxHug 표시-> Hug contents 지정된 것 의미

 

2. Fixed size - 오브젝트 크기 고정하기

프레임 너비 Fixed 된 상태에서는 하위 오브젝트 드래그해도 프레임 너비 변경 안됨

 

3. Fill container - 상위 프레임에 따라 크기 조절하기

하위 오브젝트 선택 후 Fill(container)으로 변경 시 상위 프레임 따라 크기 조절됨

 

4. 중첩된 오토 레이아웃 리사이징하기

최하위 오브젝트 크기 조절 옵션: Fixed width, Fill container

중첩된 프레임 " : Fixed width, Hug contents, Fill container

최상위 프레임 " : Fixed width, Hug contents

-프레임 모두 크기조절 옵션을 Fill container으로 지정해야지 자동 크기 조절 된다.

 

03) 버튼과 텍스트 필드

1. 버튼 만들기

과정에서 사용한 단축키

Shift+A:오토 레이아웃 생성

Ctrl+R: 이름 변경

Ctrl+ Enter:: 텍스트 선택

 

2. 텍스트 필드 만들기

 

 

04) 알림창

1. 기본형 알림창 만들기

버튼 만들고, Alt 누른채 드래그(복제), \: 프레임 선

 

2.단일 버튼 알림창 만들기

Ctrl 누른 채 클릭하면 하위요소 쉽게 선택 가능

눈 아이콘 클릭 시 숨김

 

3. 수직형 버튼 알림창 만들기

프레임 선택 후 Auto layout 패널에서 Vertical layout 아이콘 아래 화살표 모양 선택

 

4. 시스템형 알림창 만들기

 

05) 반응형 레이아웃, 프로필 카드 디자인하기

1. 디자인 요소 생성하기

이미지 삽입:

툴 바의 리소스 도구 선택 or Shift+I 누른 후 [Plugins]탭 선택 후 검색창에 unsplash  입력 후 enter,

단축키 Alt+H/V 눌러 가운데 정렬,

이미지의 Constraints를 Scale-Scale로 변경 -> 프레임 크기 따라 이미지 크기도 변함

 

2. 오토 레이아웃 설정하기

프로필, 텍스트, 버튼 순으로 오토 레이아웃 설정하기

 

3. 크기 조절하기

조절점 드래그하여 크기 늘린 다음 상위 프레임 선택하여  Horizontal resizing을 Fill container로 변경 (하위 프레임도 다 변경해야함)

 

4. 말줄임표 처리하기

긴 텍스트 말줄임표 처리하기:

Text 선택후 Text 패널의 Type settings 아이콘(...) 클릭 후 Truncate text 활성화하기

 

Part 5. 컴포넌트 & 배리언츠 적용하기

 

01) 컴포넌트

1.메인 컴포넌트와 인스턴스 컴포넌트 생성

꽉찬 마름모 아이콘 선택시 컴포넌트 생성

가장 먼저 생성된 컴포넌트: 메인 컴포넌트

메인 컴포넌트의 복제본: 인스턴스 컴포넌트

2.인스턴스 컴포넌트의 속성 변경하기

인스턴스 컴포넌트 선택 후 따로 속성 변경가능, 변경 안한 속성은 메인 컴포넌트 속성 변경에 따라 바뀜\

 

3. 독립된 속성 초기화하기

(...)아이콘 클릭 후 Reset all changes 선택

Component 패널

4. 독립된 속성을 메인 컴포넌트로 이전하기

(...)아이콘 클릭 후 Push changes to main component 선택

 

5.메인 컴포넌트 찾기

인스턴스 컴포넌트 선택후 꽉찬 마름모  클릭하여 메인 컴포넌트로 이동 가능

 

6. 삭제된 메인 컴포넌트 복구

Component 패널의 Restore Component 버튼 클릭 

 

7. 인스턴스 컴포넌트 해제하기

(...)아이콘 클릭 후 Detach instance 선택

 

8. 다수의 컴포넌트 동시에 생성하기

다수의 오브젝트선택 후 Tool바의 꽉찬 마름모 확장 아이콘 선텍후 Create multiple components 선택

 

02) 아이콘 컴포넌트

1.아이콘 컴포넌트 만들기

Tool 바의 리소스 도구 선택(Shift + I) 후 [Plugins]탭에서 Feather icons 선택

아이콘 누르고 enter( 하위 레이어 모두 선택)

툴 바의 Union selection 선택( 레이어 하나로 합치기)

Ctrl+ E (Union 그룹 통합)

아이콘 모두 선택 후 멀티플 컴포넌트로 만들기

툴 바의 리소스 도구에서 component 검색 가능

 

2. 컴포넌트 스왑하기

인스턴트 컴포넌트의 Component 패널의 확장 아이콘 클릭 시 다른 아이콘 목록 확인 가능

누르면 다른 아이콘으로 바꾸기 가능

 

3. 컴포넌트 그룹으로 구분하기

Ctrl + R 눌러서 이름 바꾸기 도구 실행

 

03) 컴포넌트 프로퍼티

1.체크 박스 컴포넌트 만들기

편집 모드 해제: esc 두번 클릭

2. 체크리스트 컴포넌트 만들기

3. 불리언(Boolean) 프로퍼티 설정하기

4. 텍스트프로퍼티 설정하기

5.인스턴스 스왑 프로퍼티 설정하기

스왑 프로퍼티

변경된 사항들은 인스턴스 컴포넌트에서 확인 가능

6. 컴포넌트 프로퍼티 속성 편집하기

Properties 메뉴에서 편집 기능 사용

 

04) 배리언츠 & 프로퍼티

1. 배리언츠 생성 및 준비하기

2. 배리언츠 만들기

컴포넌트로 바꾼 뒤 툴 바의 마름모 아이콘 클릭 하여 Create componentset 선택

3. 프로퍼티 설정하기

[Shift+ 선택] 후 Properties 항목에서 variant 선택 하여 항목별 값 설정

4.프로퍼티와 밸류 순서 변경하기

5. 프로퍼티 삭제하기

ㅡ누르기

6. 배리언츠 해제하기

상위 프레임 선택 후 enter : 하위 프레임 모두 선택

상위 프레임 밖으로 드래그: 상위 프레임 자동으로 사라짐

 

05) 칩 배리언츠

 

06) 컴포넌트 & 배리언츠

Ctrl+E : 레이어 통합

Ctrl+Shift+O : 선면 전환

4. 과정 아이콘 프로퍼티 추가하기 잘 안됨

 

Part 6. 디자인이 살아 움직이는 프로토타입 만들기

 

01) 프로토타입 속성

1. 프레임 연결하기

핫스팟, 연결선, 대상

Prototype으로 전환후 Ctrl 누른 상태에서 드래그

<218p~219p>

트리거 On click : 인터랙션 실행하기 위한 사용자 행동을 정의

액션 Navigate to : 핫스팟에서 트리거 실행했을때 상호작용하는 방식 설정

대상 Frame B : 인터랙션이 끝나는 지점

애니메이션 Instant : 인터랙션이 실행되는 움직임 설정

이징 및 스프링 애니메이션 State management : 수학적 곡선을 통해 애니메이션이 전환되는 동안 가속이나 움직임 같은 세부 설정을 변경할 수 없다. 

State management : 프레임 간 상호작용이 일어날때 오브젝트의 속성을 초기화

 

02) 온보딩 페이지

1. 커뮤니티에서 필요한 리소스 가져오기

피그마 커뮤니티에서 ios toolkit 검색, 원하는 파일(iOS 15 UI Kit for Figma) 선택

 

2. 플러그인으로 일러스트레이션과 문자열 삽입하기

리소스 도구 선택 후 [Plugins]탭에서 Blush 선택

리소스 도구 Lorem ipsum으로 단어 문장 개수 선택

 

3.인디케이터와 버튼 컴포넌트 삽입하기

 

4. 버튼 눌러 다음 화면으로 넘어가기

prototype에서 버튼 선택후 페이지로 드래그해서 상세설정(on tap)

 

5. 화면에 쓸어넘겨 전환하기

prototype에서 페이지 선택후 페이지로 드래그해서 상세설정(on drag)

6. 완성된 프로토 타입 실행하기

 

7. 모바일기기에서 프로토타입 실행하

 

03) 스크롤 포지션

1.이미지가 있는 섹션 만들기

리소스 도구에서 플러그인 탭의 Unsplash에서 이미지 고르기

 

2. Position: Fixed 설정하기

Shift + Spacebar : 미리보기 단축키

헤더바 선택후 프로토타입 바-> Scroll behavior->Position->Fixed : 해당 헤더바 고정

 

3. Position: Sticky 설정하기

다른 헤더바 선택후 프로토타입 바-> Scroll behavior->Position->Sticky : 스크롤 따라 고정됨

Layer에서 헤더바 순서 변경

 

04) 스크롤

1. 수평(가로 방향)으로 스크롤하기

5번의 이미지 축소하기 잘 안됨

 

2. 모든 방향으로 스크롤하기

프로토타입 바-> Scroll behavior->Position-> Both directions 선택

 

05) 스마트 애니메이트

Shift + E : 프로토타입 모드로 전환 

단, smart animate 로 설정하기

 

06) 인터랙티브 컴포넌트

1. 체크박스 인터랙션 설정하기

2. 토글 스위치 인터랙션 설정하기

두 오브젝트 다 선택하여  create somponent set 선택하여 배리언츠 선택 후 프로퍼티 부여하기

애니메이션 설정하기

3. 버튼 인터랙션 설정하기

버튼당 프로퍼티값 부여

07) FAB

프로토타입에서 디바이스 설정(아이폰14)

프로토타입에서 Flows 이름 지정

Ctrl+ Alt+Enter : 프레젠테이션 모드 실행

연결점 버튼에서 페이지로 잡기

 

08) 로딩 스피너

1. 스피너 도형 만들기

Alt+H/V 로 가운데 정렬

원 조절점 드래그 하여 Sweep 설정(반원 등 만들기 가능)

Create component set 선택하여 배리언츠 생성

기본 프로퍼티 설정

Shift 누른 상태로 모든 연결선 선택하여 인터낵션(애니메이션) 설정

새 프레임 생성 후 첫번째 Spinner 프레임 복제하여 넣기

Preview로 작동 확인하기