Happiness!

1주차는 직접 피그마 툴을 다뤄 보는 시간이었다. 기본적인 베리언트 설정을 배웠는데, 나아가 프로토타이핑을 더 써보고 싶어서 유튜브의 도움을 받았다. 프로토타입은 피그마로 코딩 없이도 애니메이션을 구현할 수 있어 실무에서도 매우 유용하다. 컴포넌트 텍스트 > 프레임 씌우기 > 컴포넌트 베리언트 설정 상단 탭 메뉴 좌우 스크롤 스크롤을 하고싶은 contents > 프레임 씌우기 > 프로토타입에서 수평 스크롤 설정 (주의) 스크롤을 하고싶은 contents들은 묶인 Frame size보다 좌우 폭이 길어야 스크롤링이 된다 콘텐츠 영역 상하 스크롤 스크롤을 하고싶은 contents > 프레임 씌우기 > 프로토타입에서 수직 스크롤 설정 (주의) 스크롤을 하고싶은 contents들은 묶인 Frame size보다 ..

피그마 프로토타입이란? 화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때 어떤 화면으로 어떤 인터랙션(클릭, 드래그, 스크롤 등) 스타일로 이동할 것인지 목업으로 보여주는 것이다. 1번. 핫스팟(Hot Spot): 인터랙션이 시작하는 위치다. 2번.커넥션(connection) 라인: 핫스팟과 이어지는 두개의 요소 사이의 연결 선. 이 선을 클릭하면 프로토타입의 세부적 설정이 가능하다. 3번. 데스티네이션(Destination): 핫스팟에서 커넥션으로 연결한 도착점이 되는 요소를 의미한다. 인터렉션 디테일창이란? 핫스팟에서 데스테이션 요소를 클릭하면 뜨는 창이다. 1번. 트리거(Trigger): 이벤트라고 볼 수 있는 인터렉션의 시발점으로 On click, hover 등을 선택할..