33,000원
입문자를 위해 준비한
[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일)
수강평
총 40개
수강생분들이 직접 작성하신 수강평입니다.
4.9
40개의 수강평
5점
4점
3점
2점
1점
VIEW
추천 순
최신 순
높은 평점 순
낮은 평점 순
평점 순
높은 평점 순
낮은 평점 순
기초부터 세세한 옵션까지 매우 유용한 강의였습니다. 기본 피그마를 활용하는 모든 것을 배울 수 있었습니다.
심화강의도 만들어 주시길 기대합니다.
2024-02-06
하나하나 사용하면서 디테일하게 기능을 익혀나갈 수 있어서 좋네요.
설명이 쉽고, 체계적인 것 같습니다.
개발하다가 퍼블리싱까지 하면서 피그마에 관심이 생겨서 듣게 되었는데, 최신 기능까지 꼼꼼하게 알려주는게 참 좋네요.
2024-02-17
꼼꼼한 강의,
입문자에게 최고의 강의
유튜브에서 산발적으로 흩어진 영상만 보다 너무 헷갈려서 강의 신청하게 되었는데 기본기를 잘 다질수 있는 강의 구성이 너무 좋아요. 이제 피그마가 어떤툴인지 감이 잡히네요. 실제 작업하면서 응용하는데 도움이 되었습니다
2024-02-15
이거 하나면 든든
2024-01-29
2D 디자인 툴에 어느 정도 익숙하지만, 초보자가 배우기에도 적절할 것으로 생각됩니다!
2024-01-31
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
