피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z - 인프런

오리엔테이션 2. 왜 피그마인가?

강의명 : 피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

수강 기한 : 무제한

진도율 : 0강/76강 (0%) | 시간 : 0분/543분

나가기

미수강

이전수업

다음수업

피그마(Figma)를 활용한 UI디자인 입문부터 실전까지 A to Z

수강 기한 : 무제한

진도율 : 0강/76강 (0%) | 시간 : 0분/543분

강의를 시작하기에 앞서

기획 일만 하던 내가 3개월만에 UI디자인 능력을 장착하게 된 사연

6분

내가 UI디자인 능력을 장착할 수 있었던 비결

12분

오리엔테이션 1. 이 수업을 통해 얻는 것

9분

오리엔테이션 2. 왜 피그마인가?

5분

오리엔테이션 3. 수강대상자

2분

이 수업을 듣기 전 알면 좋은 한가지

4분

질문하는 방법과 예제 파일에 접근하는 방법

2분

UX, UI 디자인의 단계별 핵심 개념 이해하기

디자인 씽킹과 프로토타입

7분

로우파이 프로토타입

3분

미드파이 프로토타입 "와이어프레임"

3분

하이파이 프로토타입 "UI 디자인", 그리고 프로토타이핑

2분

최종 디자인 산출물 "핸드오프"

2분

시각 계층

5분

UX, UI디자인 툴로서 피그마 이해하기

피그마 툴 소개

8분

통계로 알아본 "UX, UI디자이너는 어떤 툴을 사용하고 있을까?"

9분

UX, UI디자인 툴 별 장단점, 그리고 피그마를 사용해야 하는 이유

5분

피그마로 디자인을 할 때 알아야 하는 기본 개념들

비트맵과 벡터 개념 이해하기

3분

레이어란 무엇인가?

2분

피그마 작업 환경 이해

무료로 시작할 수 있는 피그마의 가격 정책 및 서비스

2분

회원가입과 피그마의 파일 관리를 위한 환경

8분

피그마의 디자인 작업 환경

8분

피그마 단축키 확인하기

2분

화면 보기 관련 단축키 모음

4분

피그마 기초 기능 익히기

도형 만들기, 그리고 우측 패널 기능들 익히기

6분

트랜스폼 및 오브젝트 이동 관련 기능들과 단축키 익히기

8분

정렬, 분배, Tidy up, 그리고 Smart Selection 기능

4분

텍스트 만들기

4분

컬러 관련 기능 - 피커, 그라데이션

2분

이미지와 마스크 기능

5분

이펙트 이해하기

4분

생산성을 높여주는 플러그인과 템플릿

시간을 몇배, 몇십배 아껴주는 "플러그인"

5분

UI디자인의 퀄리티를 단숨에 높여주는 "템플릿 활용법"

6분

실전 예제 1. 스플래시 화면 디자인해보기

예제 샘플파일을 나의 드래프트로 가져오는 방법

3분

스플래시 UI화면 디자인하기

11분

실전 예제 2. 와이어프레임 만들기

UX, UI디자이너는 왜 와이어프레임을 만들어야 할까?

2분

기초 작업하기: 사이트맵과 로우파이 스케치

5분

E-commerce 모바일 앱 와이어프레임 만들기 1. 홈 화면 / 카테고리 화면

15분

E-commerce 모바일 앱 와이어프레임 만들기 2. 상세 화면 / 구매확정 화면

16분

E-commerce 모바일 앱 와이어프레임 만들기 3. 피그마로 워크플로우 만들기

7분

피그마로 아이콘 만들기 A to Z

좋은 아이콘을 만드는 원칙

7분

Boolean 기능 활용하기

5분

펜 툴로 라인 그리기

7분

Keyline 이해하기

10분

아이콘 만들기

15분

해상도를 고려한 아이콘 Export하기

5분

피그마의 그리드를 활용해 디자인의 완성도 높이기

그리드 이해하기

9분

그리드 만들기

10분

그리드를 활용해서 오브젝트 배치해보기

3분

그리드를 활용한 반응형 UI디자인 만들어보기

13분

효율적인 디자인을 도와주는 피그마의 기능들

Constraint 기능

14분

Auto Layout으로 버튼 만들기

8분

디자인 시스템을 만드는 이유, 그리고 Style과 Component

6분

스타일 기능 1. 텍스트, 컬러

10분

스타일 기능 2. 이펙트, 그리드

3분

스타일 기능 3. 삭제

1분 미만

UI Component에 대한 개념, 그리고 Figma의 Component 기능을 사용하는 이유

8분

Figma의 Component 기능 마스터하기

15분

라이브러리와 팀 라이브러리 기능

6분

종합 실전 예제 3. 이커머스 앱 UI 디자인

오픈소스 템플릿을 활용한 UI디자인 기초작업

15분

홈 화면으로 시안 작업하기

33분

디자인 시스템 만들기

5분

제품 상세 페이지 디자인

16분

구매 확정 페이지 디자인

9분

카테고리, 즐겨찾기 페이지 디자인

7분

피그마 프로토타이핑 툴 활용하기

프로토타이핑을 활용해야 하는 이유

3분

이커머스 앱 UI디자인에 프로토타이핑 적용해보기

11분

피그마로 협업 극대화하기

팀원 초대하기, 댓글 기능, 그리고 실전에서의 협업

8분

개발자에게 전달하는 최종 전달물 (핸드오프) 만들기

Export 기능

3분

피그마로 핸드오프 링크 만들기

4분

Zeplin으로 핸드오프 링크 제작하기

5분

UI디자인 실력을 키우는 꿀팁들 대방출

팁 하나. UI디자인 실력을 올려 주는 실전방법

2분

팁 둘. 내가 UI디자인할 때 참고하는 레퍼런스들

2분

팁 셋. 디자인 원리 및 공부자료 추천해주세요.

1분

팁 넷. 너무 많은 디자인 수정 요청, 어떻게 해야 하나요?

4분

커리어 설계 및 커리어 상담

6분

강의를 마무리하며

2분

커뮤니티

멘토링

멘토링 신청
에릭