25%
24,750원
입문자를 위해 준비한
[UX/UI, Figma] 강의입니다.
전세계 가장 많은 사람들이 사용하는 협업 툴 피그마를 배워보세요! UI 디자인 스케치, 프로토타이핑 및 협업을 위한 디자인 도구 Figma(피그마)의 기본적인 사용법과 실무 활용법에 대해 학습해 봅니다.
✍️
이런 걸
배워요!
이런 걸
배워요!
Figma 기초 사용법
Figma 활용
Figma를 활용한 프로토타이핑
컴포넌트 이해와 활용
이런 분들께 추천드려요!
🎓
학습 대상은
누구일까요?
학습 대상은
누구일까요?
Figma를 처음 접하는 사람
Figma를 시작하고 싶은 예비 디자이너
업데이트 된 Figma를 학습하고 싶은 디자이너
조직에서 Figma를 사용하는 PM
협업 툴로 Figma를 활용하고 싶은 사람
안녕하세요
인프런 입니다.
인프런 입니다.
커리큘럼
총 84 개
˙ 6시간 58분의 수업
이 강의는 영상, 수업 노트, 첨부 파일이 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 0. 피그마 시작하기
11 강
∙ 33분
강의소개 + 이 코스에서 배울 내용과 예제 소개
미리보기
03:19
툴 소개 : 피그마는 어떤 툴인가, 강점, 주의사항
미리보기
01:52
피그마 - 가입부터 파일 생성까지
미리보기
02:48
피그마와 피그잼의 차이
미리보기
03:07
팀 > 프로젝트 > 파일, 실제 팀에서 하는 일과 동일한 상하위 개념
04:47
꼭 project 안에서 작업을 해야 하는 걸까? draft 알아보기
01:54
팀원 초대하고 권한 설정하기
04:29
Figma desktop app 설치하기
미리보기
01:51
피그마에서 작업하면서 웹과 스마트폰으로 미러링하기
02:23
피그마 작업을 도와주는 커뮤니티 활용하기
02:18
피그마에 다른 파일들 불러오기(sketch, fig, image, vector path, svg code)
04:48
섹션 1. 인터페이스 살펴보기
12 강
∙ 36분
Figma Web vs Figma desktop app 의 화면 차이
미리보기
02:55
피그마 요소의 하이어라키 : 파일 > 페이지 > 캔버스 > 섹션 > 프레임 > 엘리먼트
미리보기
02:48
피그마에서 작업하는 기본 순서 : 도구 선택 → 그리기 → 속성 설정
미리보기
01:51
툴바 > 상단 왼쪽 - Tools
미리보기
04:11
툴바 > 상단 가운데 - Contextual Tool Bar
미리보기
06:37
툴바 > 상단 오른쪽 - Share and View Settings
04:34
왼쪽 패널 살펴보기 - Page
01:38
왼쪽 패널 살펴보기 - Layer Panel
01:29
왼쪽 패널 살펴보기 - Asset Panel(개념정리)
02:05
오른쪽 패널 > 디자인 모드 살펴보기 - Design / Prototype Panel
03:03
에디터와 뷰어 권한에 따른 인터페이스 차이
02:44
Dev 모드 살펴보기 - Inspect / Plugins
02:28
섹션 2. 기본기능 이해와 활용
25 강
∙ 2시간 41분
도구 선택 : 단축키 쓰고 빠른 작업에 익숙해지기
미리보기
02:58
그리기 : 프레임 다루기
05:32
그리기 : 툴바로 쉐입 그리고캔버스에서 속성 바꿔보기
06:07
속성 설정 : 디자인 패널에서 정렬, 좌표, 사이즈, R값 상세 설정 해보기
13:35
속성 설정 : 오브젝트 복붙 vs 속성 복붙
01:43
그리기 : 레이어 다루기
04:25
그리기 : 프레임과 그룹의 차이 알아보기
05:36
[예제 실습] 프레임과 그룹을 적용했을 때의 차이점 체험하기
03:16
그리기 : 이미지 넣기
03:54
그리기 : 레이아웃 그리드 개념이해
05:44
그리기 : 불리언 연산하기
03:35
속성 설정 : Constraints 이해하기
04:13
[예제 실습] 자주 사용하는 아이콘 만들기 - 알림, 설정
16:09
아이콘 마무리 : outline stroke과 flatten
07:31
속성 설정 : 텍스트 입력하고 속성 설정해보기
03:28
속성 설정 : Auto Layout 이해하기
07:36
속성 설정 : Fixed, Hug, Filled?
05:23
속성 설정 : Auto Layout, Constraints 어떤 때 쓰는 건가요?
03:05
[예제 실습] Auto Layout + Constraints로 테이블 만들기
09:21
[예제 실습] 프레임과 그룹에 Constraints, AutoLayout 적용했을 때의 차이점 체험하기
11:03
[예제 실습] 기본 기능 활용한 채팅 UI만들기
21:47
채팅 UI에 추가 속성 설정하기
06:19
캔버스에서 내가 작업한 요소를 찾는 방법
02:46
피그마 파일의 커버 만들고 배포하기
03:18
커뮤니티에 내 피그마 파일 공개하기
02:36
섹션 3. 컴포넌트 이해와 활용
6 강
∙ 35분
컴포넌트의 개념 이해하기
미리보기
04:04
컴포넌트의 마스터, 인스턴스란 무엇인가요?
04:12
컴포넌트를 만드는 방법
05:57
[예제실습] 와이어프레임 컴포넌트 만들기
06:42
[예제 실습] 와이어프레임 컴포넌트로 UI그려보기
06:26
컴포넌트 세부 속성 생성하기 - create property
07:51
섹션 4. 플러그인 사용하기
3 강
∙ 8분
빠르게 이미지 넣기 - Unsplash
02:28
머테리얼 아이콘 넣기 - Material Design Icons
02:23
디자인한 화면의 순서와 연결 보여주기 - Autoflow
03:32
섹션 5. 컴포넌트 파고들기
14 강
∙ 1시간 40분
타이포 정의하고 텍스트 스타일 등록하기
10:21
컬러 팔레트 1 - 컬러 스타일 등록하기
05:50
컬러 팔레트 2 - 시맨틱 컬러와 컬러 베리어블개념 이해
08:08
컬러 팔레트 3 - 컬러 베리어블과 스타일의 차이
02:14
[예제 실습] color variables 컬러 고유값 팔레트 만들기
11:36
[예제 실습] color variables 시맨틱 컬러로 2차 변수 만들기
08:03
[예제 실습] 컬러 테마 만들기 1 - value set 추가하고 dark/light 테마 만들기
04:45
[예제 실습] 컬러 테마 만들기 2 - UI에 컬러 베리어블 적용하기
03:32
[예제 실습] 컬러 테마 만들기 3 - UI에 컬러 테마 적용하기
02:10
컴포넌트를 결합하는 variants 이해하기
08:19
로컬이냐, 다른 파일과의 연결이냐 : 컴포넌트 라이브러리의 개념 이해
04:26
[예제 실습] 버튼 컴포넌트의 variants 만들기
25:43
[예제 실습] Component Library 만들고 디자인 파일과 연결하기
02:59
Component Library 사용하고 동기화하기
02:36
섹션 6. 피그마의 프로토타이핑
6 강
∙ 25분
프로토타이핑이란 무엇인가
02:13
피그마의 프로토타이핑 방식 이해하기 - Trigger
01:54
피그마의 프로토타이핑 방식 이해하기 - Interaction
03:50
[예제 실습] 프레임의 클립 사용하여 스크롤되는 페이지 만들기
04:41
[예제 실습] 트리거와 인터랙션으로 화면 연결 체험하기 - 채팅UI 프로토타이핑
06:08
[예제 실습] set variable, conditional - 변수를 이용한 버튼 만들기
06:22
섹션 7. 협업하기
6 강
∙ 17분
디자인 화면에 코멘트 달고 멘션 걸기
02:24
구성원에게 공유할 리소스 export하기
04:15
피그잼에서 신나는 협업 하기
02:09
[예제 실습] 디자인 파일의 이전 버전과 비교하기
02:21
개발자를 위한 플러그인 - Figma for vscode
02:51
핸드오프를 위해 디자이너가 지키면 좋을 것들
03:10
섹션 8. 마무리
1 강
∙ 1분
가장 좋은 공부방법 docs. 고생하셨습니다
01:04
강의 게시일 : 2024년 01월 25일
(마지막 업데이트일 : 2024년 01월 25일)
수강평
총 55개
수강생분들이 직접 작성하신 수강평입니다.
4.8
55개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
꼼꼼한 강의,
입문자에게 최고의 강의
유튜브에서 산발적으로 흩어진 영상만 보다 너무 헷갈려서 강의 신청하게 되었는데 기본기를 잘 다질수 있는 강의 구성이 너무 좋아요. 이제 피그마가 어떤툴인지 감이 잡히네요. 실제 작업하면서 응용하는데 도움이 되었습니다
2024-02-15
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!