TIL 23.02.16

오늘은 Figma를 통해서 UI를 제작해보는 실습을 하였다.

Nav

우선 버튼을 컴포넌트로 제작한 뒤, hover상태일 때의 poperty를 생성해준다.

그 뒤 버튼 여러개를 인스턴스로 제작하여 이어 붙인뒤 이름을 수정하고, 하나의 컴포넌트로 만들어 Nav를 제작하였다.

 

 

모달

모달은 모달 버튼을 누르면 모달이 나오게 open overay을 주고, 모달닫기를 누르면 close overay를 주어 구현하였다.

 

토글

토글은 on 상태를 컴포넌트로 만든 뒤, off일 때의 property를 추가하여 제작하였다.

 

탭

구현한 UI중에 탭 창의 구현이 제일 까다로웠다.

어떤 곳에 어떤 interactions을 주어야 되는지 헷갈려서, 의도치 않게 탭 창이 중복되고, 버튼의 색만 변하는 실수를 겪었다.

최종적으로는 선택되지 않은 버튼에 change ineractions을 주어서 다른 property로 전환되게 연결해주니 잘 작동하였다.

 

 

 

아코디언

아코디언 또한 열기 전의 모양을 컴포넌트로 생성한뒤, property로 열린 모양을 추가해주어서 제작하였다.

 

이외의 UI는 시간이 부족하여 제작을 못했는데, 추가적으로라도 시간을 내서 제작해보아야겠다.

시연영상