3월 13일 복습

Figma 화면

https://www.figma.com/design/rvbGI4iDR0q1BANDQRSmAM/1%ED%98%B8-UI_UX-%EB%B0%98%EC%9D%91%ED%98%95-%EC%9B%B9%EB%94%94%EC%9E%90%EC%9D%B8-%26-%EC%BD%94%EB%94%A9?node-id=234-2&p=f&t=4b58whqWgRw69t4I-0

Figma

component : 실체화 되지 않은 객체, 존재만 하고 쓰이지는 않는다. 형식을 만들어놓고 재사용

component 양식을 복사하면 복사한 양식은 Instance가 된다.

Instance : component 복사본, 하나만 존재 component 텍스트 선택해서

Create component property를 클릭하면 Text라는 변수에 MENU-1이라는 값이 들어있다(변수, 값 변경가능)

 - 마우스 메뉴에 올리면 하이라이트 추가

컴포넌트 클릭- add variant 클릭 : 프로퍼티가 2개 된다. 2개 전체가 컴포넌트 Variant2에 색상 변경( 마우스 올렸을 때)

Variant2 label를 state로 변경 state라는 프로퍼티에 mouseover로 변경

메뉴와 서브메뉴 컴포넌트를 각각 만든다음에 메뉴 인스턴스와 서브메뉴 인스턴스로 이루어진 컴포넌트를 만든다.

(마우스오버 효과를 위해)

create component set를 만들어서 또 하나의 컴포넌트를 만든다.