피그마에서 프로토타입 & 스마트 애니메이션 만들기

실무에서 쓸 일이 많이 없었던 프로토타입, 그러나 알아두면 유용할 것 같아 강의 수강 후 적어보는 글 프로토타입 트리거 종류 ① On click - 요소를 클릭했을 때입니다. ② On drag - 요소를 가로, 세로 방향으로 드래그 했을 때입니다. ③ while hovering : 요소에 마우스를 올리고 있는 동안 입니다. => mouseenter와 mouseleave를 번갈아 실행 ④ while Pressing : 요소에 마우스를 꾹누르고 있는 동안 입니다. => mouse down과 mouse up을 번갈아 실행 ⑤ Mouse enter : 마우스가 영역에 들어가는 순간의 액션처리입니다. ⑥ Mouse leave : 마우스가 영역을 벗어나는 순간의 액션처리입니다. ⑦ Mouse down : 마우스를 ..

피그마로 플로우 차트 그리기

그동안 플로우차트는 draw.io로 그렸었는데 피그마로 강의 듣다가 신박한 플러그인을 알게되었다. 이름부터 직관적인, Flow chart 플로우차트 그리는데 필요한 다양한 컴포넌트들을 손쉽게 드래그 & 드롭으로 갖다 놓을 수 있다. 맨 처음 컴포넌트만 갖다 놓은 후 연결하고 싶은 방향으로 화살표를 클릭하면 퀵하게 다른 프로세스를 추가할 수 있고 화살표까지 알아서 똑똑하게 연결해준다. 다음 컴포넌트를 미리 가져다 놓은 상황이라면 패널에서 shift 를 누른채로 화살표를 클릭하면 도형이 연결된다. 오 똑똑해...!! 아주 마음에 드는구만!! 무언가 추가 행동을 설명으로 쓰고 싶다면 화살표 중앙 부분을 클릭해 텍스트를 입력하면 된다..!! 이제 굳이 draw.io 로 이동하지 않고 피그마 안에서 다 해결하면 ..

피그마 단축키 모음집

ctrl + shift + V : 서식없이 붙여넣기 alt + H : 컨텐츠 가운데 정렬 (수평) alt + V : 컨텐츠 가운데 정렬 (수직) alt + WASD : 컨텐츠 상하좌우 정렬 shift + A : 오토레이아웃 추가 ctrl + alt + K : 컴포넌트 만들기 shift + I(i) : 컴포넌트 패널 열기 & ctrl + / : 메뉴, 플러그인 찾기 shift + 1 : 모든 프레임을 한 화면에 축소 shift + 2 : 특정 개체 확대 ctrl + shift + K : 이미지 삽입 ctrl + alt + M : 이미지 클리핑 마스크 (마스크 해제 시에는 마스크 영역 도형만 선택해서 단축키 눌러야 함) ctrl + shift + 우클릭 : 겹친 레이어 안에서 원하는 개체만 선택하기 (프레임..