1. 효율적인 작업 환경 설정
⌨️ 단축키
Preferences - Keyboard layout...
피그마에서 사용하는 단축키를 확인할 수 있고,
키보드 레이아웃을 변경해서 다시 매핑시킬 수도 있다.
🎨 컬러 프로파일
Preferences - Color profile...
sRGB
Display P3
애플제품으로만 하면
Display P3로 선택
안드로이드도 소화를 해야 하면 Default값인sRGB선택둘다 디스플레이 용도라서 프린트 출력시에는 적합하지 않음
〰️ 넛지
개체를 움직일 때 움직이는 간격
Preferences - Nudge amount...
Small nudge는 개체 이동할 때,
Big nudge는 shift를 누른 상태로 이동할 때 (8point 좋음)
작업 환경 설정에는 정답이 없다.
초기 설정을 내 작업에 유리하게 설정하기 위한 것이니 상황에 맞게 변경하면 된다.
2. 피그마 파일 썸네일 - 실습
커버를 만들면 좋은 점
- 한눈에 프로덕트 구분
- 비슷한 내용의 파일들을 빠르게 탐색
- 명확한 커버로 협업자에게 파일 설명
[1] 프레임 만들기
600 x 360 ➡️ 커버를 쓰기에 딱 좋은 사이즈
[2] 텍스트
파일의 명칭(크게) + 개발 환경(중간) + 담당자 이름(중간)
[3] Set as thumbnail
[4] 썸네일 적용 확인
예쁜 것보다 간결하고 명확하게 전달하는 것이 썸네일의 목적 ⭐⭐⭐
3. 커뮤니티 리소스
[1] Google, Material Kit
- Google에서 사용하는 디자인 키트
- 동시대에 Google의 디자이너가 사용하고 있는 리소스를 확인할 수 있음
[2] Apple, Design Resources
- apple의 시스템 UI가 모두 담겨져 있음
[3] 밀리의 서재, millie Design Library 2.0
- 디자인 시스템 구축을 할 생각이 있다면 참고하기 좋음
- 국내 개발환경, 디자이너들의 리소스들을 현실적으로 파악한 라이브러리
- 적은 리소스로 빠르게 라이브러리를 구축하고자 할 때, 네이밍 규칙, 구성들을 어떻게 해야하는지 많은 힌트를 얻을 수 있음
- 디자인 시스템 구축을 하지 않더라도 다른 회사가 어떻게 구축되어있는지 확인할 수 있음
[4] Google, Material Design Icons
- Icon만 모여있음
- 디자인할 때 적재적소에 다 쓰일 수 있을 만큼 종류가 많음
[5] macOS Browser UI Kit
- 모바일이 아니라 웹화면을 구성해야할 때 좋음
- 시안을 공유하거나 확인하고 싶을 때 활용하기 좋음
[6] Free Emoji Pack
- 윈도우에서 apple 이모지를 사용하고 싶을 때
4. 생산성을 높여주는 플러그인
[1] Autoflow
- 플로우를 적용할 때 유용
- shift를 누른 상태에서 선택하면 플로우 화살표 생김
- 선에 대한 옵션 설정 가능
- 플로우에 대한 설명도 추가할 수 있음
[2] Unsplash
- 저작권 동의 필요 없이 사용 가능한 무료 이미지
[3] Material Symbols
- 아이콘 빠르게 불러오기
[4] lorem
- 더미 텍스트 삽입
- 직접 입력하지 않아도 되는 문장 예시들 집합
- 이메일, 전화번호 등 다양한 형식의 텍스트 적용 가능
[5] LottieFiles
- 다이나믹한 애니메이션 UI 제공 ➡️ 코드화시키기에도 좋음
- 가입을 해야만 사용이 가능
- 컬러 내맘대로 커스텀 가능
- 설정 적용이 많아지면 유료로 사용해야 할 수 있음
- 애니메이션 파일을 넘기기 위해 JSON 파일 다운
- 애니메이션 적용 후에는 코멘트를 통해 표시해 두면 협업자도 확인하기 좋다.
#피그마 #figma #피그마사용법 #디자인 #UX #UI #메타코드M #메타코드 #그래픽 #정보공유 #디자인추천 #취업준비 #취준생 #오토레이아웃 #프로토타입 #프레임 #메타코드M #메타코드 #피그마사용법 #피그마유료 #피그마다운로드 #피그마자격증 #피그마무료 #피그마강의 #피그마사이트 #피그마다운 #메타코드엠
