UXUI Design

Figma로 포트폴리오 템플릿 만드는 방법 총정리 1.  Figma에서 새 디자인 파일을 만든 후 프레임을 1920 × 1080px로 만들어준다. 2. 첫 페이지엔 목업을 넣기로 하고 목업 플러그인을 실행한다.상단 아이콘 중 돋보기 아이콘을 선택하여 검색 탭으로 넘어간 후아이폰을 검색하고 Free Only에 체크하면 나오는 목업 중에적당한 걸 찾아 클릭한 후형광색 영역 안에 +버튼을 누르면이런 창이 뜨는데 여기에 사용할 화면을 드래그&드롭 해주면크롭하는 화면이 뜨고 목업하고 싶은 영역을 정하고 Crop버튼을 누르면이렇게 목업된 화면이 보이고 Paste 버튼이 활성화 된다.Paste버튼을 누르면 목업이 작업영역에 붙여넣기 되고적당한 크기로 조절해서 프레임에 넣으면 된다. 3. 다음 페이지는 개요나 목차를 ..

피그마 프로토 타이핑 기능 활용방법 총정리!Q. 피그마 프로토타입이란?A. 화면의 순서 또는 플로우 간의 연결을 시켜, 특정 버튼이나 영역을 눌렀을 때1. 어떤 화면으로 2. 어떤 인터랙션(클릭, 드래그, 스크롤 등) 스타일로 이동할 것인지 목업으로 보여주는 것 1. 프로토타이핑할 화면들을 모두 피그마로 가져온다. 2. 오른쪽 상단에 Design(디자인)으로 되어있던 걸 Prototype(프로토타입)으로 바꾸고 3. 화면을 담고있는 프레임을 클릭하면 상하좌우에 마우스를 갖다 댈 때 파란 스팟이 생긴다.이를 Hot Spot(핫스팟)이라고 하며, 인터랙션이 시작하는 위치가 된다. 4. 핫스팟을 잡고 늘이면 파란 화살표가 나오고, 이 화살표를 다음 화면이 될 프레임에다 붙게 연결시킨다.이때 나온 파란 화살표를..

Q. 오토 레이아웃이란?A. Figma에 있는 기능으로 안의 요소 크기에 맞게 유동적으로 줄어들고 늘어날 수 있는 프레임. 오토 레이아웃으로 설정하고 싶은 요소를 선택한 상태에서단축키 Shift + A를 누르면 오토 레이아웃으로 만들 수 있고,단축키 Ctrl + Shift + G를 누르면 오토 레이아웃 그룹이 풀리면서 해제된다.  꿀팁🍯 : 오토 레이아웃으로 여러 개를 묶어서 정렬하고 싶을 때한꺼번에 잡고 오토 레이아웃으로 묶는다 - X작은 단위부터 묶어서 정렬한다 - O

Figma Plugin을 활용하여 유저 플로우 그리는 방법 총 정리! 1. 피그마를 켜서 New design file을 만든다.2. 위쪽 섹션에서 Resources(단축키 Shift+I)를 누르고 나온 창에서 Plugins 파트로 넘어가서 Flow chart를 검색한다.3. 플러그인을 Run하면 나오는 창에서 원하는 도형을 선택한다.4. 작업창에 뜬 도형을 클릭하면 도형의 크기를 바꿀 수 있으며, Enter라고 적힌 텍스트는 더블 클릭하면 텍스트 속성을 바꿀 수 있고, 한 번 더 더블 클릭하면 텍스트 내용도 바꿀 수 있다.5. 다시 도형 선택으로 돌아가서 상하좌우에 뜬 화살표를 클릭하면 이어서 다음에 띄울 모양을 고를 수 있다.6. 도형을 선택하면 도형과 이어진 화살표가 생기고, 새로 생긴 도형을 이동하..