[UI/UX] Figma 사용법 (25/06/19 Updated)
01. 피그마로 웹사이트 베껴오기
https://youtu.be/MAdq_B4_4_w?si=pP9UOuI0rQwtDPQI
지원되지 않는 사이트도 있다.
i.e., SkyScanner
1-1. 피그마 기초부터 마스터까지
https://youtu.be/OHZC19qtqUo?si=3mSqqba4gHX8HApI
UI/UX는 다른 분야와는 다르게 유지·보수가 매우 중요하다.
따라서 실무에서 자주 사용하는 핵심 기능을 <Chapter 02 피그마 중급> 에서 다룬다.
UI/UX 디자인을 하면 필수로 알아야 하는 툴!
해당 강의는 피그마 <프로페셔널 팁> 요금제를 사용해야 문제 없이 따라갈 수 있다.
목차별 분석 (요금제) |
Chapter 01 피그마 기초
|
Chapter 02 피그마 중급
|
Chapter 03 피그마 고급
|
Chapter01 피그마 기초
1-2. 인터페이스 파악하기
https://youtu.be/5kkdxAHWgVs?si=qXE3nsA2_Ri5Jk-g
변수 기능, 라이브러리 등을 사용하기 위해서는 Professional Tip 요금제가 필요하다.
1-3. 레이어, 프레임, 섹션, 페이지
https://youtu.be/el7HvWpVEOQ?si=kaZYSPK7j5p3abYC
[ Ctrl ] + [ G ] : 그룹화하기
[ Ctrl ] + [ Alt ] + [ G ] : Frame으로 묶기
[ Ctrl ] + [ Shift ] + [ G ] : 그룹화 해제하기
[ Ctrl ] + [ [ or ] ] : 선택한 레이어 한 층 밑or앞으로 내리기
[ Ctrl ] + [ Alt ] + [ [ or ] ] : 선택한 레이어 맨 밑or앞으로 내리기
[ Alt ] 누르고 드래그 : 복제하기
프레임 = 아트보드
[ F ] 누르고 드래그 : 프레임 만들기
프레임 안에 프레임 삽입 가능
섹션
여러 화면에 대한 프레임을 그룹화하여 섹션으로 나누는 기능
[ Shift ] + [ S ]
[ Alt ] 누르고 마우스 가져다 대기 : 사이즈를 알 수 있다.
1-4. 레이아웃 그리드 설정하는 방법
https://youtu.be/SRT3QdR0iyo?si=kbfCdddazrSG1V4m
모바일 : Column 4단, 6단
[ Shift ] + [ G ] : 레이아웃 그리드 보기/숨기기
1-5. 도형과 텍스트로 UI 스타일링
https://youtu.be/mQMJfjcVT_o?si=a5ryJDzot_kvg4og
[ Enter ] : 문단 처리하면서 줄바꿈
[ Shift ] + [ Enter ] : 문단 처리하지 않고 줄바꿈
[ Ctrl ] + [ Alt ] + [ C ] : Properties 복사하기
[ Ctrl ] + [ Alt ] + [ V ] : Properties 붙여넣기
1-6. UI 디자인 예제 따라하기
https://youtu.be/CbENk_xZ4aY?si=q4_eaMOWdP_UAGEk
Typography - Setting - Basics - Truncate text - A... - Max lines 설정 시 길어지는 텍스트는 '...' 으로 표시된다.
1-7. 작업 공유 및 실시간 협업
https://youtu.be/_wJcwwprkMI?si=gLi2M1vM4O0T-5rd
1-8. 피그마로 에셋 or 결과물 내보내기
https://youtu.be/oCA4d0xUqtE?si=fzykl1ZWyGtJ3Y0Q
배경 이미지 : jpg 확장자
아이콘 : png/svg/pdf 확장자 (vector)
방법1) 일일이 개체 설정 후 [ Export ]
방법2) [ File ] - [ Export ]
[ ✅ Show in export ] 해제 시 Color가 설정되지 않은 부분은 투명화되어 Export됨.
1-9. 피그마에서 알아두면 유용한 기능 8가지
https://youtu.be/E2mmp2-v6GI?si=ZW2sfSaJJL3m7Y8x
현재 무료버전으로 해봤는데 안되는 기능 있어서 남겨둡니다.
< 안 되는 플러그인 >
Rename Layers - 이름 자동으로 생성해줌
First Draft - 앱 디자인 자동해줌
Translate to… & Shorten - 번역
Make an image & Remove background
Multi Editing
Select All With
< 가능한 플러그인 >
8:03 Find and Replace - 텍스트를 찾아서 수정가능
1-10. 피그마 Dev Mode 이해하기
https://youtu.be/9qfPsq1fgA4?si=t7hAkqE9VgdnlBYO
1-11. 알아두면 유용한 피그마 플러그인
하단 Action Tab 클릭
1. Unsplash
Licenses [ Free ] 설정 후 이용
이미지 영역 클릭 후 넣고자 하는 이미지 클릭
2. Iconify
대부분 무료
3. Graph Generator
4. 한글 더미
5. 페이스 더미
저작권 X
6.
7. Autoflow
요소 클릭 후 [ Shift ] 클릭 -> 이동할 Fram 선택
8. Figmap - Map Maker
지도 삽입 가능
Chapter02 피그마 중급
2-1. 피그마 스타일 사용법
https://youtu.be/8K7ZZaZ--cg?si=3i6Mt7jNLRoDQE3n
Style이란?
디자인 요소들에 적용되는 일관된 속성 집합
디자인 요소들을 쉽게 업데이트하고 일관성 있는 디자인을 유지할 수 있다.
Style의 종류
Style을 사용하는 이유
01. 일관성 유지
02. 유지보수 용이성
03. 작업시간 단축
Style 추가하는 방법
(1) Typography Style
[ Typography ] 에서 ....( Apply Style ) 클릭 - [ Text Styles ] - [ + ] 버튼 클릭 - Name 설정 후 [ Create Style ]
여백 클릭 시 [ Local Style ] 영역에서 확인 가능하며, Font size와 행간 값이 나옴.
수정 시 우측 [ Edit Style ] 버튼 클릭
(2) Color Style
[ Fill ] 에서 ....( Apply Style ) 클릭 - [ + ] 버튼 클릭 - [ Style ] - Name 설정 후 [ Create Style ]
(3) Effects
(3) - 1. Drop Shadow Style
[ Effects ] 에서 ....( Apply Style ) 클릭 - [ Effect styles ] - [ + ] 버튼 클릭 - Name 설정 후 [ Create Style ]
(3) - 2. Background Blur Style
[ Effects ] 에서 ....( Apply Style ) 클릭 - [ Effect styles ] - [ + ] 버튼 클릭 - Name 설정 후 [ Create Style ]
(4) Layout Grid
[ Layout gird ] 에서 ....( Apply Style ) 클릭 - Grid 설정 - [ + ] 버튼 클릭 - Name 설정 후 [ Create Style ]
2-2. 피그마 Auto Layout 사용법
https://youtu.be/rKLb9PHgrKg?si=1MUfxGbqf5NPExcz
2-3. 리사이징 대응을 위한 Constraints 이해하기
2-4. 피그마 컴포넌트 완전 마스터하기
2-5. 피그마 컴포넌트의 프로퍼티 완벽 이해하기
2-6. 피그마 변수 개념 이해하기
2-7. 피그마 변수와 함께 Mode 활용법(다국어 지원, 다크모드)
2-8. 피그마 프로토타이핑 기초 지능 익히기
2-9. 피그마 프로토타이핑 고급 기능 익히기
Chapter03 피그마 고급
3-1. 디자인시스템이란?
3-2. 피그마 라이브러리 사용법 알아보기
3-3. 라이브러리로 컬러 시스템 구축하기
3-4. 디자인시스템 타이포그래피 라이브러리 생성
3-5. 디자인시스템 아이콘 라이브러리 생성
3-6. 디자인시스템 Spacing & Sizing 라이브러리 생성
3-7. 디자인시스템 컴포넌트 라이브러리 생성
3-8. 피그마로 제작한 디자인 시스템 활용해서 템플릿 제작하기
3-9. 피그마 라이브러리 스왑 기능 활용하기
단축키기능 설명
| 단축키 | 내용 |
| Ctrl + G | 그룹화하기 |
| Ctrl + Alt + G | Frame(프레임)으로 묶기 |
| Ctrl + Shift + G | 그룹화 해제하기 |
| Ctrl + [ 또는 ] | 선택한 레이어 한 층 밑/앞으로 내리기 |
| Ctrl + Alt + [ 또는 ] | 선택한 레이어 맨 밑/맨 앞으로 내리기 |
| Alt + 드래그 | 복제하기 |
| F + 드래그 | 프레임(아트보드) 만들기 |
| 프레임 안에 프레임 삽입 | 가능 |
| Shift + S | (섹션) 여러 프레임 그룹화 |
| Shift + G | 레이아웃 그리드 보기/숨기기 |
| Enter | 문단 처리하며 줄바꿈 |
| Shift + Enter | 문단 처리 없이 줄바꿈 |
| Ctrl + Alt + C | Properties(속성) 복사 |
| Ctrl + Alt + V | Properties(속성) 붙여넣기 |
| Alt + 마우스 올리기 | 사이즈 확인 |
- 프레임 = 아트보드
- 섹션: 여러 화면에 대한 프레임을 그룹화하여 섹션으로 나누는 기능