Figma
Figma copied to clipboard
Published
20 hours ago •
yamoo9
yamoo9
Figma로 하는 디자인 맛보기 Class
Figma로 하는 디자인 맛보기 Class
Figma 디자인 도구를 활용하는 방법 맛보기 강의 수업 자료 저장소입니다.
1. Figma
Figma 디자인 도구 소개 및 기본 사용법을 학습합니다.
- Figma 도구 리뷰
- UI 디자인 도구 비교(Sketch, Adobe XD, Photoshop 등)
- Figma Config 2020(세미나 발표 해설)
- Figma 계정(Account) 생성/설정
- 파일 브라우저(File Browser)
- 외부 디자인 파일 불러오기(Sketch, Adobe XD 등)
- 도구 인터페이스(Tool Interface)
- 캔버스(Canvas)
- 프레임(Frame)
- 레이아웃 그리드(Layout Grid)
- 뷰 옵션(View Options)
- 이동 / 크기 변경(Moving & Scaling)
- 중첩(Nested) 프레임 / 슬라이싱(Slicing)
- 도형(Shapes) 그리기
- 펜(Pen), 연필(Pencil)로 그리기
- 텍스트(Text)
- 이미지(Images) 가져오기
- 이미지 마스킹(Masking)
- 레이어(Layers) 관리
- 컬러(Colors)
- 이펙트(Effects)
- 블렌딩(Blending)
- 스타일(Styles)
- 컴포넌트(Component)
- 자동 배치(Auto Layout)
- 플러그인(Plugins)
2. 프로토타이핑 & 핸드오프
디자인 → 프로토타이핑(코드 Zero) 제작 과정을 맛봅니다.
- 코멘트(Comments) 나누기
- 프로토타이핑(Prototyping)
- 에셋 내보내기(Exports)
- 핸드오프(Code)
3. 코드 맛보기
디자인 → 코드(개발) 프로세스를 맛봅니다.
- HTML, CSS 언어 소개 및 디자인
- JavaScript, DOM API 소개 및 디자인
튜토리얼(한글화)
Figma 팀이 제공하는 튜토리얼 문서를 한글로 번역하였습니다.
- Figma 오버뷰(Overview)
- Figma 기초 학습(Basic)
- Figma 와이어프레임(Wireframe)
- Figma 프로토타입(Prototype)
- Figma 자동 배치(Auto Layout)
실습 파일
Figma 기초 툴테크닉을 학습한 후, 준비 된 실습 예제 제작를 진행해봅니다.
멀티 캠퍼스 UI 제작 실습
준비 된 예제 순서에 맞춰 Design Sytem → UI → Prototyping 순으로 실습을 진행합니다.
패럴럭스(Parallax) 프로토타이핑
준비 된 예제를 실습해 패럴럭스 프로토타입에 대해 학습합니다. (Smart Animate 활용)
0. 이미지 다운로드
Woman Wearing Grey Long-sleeved Top Photography
1. 이미지 오려내기
Photoshop을 사용해 사진에서 원하는 객체를 오려냅니다.
2. UI 디자인
Figma에서 오려낸 객체를 적절히 배치한 UI를 그려냅니다.
디자인 시스템
- 디자인 시스템에 대해 알아야 할 모든 것
- Figma를 활용한 디자인 시스템 제작
타이포그래피
- 웹 타이포그래피
yamoo9