UX UI

[실전피그마] - PART 4 5 6

주니빙 2024. 3. 29. 20:30

💡 맥 이용자는 Alt > Option , Ctrl > Command 로 바꿔서 생각하기

PART 4 피그마의 꽃, 오토 레이아웃 살펴보기

오토 레이아웃 장점 : 디자인 내용이 수정될 때 각 요소의 크기나 위치를 직접 편집할 필요가 없음

오토 레이아웃의 구성 요소

  • 오토 레이아웃 생성하기
    • 오브젝트를 선택한 상태에서 단축기 Shift + A 눌러 생성
    • 프레임을 선택한 상태에서 Auto layout 패널의 ‘+’ 아이콘을 클릭해 생성
    • 프레임이나 오브젝트를 선택한 상태에서 마우스 오른쪽 버튼을 클릭한 다음 Add auto layout을 실행해 생성

Ctrl + D : 복제

프레임 내부 오브젝트가 나열되는 방향을 변경 가능

 

  • 오브젝트 사이나 패딩 영역 제어하기
    • Alt + 드래그 : 반대 방향의 패딩을 동시에 변경
    • Shift + 드래그 : Big nudge에 설정된 값만큼 변경
    • Alt + Shift + 드래그 : 모든 방향을 동시에 변경
    • Alt + 클릭 : 반대 방향의 패딩을 동시에 변경
    • Alt + Shift + 클릭 : 모든 방향을 동시에 변경
    • 입력창이 열린 상태에서 Tab : 위쪽 → 오른쪽 → 아래쪽 → 왼쪽의 간격 순서로 입력창 위치를 변경
  • 프레임 내부 오브젝트 정렬하기
    • 정렬 상자를 선택한 상태에서 방향키 및 W, A, S, D, H, V를 눌러 정렬 위치 변경 가능
  • 분배 - 오브젝트 분배하기
    • Packed : 오브젝트들이 지정된 간격만큼 배열
    • Space between : 오브젝트들이 프레임 전체에 걸쳐 같은 간격으로 배열
    • 정렬 상자를 클릭한 상태에서 단축키 X : Spacing mode를 전환
    • Spacing mode가 Space between으로 지정될시 오브젝트들이 프레임 내부에서 동일한 간격을 유지하며 변동

 

  • 캔버스 레이어 순서 조정하기
    • Auto layout 패널에서 ‘Advanced auto layout settings’ 아이콘 클릭 후 Canvas stacking을 ‘First on top’으로 변경 가능

 

  • 텍스트 기준선 정렬하기
    • Auto layout 패널에서 ‘Advanced auto layout settings’ 아이콘 클릭 후 ‘Align text baseline’을 체크
    • 혹은 정렬 상자 클릭한 상태애서 단축키 B

Shift + Alt + A : 오토 레이아웃 해제

크기 조절 옵션

프레임 바운딩 박스의 Hug x Hug : 가로와 세로의 Horizontal / Vertical resizing이 ‘Hug contents’로 지정

Fill container : Hug contents와는 반대 성격을 가지는 옵션으로, 마치 컵에 물을 채우는 것처럼 패딩을 제외한 프레임 내부 영역을 가득 채움

 

버튼과 텍스트 필드 만들기

텍스트를 더블클릭 or Ctrl + Enter : 텍스트 변경

❗ 텍스트 길이에 따라 전체 프레임의 길이도 함께 변함 > 하지만 변하지 않음 > 스터디 시간에 해결하기

 

Horizontal resizing을 ‘Fill container’로 변경

 

여러 가지 형태의 알림창 만들기

  • 기본형 알림창 및 단일 버튼 알림창 생성
    • Alt를 누른 채 드래그 : 복제
    • Enter : 레이어의 하위 요소를 모두 한번에 선택
    • Shift + Enter or \ : 레이어의 상위 요소로 이동

 

프로필 카드 디자인하기

  • 디자인 요소 생성
    1. 툴바의 리소스 도구 or Shift + I
    2. [Plugins] 탭 선택
    3. 검책창에 ‘unsplash’ 입력한 다음 Enter
    4. 이미지를 넣을 도형 선택
    5. <Insert Random> 버튼 클릭하여 랜덤 이미지 넣기

 

  • 말줄임표 처리하기
    • 텍스트를 선택한 상채에서 Text 패널의 ‘Type settings’ 아이콘을 클릭한 다음 ‘Truncate text’ 활성화

 

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

컴포넌트로 동일한 형태를 반복해서 사용하기

컴포넌트 : 디자인 전체에서 재사용할 수 있는 요소 (작은 요소인 버튼이나 아이콘부터 레이아웃 전체까지)

툴 바 가운데 ‘Create component(Ctrl + Alt + K) 클릭 : 컴포넌트 생성

  • 메인 컴포넌트
    • 가장 먼저 생성한 컴포넌트
    • 인스턴트 컴포넌트의 기본 속성을 정의
    • 디자인에서 직접 사용하지 않고 별도 페이지에서 관리
  • 인스턴트 컴포넌트
    • 메인 컴포넌트의 복제본
    • 디자인에 직접 사용
    • 메인 컴포넌트와 속성이 동기화

Layer 패널의 아이콘과 색상으로 메인 컴포넌트, 인스턴스 컴포넌트, 일반 오브젝트 구분가능

  • 인스턴스 컴포넌트의 속성 변경하기
    • 이미 인스턴스 컴포넌트에서 독립적으로 변경된 속성들은 메인 컴포넌트의 영항을 받지 않음
    • 독립적으로 변경되지 않은 속성들은 메인 컴포넌트의 영향을 받음

 

컴포넌트로 아이콘 관리하고 사용하기

  • 아이콘 컴포넌트 만들기
    1. Shift + I 를 눌러 리소스 도구 선택
    2. [Plugins] 탭 선택
    3. ‘icon’을 검색
    4. ‘Feather Icons’를 선택

Ctrl + E : Union 그룹을 통합

  • 체크리스트 만들기
  • Shift + X : 면과 선 색상을 전환
  • Esc 두 번 클릭 : 편집 모드 해제
  • Ctrl + Shift + O : 선을 면으로 전환

불리언 프로퍼티 설정 - Show Detail 프로퍼티를 클릭해 비활성화하면 ‘상세 내용’ 텍스트가 사라짐

 

배리언츠 활용하기

  • 베리언츠
    • 메인 컴퓨넌트들로 이루어진 컴포넌트 세트
    • 각각의 컴포넌트에 프로퍼티를 설정해 컴포넌트의 관리 및 활용을 손쉽게 만들어주는 역할을 함

배리언츠 밖으로 복제된 인스턴스 컴포넌트를 선택한 상태에서 오른쪽 사이드 바의 Component 패널을 살펴보면 프로퍼티 항목을 확인 가능

 

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

프로토타입 : 사용자 경험과 유저 플로우를 테스트하고 검증할 수 있는 초기 모형

오른쪽 사이드 바에서 [Prototype] 탭을 선택 or Shift + E : 프로토타입 모드로 전환

핫스팟 : 인터랙션이 실행되는 부분. 동그란 조절점을 드래그하여 설정

연결선 : 핫스팟과 대상 지점을 연결하는 선

대상 : 인터랙션의 목적지가 되는 프레임

 

프레임 연결하기

 

온보딩 페이지 프로토타이핑하기

온보딩 : 서비스를 처음 접하는 사용자들에게 서비스 내용을 간략하게 소개하는 페이지

  • 플러그인으로 일러스트레이션 삽입
    1. 리소스 도구(Shift + I)를 선택
    2. [Plugins] 탭에서 ‘Blush’를 검색
    3. 선택하여 실행
    4. 마음에 드는 일러스트 선택하여 각 프레임 가운데에 패치
  • 플러그인으로 문자열 삽입
    1. 리소스 도구(Shift + I)를 선택
    2. [Plugins] 탭에서 ‘Lorem ipsum’을 검색
    3. 해당 플러그인 선택해 실행
    4. 각 프레임의 Title 부분을 모두 선택하면 Lorem ipsum 플러그인 활성화
    5. 플러그인을 ‘2 Words’로 설정
    6. <Generate> 버튼을 클릭하여 문자열을 삽입

 

스크롤 포지션 설정하기

  • 이미지가 있는 섹션 만들기
    • [Plugins] 탭에서 ‘Unplash’ 플러그인 검색한 다음 선택하여 실행