[UI &UX] 🔨 How to use Figma? 2편

⚡Low Fidelity 프로토타입 만들기!

이번에는 Low Fidelity 프로토 타입으로 웹의 화면을 간단하게 구성해보겠습니다.
실제 웹처럼 만드는 것을 High Fidelity라고 하고 간단한 기본 요소들의 상호작용을 간단하게 나타낸 것을  Low Fidelity라고 합니다. 

 

1. 👷계정 만들기

아래 사이트로 들어가 구글로 로그인하거나 계정을 만들어야 합니다!
로그인 후 온라인 또는 데스크톱버전으로 웹을 실행할 수 있습니다.

https://www.figma.com/?fuid= 

Figma: the collaborative interface design tool.

 

2.  📋Design File 만들기

우측 상단에 New design file을 눌러 새로운 design파일을 만들고 
상단에 untitled를 클릭해서 이름을 설정해 주세요

 

2.  📱Canvas 설정하기

캠버스 화면 중앙에 위치하는 캔버스에 프레임을 만들어 주어야 한다,
Toolbar에 있는 #격자무늬를 눌러 원하는 모양의 프레임을 선택해주세요

 

3.  🧹화면 꾸미기

Toolbar에 있는 ㅁ모양을 눌러 원하는 모양의 도형을 선택하고 설치해 주세요
설치 후 layer패널에 요소를 클릭하시고 design패널로 가서 마음껏 화면을 꾸며 주세요

간단하게 test모듈을 만든다고 생각하고 만들어 보자
대부분의 것들은 파워포인트와 비슷한 방식으로 돼있어서 화면을 제작하기에 그리 어렵지는 않습니다.

📌팁! 레이어 정렬하기

옆의 레이어 패널에서 레이어의 순서 위치 등을 쉽게 정렬할 수 있습니다.

 

4. 🎬화면 동작 넣기

📺동작 확인하는 법

toolbar의 가장 오른쪽 부분에 ▶을 누르면 실제 프레임에서 어떻게 보이고 있는지를 확인할 수 있습니다.

 

📍scrolling

프레임을 클릭한후 design패널 상단에 있는 prototype패널을 열고 scroll기능을 넣어 봅시다
Horizontal scrolling : 좌우로 스크롤링 
vertical scrolling : 수직으로 스크롤링 

 

📌팁 로그인 아이콘 위치 고정시키기

스크롤할 때 로그인 같은 버튼은 그 자리에 그래로 있어야 하지만 위의 경우 로그인이 같이 움직인다 
위와 같은 문제는 디자인 패널에서 fix position when scrolling을 check 해주면 된다.

 

📍page 전환하기

로그인 페이지를 만들어보자!
로그인을 눌렀을 때 동작하는 페이지를 하나 만든 후 prototype을 눌러 ⊕모양이 뜨면 넘기고 싶은 페이지로 
연결해주고
1. 어떤 동작을 했을 때 연결할 건지 설정해주세요
(눌렀을 때 효과를 주기 위해 on tap으로 선택)
2. 새로운 오버 레에 화면을 띄울 건지 기존의 오버레이에 덥어 씌울 건지 방식을 설정해 주세요
(새로운 오버레이에 페이지를 띄우기 위해 open overlay를 선택)
3. animaition을 추가해주세요
(들어가는 거처럼 보이게 하기 위해 move in을 선택)

 

 

📌팁! 자주 사용하는 기능 & 단축키 모음

기본 단축키

• 복사하기 : Command + C
• 붙여 넣기 : Command + V
• 잘라내기 : Command + X
• 복제하기 : Command + D 혹은 Option 누른 상태로 드래그
• 여러 요소 동시에 선택하기 : Shift 누른 상태로 클릭
• 그룹으로 묶기 : Command + G
• 프레임으로 묶기 : Command + Option + G
• 그룹, 프레임 해제하기 : Command + Shift + G
• 간격 측정하기 : 요소를 선택한 상태에서 Option 누르고 다른 요소에 마우스 올려놓기

오토 레이아웃

• 오토 레이아웃 추가하기
  • 오토 레이아웃 적용할 요소 선택 → Shift + A
  • 오토 레이아웃 적용할 요소 선택 → Design 탭 Auto layout 에서 + 버튼 선택
• 오토 레이아웃 제거하기 : Shift + Option + A

컴포넌트

• 단일 컴포넌트 생성 : 컴포넌트로 만들 요소 선택 → Command + Option + K 혹은 상단 Create component 버튼 클릭
• 컴포넌트 여러 개 생성 : 컴포넌트로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create multiple component 선택
• 상태를 가진 컴포넌트 생성 : 컴포넌트의 상태로 만들 요소 모두 선택 → Create component 버튼 옆 드롭다운 클릭 → Create component set 선택
• 컴포넌트에 상태 추가하기 : 상태를 추가할 컴포넌트 선택 → 화면 우측 Design 탭 Properties에서 + 버튼 클릭 → Variant 선택 → 컴포넌트 하단에 생긴 보라색 + 버튼 눌러 상태 추가
• 컴포넌트의 인스턴스 생성
  • 컴포넌트 복제하기 (Command + D 혹은 Option 누른 상태로 드래그)
  • 화면 좌측 Assets 탭에서 인스턴스를 생성할 컴포넌트를 드래그하여 화면에 끌어다 놓기

 

Figma는 이 외에도 다양한 단축키를 제공합니다. Figma 화면에서 Control + Shift +? 를 누르면 사용 가능한 모든 단축키를 확인하실 수 있습니다.

• Command 키가 아니라 Control 키입니다. 헷갈릴 수 있으니 주의하세요!