PPT보다 쉬운 피그마 학습일지 썸네일형 리스트형 [학습일지]PPT보다 쉬운 피그마 3주차(1) 3-2 ~ 3-3 *유저 플로우(User flow)란 뭘까? -유저플로우는 제품/서비스를 사용할 때 사용자가 취하는 전체 경로를 표시하는 다이어그램 (설계도 같은 느낌) 장점 - 디지털 제품 또는 서비스내에서 사용자가 취하는 경로를 시각화한 것 - 유저 플로우를 그려서 사용자 경험을 확인하여 효과적으로 설계하고 개선 할 수 있다. ***오토레이아웃 단축키 : Shift+A / 해제 : Ctrl+Alt+D *화면 설계서란 뭘까? - 화면 구현하기 전 필요한 기능, 정책 등 화면 내 서비스의 모든 요소에 대해 정의하여 서비스 화면의 이해를 돕기 위한 문서 *Figma에서의 불릿 리스트 하는 방법 -(하이폰) + Space 더보기 [3주차 숙제] 클릭하면 이동하는 Figma 프로토타이핑 총정리 ㆍ체크박스 및 클릭 OFF→ON상태 만들기 1. R또는 Shape tools를 눌러 100*100 사이즈의 라운드값 20의 사각형 2개를 만들어준다. 2. 삽입할 도형 선택 → Plugin material → Design Icon에서 Done Icon으로 검색하여 크기조절 96*96 사이즈로 가져온다. 3. Alt +드래그로 하나 더 만들어서 도형과 Icon에 각각 색깔을 입혀주고(회색 OFF : D9D9D9, 초록색 ON : 16CB8A) 우측 상단쪽에 있는 도구를 이용해 가운데 정렬로 만든다 4. Frame쪽을 클릭해 OFF, ON으로 이름을 바꿔준다. 5. 위 사진과 같이 멀티 컴포넌트로 만들어준다. 6.OFF를 클릭한 상태로 우측상단 Design옆에 Prototype을 눌러서 사진과 똑같이 설정해.. 더보기 [학습일지] PPT보다 쉬운 피그마 2주차 학습일지 내용 범위 : 2-1~2-7 반응형 웹이란 감지된 화면 크기에 따라 자동으로 페이지가 재배얄되는 유동적인 접근방식 오토레이아웃이란 컨텐츠에 따라 자유롭게 변형되는 프레임 피그마는 크기에 따라 사이즈가 유연하게 늘어나는 리사이징 기능을 제공한다. 단축키 : Shift + A 해제 Ctrl + Shift + G 오토레이아웃의 기능은 매우 다양하다! 버튼, 카드, 하단 메뉴 바, 드롭다운 리스트 등등 요소들을 수정할 때 자동으로 사이즈가 변경된다는 편리함 오토레이아웃 리사이징이란 뭘까? -오토레이아웃 프레임 생성 시 상위 프레임 사이즈가 조정될 때 콘텐츠와 컨테이너가 어떻게 반응해야 할지 설정하는 속성 컴포넌트 이해하기 반복되는 UI를 그릴 때 사용하는 Master component 컴포넌트로 변경하.. 더보기 [1주차 숙제] Figma 플러그인 활용한 유저 플로우 그리는 방법 총정리 Plug icon 찾기 Plug icon을 눌러서 Plugin에서 Flow chart 검색해서 Run 누르고 실행 기다리기 주어진 차트모양에 맞게 나열하기 도형위에 커서를 올려두면 화살표 누르면서 도형 추가하기 도형 모양 추가 Enter부분을 더블클릭해서 내용입력 도형과 도형간의 Enter부분 YES 또는 NO 입력하기 더보기 [학습일지] PPT보다 쉬운 피그마 1주차 학습일지 내용 범위 : 1-1 ~ 1-6 운영채제 MAC Win 단축키 명칭 Cmd Ctrl 메뉴, 옵션 Dock Alt Shift Frame : 여러 전자기기의 해상도 크기를 볼 수 있으며 도형과 그림을 그리는데에 필요한 도화지 역할 Layer : 지금까지 작업해온 내용을 마우스 커서를 올려 눌러보면 어떤거에 해당하는지 확인가능 Hand Tool : 위치 조정 단축키는 Space 누른상태로 클릭이동 Shift + 2 : 작업물이 작아서 안보일 때 확대기능 Alt + 클릭 : 복사하려는 도형, 그림 끌어서 복사 도형을 정비율, 일정하게 늘리고 싶다면 Shift클릭상태로 도형크기 조절 Ctrl+D 색깔을 추출하여 색깔입히기 = 스포이드 단축키는 I 여러개의 직사각형을 6줄로 나란히 만들어 위에서부터 2, .. 더보기 이전 1 다음
