[내일배움캠프] UX/UI4기 사전캠프 5일차 : PPT보다 쉬운 피그마 1주차_강의 내용 정리 1-7~11(과제)

1-7 📘 이미지 가져오기, 내보내기

· 이미지 내보내기 : 내보낼 컨텐츠 모두 클릭 → Export 처리 → cmd+shigt + E

(내보내기 가능한 파일 형식 : PNG, JPG, SVG, PDF

 

·  프레임 안에 요소가 있는 데, 내보내기가 안될 때 : 레이어에서 프레임 레이어가 들어가 있는지 확인

 

· 텍스트와 이미지 크기를 함께 늘리는 방법: 단축키 K

 

1-8 📘 이미지 클리핑 마스크, 플러그인 'upsplash' 

· 이미지 클리핑 마스크 : 마스크 영역은 이미지 뒷쪽, 보여질 이미지는 앞쪽에 위치 → cmd+alt+M

 

· 클리핑 마스크 해제 : 레이어 패널에서 마스크 영역인 도형 선택 → 우클릭 → remove as mask

 

· Unsplash 플러그인 활용 : 플러그인 → Unslpash 검색 → run → 창 뜨면 presets → portrait 누르면 랜덤으로 얼굴 이미지로 바뀜 → 나머지 테마들로 랜덤이미지 활용하기

👍 장점 ! 간단한 이미지 소스를 바로바로 찾아서 적용할 수 있음

 

1-9 📘 프레임과 그룹의 차이

· 그룹 만들기 : cmd + G

· 그룹 해제 : cmd + shift + G

🔺그룹 안된 화면                                                                🔺그룹 된 화면

 

· 프레임 : 단축키 (F) , 컨텐츠를 담는 박스, 컨테이너 역할, 위치와 크기 조정, 다양한 옵션 적용

 

· 섹션 : 단축키 (shift + S) , 프레임 등 화면을 담는 단위, 프레임 화면을 카테고리 분류할 때 용이

 

· 개념 정리 :

 

 

· 프레임과 그룹의 차이 :

1. 프레임은 콘텐츠에 영향을 주지 않음. (프레임 자체만 변경 됨)
2. 그룹에 stroke, fill을 적용하면 그룹 안에 있는 콘텐츠에 적용됨.
3. 그룹에 속성을 부여하면 콘텐츠의 속성이 변경 됨
4. 그룹의 크기를 바꾸면 콘텐츠 크기가 변경됨.

📌 프레임 만들기

 

📌 그룹 만들기

 

📌 기본 상태

 

📌 stroke 넣었을 때

 

📌 fill 넣었을 때

 

📌 사이즈 조절할 때

 

👍 팁 : 프레임에서 그린 원이 보이지 않을 때 ‘clip contestn 적용됫는지 체크’

 

1-10 📘 플러그인 'flow chart' 로 유저 플로우 기획하기

· 플로우 차트란?

1. 순서도
2. 일을 처리하는 과정을 순서대로 간단한 기호, 도형으로 도식화 한 것
3. 프로세스, 기획 등 실무의 다양한 분야에서 폭넓게 활용됨

 

---

1-11 📘 1주차 과제 : 플로그인을 활용한 유저 플로우 그리는 방법 총 정리

1. plugins에서 flow chart 검색 -> run

 

2. 플러그인 창 뜬 모습

 

3. 도형 클릭해서 도형 그리고, 글자 더블 클릭해서 내용 변경하기

 

4. 상, 하, 좌, 우로 화살표 누르면 도형 바로 클릭 가능

 

5. 완성

 

 

---

강의 내용을 기록하면서 정리했는 데 이게 과제일 줄이야~

원래 정리하던 내용이라 과제는 끝!!

 

플러그인은 참 유용한 기능들이 많은 것 같다.

Unslpash, flow chart 다 편리하게 잘 쓸 것 같다.

 

그룹, 프레임, 섹션의 차이를 정리 해 볼 수 있어서 좋았던 시간👍