피그마(Figma) 학원수강 10회차

 

2024.11.04

피그마 학원수강 10회차

 

학원 수강 노트 

 

지난번에 만든 오버레이 예제파일을 이어서

 

#06_Prototype3_오버레이(Overlay)

1. 화면구성 해주기

 

(모바일 메인)이라고 한 프레임에  네모 도형을 대충 드래그해서 만든 후,

도형의 사이즈를 375x450로 설정해준 후, fill에서 이미지로 채워준다.

 

그리고 그 아래에 네모 도형을 또 대충 드래그해서 만든 후,

375x235 사이즈로 설정해준 후, fill에서 이미지로 채워준다.

 

 

그 다음엔 좌측에 만든 (패널/메뉴) 프레임에서 프레임의 색상을 바꿔준다.

#7C51A1 투명도는 90%

그리고 네모 도형을 대충 드래그해서 만들어주고 300x667로 사이즈를 변경해주고

좌측 상단에 맞춰 배치해준다.

 

 

그리고 메뉴 텍스트를 입력해주고 텍스트들을 모두 선택한 후,

오토레이아웃 처리해준 후, 이름을 menu로 바꿔준다.

 

 

해당 menu의 오토레이아웃 값을 변경해준다.

 

 

플러그인에서 close의 아이콘을 적절한 것을 선택해서 불러온다.

ctrl+shift+g를 눌러서 vector만 남겨준 후, 오토레이아웃 처리해준다.

 

 

높이값과 패딩값을 조절해준 후 위치를 맞춰준다.

 

 

2. 인터렉션 추가하기

 

On click (기존에는 On tab)  : 업데이트 되면서 모바일이든 태블릿이던 on ckick으로 통일

 

 

메인화면에서 좌측 메뉴버튼을 눌렀을 때 메뉴가 좌->우로 열리는 효과를 주기

메뉴 버튼 누르고 메뉴/패널로 핫스팟을 끌어간다.

Open overlay로 선택하고 애니메이션은 Move in으로 선택해주고 방향은 → 0.6초로 설정

 

 

열린 메뉴를 닫을 때도 인터렉션을 설정해줘야 하므로 x 버튼을 눌러서 인터렉션을 추가해준 후,

Close overlay만 설정해주면 끝난다.

 

 

#07_Prototype_호버(hover)

 

 

 

 

 

 

 

 

컴포넌트 세트 만들기

 

컴포넌트는 베리언츠가 가능하지만 인스턴스는 불가능하다.

 

 

 

그래서 인스턴스를 다시 컴포넌트로 만들어줘야하는데 이름이 동일하면 안되기 때문에

img01/default, img01/hover로 바꿔주고 둘다 선택해주고