Figma 글래스모피즘 만들어보기

Figma 글래스모피즘 만들어보기

 

무료 아이콘 참조

http://zesticons.com

 

기본기

사각형 - 단축키 R

 

Ractangle 1

W 1190 H 686 R 30

 

Ractangle 2

Fill - Linear Gradient - 흰색 - 대각선 지정 처음과 끝부분 - 처음 100, 마지막 30

Effects - Drop shadow - Blur 34 - 색상 15%

Effects - Background blur - Blur 60

Fill - 50%

Stroke - Linear Gardient - 흰색 - 100% - 대각선 지정 처음과 끝부분 - 처음 100, 마지막 0

Inside 두께 2 전체 테두리 지정

 

Icon

끝이 잘보이고 안쪽이 덜 보이게 fill - linear gradient (20, 50)

테두리는 처음이 빛나고 끝은 약하게 fill - linear gradient (100, 0)

Inside 두께 2

 

Inspection 프로토타입 지정하기

아이콘에 마우스 여부에 따라 default, hover 작업

연결 시킬 아이콘 드래그 및 선택 후 Create component set

아이콘 클릭 후 오른쪽 탭에 Prototype 클릭 이후 다른 아이콘을 드래그로 연결

주로 while hovering, mouse enter 사용

Prototype - Interactions - Mouse enterSmart animate - Custom bezier - 0.42, -0.32, 0.58, 1.37

Prototype - Interactions - mouse leave