📕

[스파르타 코딩클럽] PPT보다 쉬운 피그마 - 1주차

매 주차 강의자료 시작에 PDF파일을 올려두었어요!

PDF 파일

피그마 강의자료+실습예제 (피그마 파일)

[수업 목표]

•

피그마 인터페이스에 대해 알아보고 기본 도구들을 익힙니다.

•

피그마의 플러그인과 커뮤니티를 알아보고 활용할 수 있게 됩니다.

•

자주 사용하는 텍스트와 컬러 스타일을 지정해두고 사용하는 방법에 대해 배울 수 있습니다.

[목차]

모든 토글을 열고 닫는 단축키 Windows : Ctrl + alt + t Mac : ⌘ + ⌥ + t

0) 피그마 간단 소개

1) 환영합니다!

2) 피그마 무료 계정 만들기

피그마 데스크앱을 함께 설치해보고 꼭 필요한 인터페이스 및 간단한 단축키를 익혀봅시다.

1) 웹브라우저에서 피그마 시작하기

2) 피그마 기본 단축키 (맥과 윈도우의 차이)

3) 피그마 인터페이스

피그마 본격 시작 전 꿀팁을 알아봅니다!

1) 피그마 시작 전에 꼭 알아야 하는 6가지 꿀팁

2) 피그마에서 개체 복사하는 방법 3가지 꿀팁

3) 원하는 개체만 선택하는 방법 2가지 꿀팁

도형 툴을 완벽하게 알아보고 도형에 색깔을 입혀봅시다!

1) 기본 도형 따라 그리기, 도형 정렬하는 방법, Boolean Groups

2) 만든 기본 도형에 색상 입히기

피그마 커뮤니티와 플러그인을 활용해 봅시다.

1) 피그마 커뮤니티란?

2) 플러그인이란?

3) 피그마 플러그인으로 머터리얼 디자인 아이콘 가져오기

스파르타 앱 화면에 보이는 텍스트 스타일과 컬러 스타일을 지정해 봅시다.

1) Text 입력하고 수정하는 방법

2) Color 변경하는 방법

3) 스타일 지정이란?

4) 자주 사용하는 Text Style 지정하기

5) 자주 사용하는 Color Style 지정하기

6) 자주 사용하는 그림자 효과

이미지를 내보내는 방법을 알아보고, 이 과정에서 흔히 하는 실수를 예방해 봅시다.

1) 이미지(소스) 가져오는 방법

2) 이미지(소스) 내보내는 방법

3) 프레임 추출 시 프레임에 요소가 속해있는지 알아보는 꿀팁!

4) 이미지와 텍스트 사이즈 같이 늘리는 방법

플러그인 Unsplash를 사용해서 이미지에 클리핑 마스크를 입혀봅시다.

1) 이미지에 클리핑 마스크를 하는 방법

2) 클리핑 마스크를 해제하는 방법

3) 플러그인 Unsplash를 활용해서 가져온 이미지 소스에 클리핑 마스크를 입히기

프레임, 그룹, 섹션에 대한 정의를 명확하게 이해해 봅시다.

1) 그룹을 만들고 해제하는 방법

2) 프레임이란?

3) 섹션이란?

4) 그룹, 프레임, 섹션 간단하게 이해하기

5) 프레임과 그룹의 차이

6) Clip Content란?

플러그인 Flow Chart를 사용해서 유저 플로우를 그려 봅시다.

1) Flow Chart (플로우 차트)란?

2) 플러그인 Flow Chart를 이용해서 플로우 쉽게 만들기

블로그에 피그마 플러그인 활용한 유저 플로우 그리는 방법 총정리

해설과 똑같이 따라하지 마세요!! 해설은 참고일 뿐입니다 : )

숙제 예시

전체 강의자료 보기

다음 주차