⬥ 비전공자도 가능한 UI디자인, 실무 디자이너에게 배우는 피그마

⬥ 필요한 프로그램은 무엇인가요?

⬥ 클래스 추천 대상

⬥ 클래스만의 특별함

피그마 생소하신가요?

피그마는 최근 실무자들 사이에서 화제인 벡터기반 디자인 툴입니다. 모바일 앱과 웹을 디자인 하는 것에 최적화된 인터페이스로 구성되어있고, 사용자 테스트를 위한 프로토타이핑 까지간편하게 제작할 수 있어요.

피그마, 기초부터 탄탄하게

빠르게 변화하는 모바일 디자인 트렌드, 빠르게 디자인하면서 디테일을 놓치지 않는 것이 중요합니다. 피그마의 기본적인 내용을 잘 이해하고, 디자인 시스템을 만들어 가는 과정을 함께 배우고, 디자인 시스템을 효율적으로 관리하기 위한 입문과정을 함께해요.

피그마는 웹 기반의 디자인툴이고, 어떠한 OS를 사용하고 있던지 설치가 가능합니다. 포토샵이나 일러스트처럼 무겁고 복잡하지 않은 가벼운 디자인 툴로 이제 원하는 UI를 디자인해볼 수 있습니다.수업을 끝까지 듣고나면 간단한 화면 구성부터 움직이는 프로토타이핑 까지 제작할 수 있어요!

안녕하세요, 10년차 디자이너이자 유튜버 연남동이재용입니다.

저는 지난 10년간 대기업과 다양한 스타트업에서 기획과 디자인 업무를 하면서 디자인 툴 테크닉 유튜브 채널을 운영 중이에요. 경험과 노하우를 바탕으로 이번 클래스에서 웹과 모바일 어플리케이션 디자인을 위한 디자인 툴의 사용 방법과 노하우를 공유해드리고 있습니다.

⬥ 클래스 커리큘럼

1. 피그마 도대체 무엇인가?

포토샵, 일러스트는 잘 아는데 피그마? 모바일 디자인과 웹 디자인에 최적화된 브라우져 기반의 새로운 개념의 디자인 툴에 대해 알아볼 수 있어요.

2. 피그마의 인터페이스 소개

무엇이든 첫인상이 중요하죠. 피그마의 구석구석 무엇이 있는지 살펴보는 시간입니다. 숨어있는 기능까지 한번에!

3. 피그마의 프레임 이해하기

아트보드(대지)가 아니라 프레임? 정적인 이미지를 만드는 것은 이제 그만! 디자인하고나면 알아서 움직임을 만들어주는 프레임에 대해 배울 수 있어요.

4. 피그마의 기본 도형부터 알아보자!

간단해보이는 이 도형들로 무엇을 만들 수 있을까? 도형의 특성을 이해해야 활용하는 방법을 알 수 있습니다.

5. 아이콘 디자인과 네비게이션

도형의 특성을 활용한 아이콘 디자인부터 스타일 관리까지 한번에!

6. 피그마의 핵심 기능 컴포넌트 (01)

쉬워보이지만 막상 만들면 어려운 컴포넌트, 복잡해 보이는 구성을 쉽고 간단하게 .가이드를 만드는 것 부터 알려드립니다.

7. 피그마의 핵심 기능 컴포넌트 (02)

프레임의 이름을 수정하는 것 만으로도 쉽게 관리할 수 있는 컴포넌트간의 연관성을 갖게 만들고 폴더 구조로 디자인 에셋을 쉽게 관리할 수 있는 방법을 알려드립니다.

8. 피그마의 핵심 기능 컴포넌트 (03)

이미 만든 컴포넌트 상황에 맞게 알맞게 변형해서 사용하고 싶다? 하나의 컴포넌트로 12가지의 상황에 맞추어 대응할 수 있는 컴포넌트를 만들어봅니다.

9. UI디자인 실습 (01)

배운 내용을 토대로 컴포넌트 디자인과 UI디자인을 실습합니다.

10. UI디자인 실습 (02)

완성된 컴포넌트를 기반으로 카드 콘텐츠를 만들고 프로토타이핑을 위한 UI디자인을 완성해볼 수 있습니다.

11. 화면의 전환 ‘트렌지션’

매일 사용하는 앱에서 쓰고있는 화면전환 효과 어떻게 만들까요? 화면 전환 효과에 대한 모든것을 알아봅니다.

12. 프로토타이핑의 꽃 ‘스마트 애니메이트’

영상 제작은 할줄 모르는데 움직이는 화면을 만들고 싶으신가요? 스마트 애니메이트 기능으로 화면의 움직임을 만들 수 있습니다.

13. 프로토타이핑 오버레이

프로토타이핑 오버레이 기능에 대해 꼼꼼하게 알아보아요.

14. 프로토타이핑 스왑위드

프로토타이핑의 스왑위드가 어떤 기능인 지 함께 알아보아요.

15. 바르고 간편하게! 오토레이아웃

버튼을 만드는데 5초도 안걸린다고? 쉽고 빠르게 디자인을 도와주는 신박한 기능 ‘오토레이아웃’에 대해서 살펴봅니다.

16. 공유기능

만든 컴포넌트와 UI를 개발자와 쉽게 공유하는 방법과 팁을 배워 보아요.

그럼, 곧 강의에서 만나요