[내일배움캠프] UX/UI4기 사전캠프 2일차 : PPT보다 쉬운 피그마 1주차_강의 내용 정리 1-1~6

1-2 📘 피그마 인터페이스 읽히기

· 프레임 : 요소나 컨텐츠를 담는 도화지 (ppt의 슬라이드)

· 말풍선 : 코멘트, 수정요청

1-3 📘 피그마 꿀팁

· shift+2 : 캔버스에 작업물이 안보 일 때 전체로 보여줌

 

1-4 📘 기본 도형과 활용

· union selection : 도형을 합쳐주고 → 라운드 값 [999] → 더블클릭해서 자유자재로 움직일 수 있음

 

1-5 📘 피그마 커뮤니티와 플러그인

· 커뮤니티 : 공유 횟수가 높을 수록 퀄리티가 좋다👍👍

 

 

· 플러그인 : material 검색 → material design icons → run → 무료아이콘 사용가능

 

 

1-6 📘  Text & Color 사용법 / 스타일 지정

· 폰트 박스 사이즈 조절 : 단축키 cmd + shift + < , >

· 웹브라우저에서 로컬 폰트 사용하는 방법 : 데스크탑 os에 맞는 font installers 설치

 

· auto with : 글자에 딱맞게 지정

· auto height : 폭은 고정되고 높이 값만 변경 가능 (엔터)

· fixed size : 텍스트박스가 늘어나면 fixed size로 지정

 

 

· 단축키 숫자로 도형 컬러 투명도 조절 가능 (5= 50%)

 

· 텍스트 스타일 지정 :

1. 지정 할 글자 클릭 후 ‘∷’ → + → Name 지정

 

2. 텍스트 스타일 생성

 

3. 기존 지정 스타일 뿌시기

 

4. ‘∷’ 클릭 후 스타일 지정

 

 

· 컬러 스타일 지정 :

1. 컬러박스 선택 후 ‘∷’ 클릭 → + → Name지정 → Create style

 

2. 컬러 스타일에 추가된 모습

 

3. 삭제 : 우클릭 → Delete style

 

 

· 그림자 스타일 지정 :

1. 그림자 효과가 있는 사진 클릭 → Effects → ∷ 클릭 → + → Name → Create style

 

2. 빈 화면 클릭 후 보이는 Effect style

 

 

 

---

✍️ 스타일 지정 활용 한 과제

 

 

오늘 처음 듣기 시작한 피그마 강의 !!

일러스트랑 비슷한 점이 많은 것 같다. 단축키도 그렇고..

union selection 이라는 기능은 진짜 신세계 !!

일러스트에서는 합치고 자르고 해서 처음에는 그런식으로 하는 줄 알았는 데

합쳐진 도형들이 다시 각기 움직이도 하고 슬라임처럼 붙는다..

 

또 신기 했던 점 !

기본적인 아이콘들이 무료로 사용 가능하다는 점..

숫자로 투명도 조절하는 것도 너무 편하고 좋다..👍

스타일 지정 효과들은 참 유용한 기능인 것 같다.

 

너무 재밋다😊