📕

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

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

PDF 파일

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

[2주차 수업 Title]

피그마 핵심 기능으로 작업 효율 2배 높이기

[수업 목표]

•

크기에 따라 유연하게 반응하는 오토레이아웃을 활용해 콘텐츠를 만들 수 있습니다.

•

피그마의 핵심기능인 컴포넌트를 알아보고 활용할 수 있습니다.

•

컴포넌트와 인스턴트의 차이를 이해하고 재사용 되는 공통 요소들을 쉽게 관리할 수 있습니다.

[목차]

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

오토레이아웃 (auto layout)의 원리를 알아보고, 실습을 통해 해당 기능을 마스터합시다.

1) 오토레이아웃이란? (오토레이아웃 예제 활용)

2) 오토레이아웃은 언제 사용되나요?

3) 오토레이아웃 생성 및 해제 방법

4) 오토레이아웃을 조절하는 방법

5) 오토레이아웃 만들 때 알아두면 유용한 꿀팁

6) 오토레이아웃 실습 예제

오토레이아웃 (auto layout)을 이용해서 글자 박스가 글자의 양에 따라 자동으로 늘어나게 만드는 방법에 대해 알아 봅시다.

1) 오토레이아웃으로 글자가 자동으로 늘어나는 버튼 만들기

2) 오토레이아웃을 활용해서 아이콘이 추가된 버튼 만들기

3) 나이키 화면 오토레이아웃으로 만들기

오토레이아웃 (auto layout)을 이용해서 브레인스토밍 템플릿을 제작해 봅시다.

1) 디지털 Brainstorming 예시

2) 오토레이아웃 기능을 이용한 디지털 브레인스토밍 실습 예제

오토레이아웃 리사이징 원리를 알아보고 리사이징 기능을 활용해서 체크리스트를 만들어 봅시다.

1) 콘텐츠와 컨테이너의 관계

2) 오토레이아웃 리사이징이란?

3) 오토레이아웃 리사이징 실습 예제 01

4) 오토레이아웃 리사이징 속성

5) 오토레이아웃 리사이징 실습 예제 02

6) 오토레이아웃 리사이징 기능을 활용한 체크리스트 만들기

컴포넌트와 인스턴스에 대해서 이해해보고, 실습 예제를 통해 컴포넌트와 인스턴스를 만드는 방법과 연결 해제하는 방법을 익힙시다.

1) 컴포넌트와 인스턴스란?

2) 컴포넌트를 사용해야 하는 이유

3) 피피티 템플릿을 컴포넌트로 만들고 수정해보기

4) 문서 컴포넌트 예시

5) 컴포넌트와 인스턴스를 만드는 방법

6) 르탄이 자료를 컴포넌트로 만들어보고 해제하기

컴포넌트와 인스턴스의 차이에 대해 완벽하게 이해해 봅시다.

1) 컴포넌트와 인스턴스의 차이

2) 컴포넌트와 인스턴스의 차이를 쉽게 알려주는 버튼 만들기 실습 예제

3) 컴포넌트와 인스턴스 관련 소소한 꿀팁

컴포넌트 베리언츠 기능을 이해하고, 해당 기능을 활용해서 체크리스트를 만들어 봅시다.

1) 컴포넌트 베리언츠란?

2) 컴포넌트 베리언츠를 활용해서 체크리스트 만들기

3) 컴포넌트 베리언츠 명확하게 이해하기

오토레이아웃 사용법으로 자기만의 강점 형용사 5개 버튼 만들어보기(색상과 도형의 크기, 모양은 자유롭게 구성해도 좋습니다!)

숙제 예시

전체 강의자료 보기

다음 주차