Figma

🌼<Low Fidelity 프로토타입 만들기>

 

피그마에서 화면을 설계하기 위해서는 프레임을 만들어야 한다.

# 을 눌러서 원하는 크기로 만들거나 오른쪽 design에서 원하는 형태로 만들 수 있다.

이처럼 피그마는 프레임안에 화면을 설계하면 프레젠테이션을 통해서 확인할 수 있다.

 

<scroll 효과>

추가하고 싶은 프레임을 선택하고 prototype 에서 overflow scrolling에서 어떻게 스크롤 할 건지 선택한다.

<화면고정> => 맨위의 header를 고정시키고 싶다면?

고정 시킬 요소 선택 -> Prototype 탭 -> Scroll Behavior -> Position : Fixed로 설정

<페이지 전환하기>

클릭했을 때 페이지가 전환될 요소를 선택하기 => Prototype 탭 => 원 모양을 이동할 페이지로 끌어서 연결

오른쪽에 모달창에서 클릭했을 때 (on Click) 연결하는 화면으로 이동하는 (Navigate to) 이벤트가 뜬다. 

Prototype 탭 => interactions => animation 효과를 줄 수 있다.

<가로로 scroll되도록 하려면?>

스크롤링 효과는 프레임에 넘치는 요소가 있을 때에만 적용해줄 수 있다.

밑에는 넘치는 요소가 있지만 프레임이 아니기 때문에 적용할 수 없는 것이다.

 

frame selection 해주면 된다.

 scroll효과를 주기 위해서 프레임을 움직여 보았는데 안에 있는 요소들이 움직이는 것을 볼 수 있다.

이러한 현상이 발생하는 이유는

프레임 안에 요소들이 고정이 되어 있지 않기 때문이다.

요소 선택 => design 탭 => constraints 에서 고정

프레임을 고정해 놓고 스크롤 효과를 준다.

스크롤할 때 더 공간을 주고 싶다면?

프레임 상에서 공간이 없어서 스크롤이 되지 않는 것이다.

도형을 만들어서 프레임 안에 넣어준 뒤

색이 어울리도록 흰색으로 바꿔준다.

그런 뒤 다시 넣어주고 프레임을

크기에 맞게 설정해주면 프레임보다 넘치는 요소가 생기고 스크롤이 된다.

 

 

🌼 <High Fidelity 프로토타입 만들기>

<컴포넌트로 만들기>

표시한 버튼을 누르면 컴포넌트로 만들 수 있다.

컴포넌트로 만든 것은 Assets에서 확인할 수 있다.

인스턴스도 만들 수 있다.

Assets에서 드래그 하거나 alt키(윈도우용) 눌러서 드래그하면 된다

인스턴스 만들어서 넣어주면 된다!

컴포넌트를 변경해주면 여러개의 인스턴스가 변경된다.

 

<메뉴 열고 닫기>

이번에는 페이지전환이 아닌 overlay라는 interactions 이용해서

컴포넌트가 아니라 인스턴스에서 변경하면 서로 다른 인스턴스는 영향을 받지 않는다!

 

처럼 하면 메뉴가 열리고 닫히는 것을 확인할 수 있다.

overlay를 쓰면 좋은점 => 메인 페이지 위에 메뉴가 겹처서 뜬다는 것을 의미한다.

페이지가 여러개 있다면 메뉴가 열리는 경우가 3가지가 있다.

하지만 메뉴에서 페이지 연결은 하나 밖에 못해준다.

페이지 전환으로 하면 구현하지 쉽지 않다.

즉 여러 페이지에서도 쉽게 구현할 수 있다.

 

<프로필 사진을 클릭 했을 때 내려오는 목록 만들기>

 

overlay로 목록이 뜨도록 하고 manual로 원하는 위치에 뜨게 할 수 있다.

밑에 체크 표시는

클릭하면 overlay가 닫히게 하는 기능과

overlay 뒤쪽에 배경을 추가하는 기능이다.

메뉴가 잘 뜨는 것을 볼 수 있다.

 

<이미지 넘어가는 기능>

시간에 따라 넘어가거나, 직접 넘길 수도 있다.

우선 자동으로 가로 스크롤 하도록 하려면

1. 스크롤하려는 요소들을 프레임으로 만든다.

2. 이미지가 보여야 하는 만큼 프레임크기를 만든다.

3. 프레임 안의 요소가 움직이는 것을 고정 시켜준다.

4. design탭에서 clip content를 선택하면 프레임상에서 어떤 이미지가 뜨는지 볼 수 있다.

5. 프레임을 3개 복제한다.

6. 페이지 수를 수정한다.

7. shift를 누른 상태에서 이미지들을 선택하고 이미지를 옆에껄로 바꿔준다.

8. 3개의 프레임을 선택후 create component set을 누른다. => 하나의 컴포넌트에 3가지 상태가 있는 컴포넌트를 만들 수 있다.

@컴포넌트들이 시간이 흐르면 자동으로 상태가 변하도록 이벤트를 설정

after delay라고 일정시간이 지나면 바뀌는 이벤트 설정

상태가 변경되는 것이기 때문에 change to

alt는 눌어 인스턴스를 생성해서 위치에 갖다놓는다

전환속도도 너무 빠르고 애니메이션도 없다 => shift로 3개 다 선택해주고 interactions 을 수정해준다

@ 화살표로 이동하는 기능

화살표 버튼을 클릭했을 때 상태가 변경되어야 한다. => change to

직전에 change to사용해서 화살표로 연결만 시켜주면 된다.

< > 각각 버튼마다 연결해준다(눈이 침침해진다, 확대를 하자)

(일시정지는 고정되어 있는 상태를 3개 더 만든다음 각 컴포넌트도 재생버튼인 상대를 만들어 이벤트를 연결해준다.)

 

@카드컴포넌트  9분20초부터

마우스를 호버 했을 때 색상변화 => 컴포넌트 상태를 하나 더 만들어 주면 됨

이미 있는 컴포넌트에서 상태를 만들어 주고 싶을 땐

design => properties => varient 선택 => +버튼 눌러서 상태를 하나 더 만들어준다 => 디자인 변경후 상태의 이름을 붙여준다 => alt눌러서 인스턴스 3개 생성 => hover누르면 색이 바뀌는데 => hover했을 때 색이 바뀌도록 interactions 설정해준다. => 프레임에 담아서 스크롤 효과를 준다. => 그냥 담는게 아니라 auto layout을 이용해서 추가

auto layout 없을 땐 shift +_a누르면 생김 => 밑에랑 오른쪽에 마진을 준다. => 다시 넣은 후 스크롤 설정

 

1번

ㅣㄴ ㅅ2번

3번

5번

7번

헷갈리지 않도록 이름 설정

<GNB컴포넌트>

글씨에 밑줄 기능을 주면 위처럼 글씨가 두꺼워 지니까 프레임으로 감싸서 프레임에 밑줄을 준다.

auto layout을 통해 프레임을 씌워준다 => 아래에 밑줄 넣어줌 => auto layout을 쓰면 정렬하기 편해진다.

눌렀을 때 버튼과 안눌렀을 때 버튼 두가지 상태를 묶어서 하나의 컴포넌트로 만든다. => 여러개 상태를 갖는 하나의 컴포넌트

=> 6개의 인스턴스를 만든다.

auto layout을 쓰면 아래처럼 편하게 정렬 가능하다!

버튼을 누를 때 6개이 페이지(프레임)가 필요하다.

ctrl + d를 눌러서 6개를 만든다

각 property에 selected, default라는 이름을 지어준다.

각 버튼을 눌렀을 때를 저렇게 selected 상태로 설정해준다.

각 버튼을 눌렀을 때 맞는 페이지로 이동 => 컴포넌트에서 연결시켜주면 나머지 인스턴스도 적용이 된다.

인스턴스에도 적용이 된 것을 알 수 있다.

---

<토글>

서로 다른 상태를 만든다음 smart animation을 설정해준다. => 인스턴스 만들어서 컴포넌트에 넣어보면 잘 실행된다.

동그라미를 왔다갔다 할건데 smart animation 에서 저 요소가 이름이 다르면 다른 객체로 인식 =>

동그라미 1이 없어지면서 2가 생기는구나 라고 인식 => 이름을 같게 하면 동글1이 동글2로 이동했네 라고 인식해서 부드럽게 움직인다!(smart animation에선 이름이 중요하다!)

 

<탭>

두개의 상태를 가진 컴포넌트를 만든다.

각각을 그룹으로 만든다음 컴포넌트를 만들어야 한다.

=> 각 탭을 눌었을 때 어떻게 보이는지 3개의 상태를 만들어야 한다.

탭 1 일때 탭버튼의 첫번째 상태를 부여 나머지는 탭버튼의 두번째 상태 부여! 이런식으로 다 해준다.

그다음 노가다로 애니메이션 효과 주기!

<아코디언>

 

 

두개 크기가 똑같다.

이 버튼을 누르면 안의 요소들의 크기에 맞게 맞춰진다.

이런식으로 겹쳐주고 위에 텍스트는 안보이게 설정하면 이름이 똑같은게 두가지 상태에 들어가 있어서 글씨가 밑으로 내려오는 효과를 줄 수 있다 (위의 토글 참고)

 

<드롭다운>

드롭다운은 클릭하면 컴포넌트가 펼쳐져야 한다.

선택지가 많을 경우 스크롤이 되야 한다.

선택지를 클릭하면 드롭다운의 내용이 해당 선택지의 내용으로 바뀌면서 컴포넌트가 접혀야 한다.

detach instance하면 다른 컴포넌트의 인스턴스도 재활용해서 쓸 수 있다.

 

 

 

 

 

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

기본 단축키

• 복사하기 : 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 키입니다. 헷갈릴 수 있으니 주의하세요!