Thumbnail
여름 할인 중(D-3)
BEST 크리에이티브 UX/UI
UX/UI 시작하기 : Figma 입문(Inflearn Original)
(4.8)
65개의 수강평 ∙ 16575명의 수강생

30%

38,500원

55,000원
지식공유자 : 인프런
총 55개 수업˙총 7시간 33분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
내 목록 추가 1128 공유
초급자를 위해 준비한
[UX/UI, 디자인 도구] 강의입니다.

UI 디자인 스케치, 프로토타이핑 및 협업을 위한 디자인 도구 Figma(피그마)의 기본적인 사용법과 실무 활용법에 대해 학습해 봅니다.

✍️
이런 걸
배워요!
Figma 기초 사용법
Figma 활용

세계가 주목하는 UX/UI 디자인 툴, 
요즘 대세는 Figma(피그마)! 📐

 UXtools.co 선정 2021년 가장 기대되는 디자인 툴, Figma

출처: UXtools.co, 2020 Design Tools Survey (링크)

UX 디자이너, 프로덕트 디자이너 등 미국 디자이너의 1/4 정도가 참여한 UXtools 서베이가 발표되었습니다. 주목할 만한 점은 단연 Figma(피그마)의 성장세입니다. Figma는 브레인스토밍 분야에서 Miro의 뒤를 바짝 뒤쫓고 있으며 그밖에 사이트맵, 인터페이스 디자인, UI 프로토타이핑, 핸드오프(가이드 라인), 디자인 시스템 관리 등에서 1위를 차지했습니다. 특히 2021년 주목할 만한 툴에서 압도적인 1위를 거두는 성과를 기록했는데요, 그렇다면 어떤 점이 Figma를 매력적인 디자인 툴로 만들었을까요?


왜 피그마일까요?

 협업의 최강자!

Figma의 가장 큰 특징은 '실시간 협업'입니다. 웹/앱의 디자인이 나오기까지는 다음의 프로세스를 거칩니다.

디자인을 위한 과정은 복잡합니다. 디자이너뿐만 아니라 기획자, 개발자까지 모두가 함께 참여해야 하며 소통을 거치면서 최초 시안과는 많은 부분이 변경될 수도 있죠. 하나의 프로젝트에 여러 명의 디자이너가 참여하는 경우도 빈번합니다. 그렇기 때문에 디자인 과정에서 협업은 매우 중요한 포인트입니다.

계정만 있다면 언제 어디서나 UIUX 디자인 툴 Figma를 사용할 수 있습니다.

협업에 있어서 Figma는 탁월한 유연성과 생산성을 발휘하는 툴입니다. 바로 웹 브라우저 기반의 프로그램이기 때문이죠. 일반 디자인 툴은 프로그램을 다운 받아 사용하는 반면, Figma는 브라우저에 접속하여 사용합니다. 인터넷이 접속 가능한 공간이라면 데스크톱 앱을 다운할 필요 없이 언제 어디서든 Figma에 접속이 가능합니다. 클라우드 기반의 프로그램이라 저장 공간이 별도로 필요하지 않다는 것도 큰 장점입니다. 실시간으로 화면을 공유할 수 있고, 버전 관리 또한 편리한 만큼 협업을 위한 최적의 환경을 제공해 줍니다.


기본과 실전을 한번에.


순서대로 학습해보세요!

피그마, 어떻게 사용할까요?
Figma 계정을 생성하는 방법부터 작업 환경을 설정하는 방법을 알아봅니다. 캔버스와 페이지를 이해하고, 기본적인 인터페이스와 기능을 배울 수 있어요.
피그마의 핵심은 컴포넌트!
피그마는 컴포넌트 기반의 프로토타이핑 툴입니다. 소스를 컴포넌트함으로써 마스터 소스를 언제든지 편리하게 불러와 사용할 수 있죠. 컴포넌트 개념을 이해하고 실습을 통해 배운 내용을 마음껏 활용해 보세요.
인터페이스 설계도 OK.
Iconify, Auto Flow, Auto Layout 플러그인을 통해 인터페이스를 설계하는 방법을 이해해 봅니다. 실습을 통해 배운 내용을 차근차근 활용할 수 있어요.
일관적인 톤으로 가꿔보세요.
서비스 UI를 디자인할 때는 반복해서 사용하는 색상이나 텍스트가 있기 마련이죠. 일관성 있게 UI를 디자인할 수 있도록 반복적으로 사용하는 요소를 스타일 가이드로 만들고, 적용해 봅니다.
일잘러를 위한 프로토타이핑.
피그마의 프로토타이핑 방식을 이해하고, 어떤 구성 요소가 있는지를 이해합니다. 커뮤니케이션 효율을 높이고 생산성있게 작업하는 방법을 익혀보세요!
협업을 더 쉽고 똑똑하게.
디자인 화면에서 코멘트를 바로 달아 공유하는 방법, 디자인 파일 버전 관리, 공유하기, 내보내기 등 협업을 위한 피그마의 여러 기능을 알아봅니다.

이런 분들 주목하세요!

프로토타이핑?

처음 프로토타이핑 툴
학습하는 분

피그마?

Figma를 배우고 싶은
UX/UI 디자이너

팀플레이

협업 효율을 올리고픈 
프로덕트 팀원 

무한 백업 중...

버전 관리까지 편한 
올인원 툴을 찾는 분


UX/UI 입문
인프런과 함께 도전해봐요.

인프런 오리지널 UX/UI 로드맵 보러가기 ✨

수강 전 확인해주세요!

  • 본 강의는 수업 내용에 대한 질의응답을 제공하지 않는 강의입니다. 학습에 참고해주시기 바랍니다.
지식공유자가 알려주는
강의 수강 꿀팁!
🎓
이런 분들께
추천드려요!
Figma를 처음 접하는 사람
조직에서 Figma를 사용하는 PM
📚
선수 지식,
필요한가요?
UX/UI 디자인 프로세스에 대한 기본적인 이해

안녕하세요
인프런 입니다.
인프런의 썸네일

배움의 기회는 경제적, 물리적 한계에서 자유로워야 한다고 생각합니다.

우리는 성장기회의 평등을 추구합니다.

커리큘럼 총 55 개 ˙ 7시간 33분의 수업
이 강의는 영상, 수업 노트가 제공됩니다. 미리보기를 통해 콘텐츠를 확인해보세요.
섹션 1. 피그마 작업환경 세팅하기
계정 생성과 로그인 미리보기 02:21 피그마 데스크탑 앱 설치하기 미리보기 02:22
미러앱 설치하고 화면 미러링 해 보기 02:43
웹에서 실시간 프리뷰 준비하기 02:16
피그마 사용시 주의사항 03:02
섹션 2. 피그마 시작하기
팀+프로젝트+파일 생성하고 플랜선택하기 미리보기 06:34 피그마의 Draft 활용하기 미리보기 02:11
팀원 초대하고 권한 설정하기 06:56
커뮤니티(BETA) 활용하기 06:49
피그마에 파일 불러오기(sketch, image) 03:08
섹션 3. 인터페이스 살펴보기
Figma Web vs Figma desktop app 의 인터페이스 차이 미리보기 03:40 캔버스와 페이지 미리보기 07:02
왼쪽 패널 소개 - Layer Panel 06:40
왼쪽 패널 소개 - Asset Panel 03:43
에디터만 볼 수 있는 상단 툴바 살펴보기 07:53
선택 요소에 따라 메뉴가 바뀌는 상단 Contextual Tool 05:25
상단 오른쪽 - 공유하기 살펴보기 05:39
오른쪽 패널 살펴보기 - Design / Prototype / Inspect 04:18
단축키 패널 실행하고 빠른 작업에 익숙해지기 02:43
섹션 4. 기본 기능 이해와 활용
프레임과 그룹의 차이 알아보기 미리보기 04:12
카드 UI 그리고 shape 속성 조절하기 10:11
Text 입력하고 속성 조절하기 17:10
호 기능 사용하여 원형 그래프 만들기 15:58
다양한 방법으로 이미지와 텍스트 넣기_갤러리UI 11:08
불리언 연산으로 날씨 아이콘 만들기 28:32
Outline stroke과 flatten 으로 아이콘 마무리하기 06:20
프레임의 클립 사용하여 긴 페이지 스크롤하기 09:29
섹션 5. 컴포넌트 이해와 활용
컴포넌트의 원리와 마스터, 인스턴스 이해하기 미리보기 12:40
와이어프레임 컴포넌트 만들기 16:30
컴포넌트를 결합하는 variants 이해하기 05:03
예제실습(1) - 스위치 체크박스 라디오버튼 컴포넌트 variants 13:51
예제실습(2) 텍스트필드 컴포넌트 variants 10:15
섹션 6. 인터페이스 설계하기
와이어프레임에 빠르게 아이콘 넣기 - iconify 플러그인 04:51
와이어프레임 플로우를 연결하는 autoflow 플러그인 사용하기 04:27
Auto Layout 이해하기 05:28
Constraints & Resizing 이해하기 07:54
예제실습(1) 로그인 화면 반응형 레이아웃 만들기 32:04
예제실습(2) 뮤직 플레이어 모바일, 태블릿버전 세트 만들기 22:48
예제실습(3) auto layout을 이용한 채팅화면 만들기 21:16
섹션 7. 스타일가이드 만들기
컬러 팔레트 만들고 수정하기 10:44
타이포정의하고 텍스트 스타일 등록하기 14:07
레이아웃 그리드 등록과 수정 10:28
스타일가이드 적용하기 10:16
섹션 8. 프로토타입으로 커뮤니케이션하기
피그마의 프로토타이핑 방식 이해하기 05:06
프로토타이핑실습 (1) 화면 연결하고 모션 구현하기 07:40
프로토타이핑실습 (2) Open Overlay로 모달팝업 띄우기 05:34
프로토타이핑실습 (3) scroll to로 대화내용 검색 결과 만들어보기 07:23
섹션 9. 협업하기
Team Library 사용하고 동기화하기 08:44
디자인 화면에 코멘트 달고 공유하기 04:50
피그마로 디자인 파일 버전관리 하기 03:37
피그마 파일의 커버 썸네일 만들고 링크 공유하기 03:57
협업 구성원에게 공유할 리소스 export하기 06:17
섹션 10. 마무리
강의마무리 01:18
강의 게시일 : 2021년 02월 26일 (마지막 업데이트일 : 2021년 02월 10일)
수강평 총 65개
수강생분들이 직접 작성하신 수강평입니다. 수강평을 작성 시 300잎이 적립됩니다.
4.8
65개의 수강평
5점
4점
3점
2점
1점
VIEW 좋아요 순 최신 순 높은 평점 순 낮은 평점 순 평점 순 높은 평점 순 낮은 평점 순
Seungil_Kim thumbnail
UX/UI에 대한 기초 지식을 가져가면서도, 실습이 틈틈이 구성되어 있어서 좋았습니다. 말 그대로 피그마에 입문하시는 분들을 위해 최적화된 강의이기 때문에, 처음 배우시는 분들에게 강력 추천드리고 싶습니다.
2021-03-25
지혜 박 thumbnail
강사님 강의 정말 너무 좋아요 :) 모든 내용을 쉽고 간결하고 명확하게 설명해주셔서 한번에 이해가 되요! 완강때까지 쭉쭉 들어보려합니다. 좋은 강의 만들어주셔서 감사합니다!
2021-03-28
김도영 thumbnail
진짜 필요한 강의인거 같아요 너무 너무 도움이 됐어요
2021-04-22
마리오 thumbnail
디자이너 분들이나 디자인에 익숙하신 분들은 컴포넌트 부분으로 바로 넘어가시는게 좋을 것 같습니다. 아주 상세하고 좋은 강의입니다.
2021-04-02
박은경 thumbnail
피그마에 대해 관심이 생겨 듣게 되었는데 기본기부터 다지기 정말 좋은 강의네요. 부분적으로 세세하게 잘 설명 잘 해주세요. 만족합니다. 피그마 정말 신세계 프로그램이네요.. 남의 강의도 잘 들을께요. 감사합니다. : )
2021-05-20
여름 할인 중(D-3)

30%

38,500원

55,000원
내 목록 추가 1128 공유
지식공유자 : 인프런
총 55개 수업˙총 7시간 33분
평생 무제한 수강
수료증 발급 강의
입문 초급 대상 중급이상
연관 로드맵
이 강의가 포함된 잘 짜여진 로드맵을 따라 학습해 보세요!
지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의를
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스