[새싹X러닝스푼즈] IT 서비스 기획자 취업캠프 4기 - 피그마 Figma 강의 후기1 (2주차)

 

안녕하세요. 호이진입니다. 

블로그를 작성하다 보면 과거와 현재를 왔다갔다한다는 느낌이 듭니다. 

얼른 과거를 현재로 데려와야겠어요!!

 

오늘은 8월 둘째주로 돌아가서 피그마 세상으로 빠져보겠습니다.

 

피그마 강의는 각 강의별로 3시간씩, 7번 (총 21시간)에 걸쳐 들었습니다.

새롭게 배운 기능들이 많아서 어려웠지만 재미있었어요!

피그마 디자인 툴은 배워두면 무엇을 하든지 활용할 수 있다는 생각을 해서 열심히 배웠던 것 같습니다.

 

정리할 것들이 정말 많아서 나눠서 올려야 될 것 같아요!

 

우선, 목차는 다음과 같습니다.

 

[1교시] 피그마 활용 기초

1. 피그마 설치 및 폰트 다운

       1-1 기본 활용법/단축키 및 상세 기능 활용법

       1-2 아이콘 만들기

 

[2교시] 피그마 오토레이아웃 & 플러그인

1. 피그마 오토레이아웃 설정
2. 피그마 플러그인 활용법

[3~4교시] 컴포넌트 & 베리언트 & 구글 스프레드시트 피그마 연동

1. Variants 활용법

       1-1. 토글만들기

       1-2. 버튼 베리언츠 세트 만들기

 

    2. 쇼핑몰 카드 만들기 및 구글 스프레드 시트와 연동하는 법

 

[5교시] 프로토타입 만들기

1. 프로토타입 만들기 

        1-1. On click

        1-2. On drag

        1-3. While hovering / Pressing

        1-4. Key / Gamepad

        1-5. Mouse Enter & Leave

        1-6. Mouse Down & Up, After Delay

        1-7. 툴팁

 

[6교시] 쇼핑몰 만들기

 

    오토레이아웃을 이용해서 쇼핑몰 디자인을 해보았어요.

 

[7교시] 컴포넌트 & 베리언트 연습

 

    오토레이아웃을 이용해서 디자인을 해보고,

    컴포넌트와 베리언트로 요소들을 교체시킬 수 있도록 만드는 연습을 했어요.

---

 

 

[1교시] 피그마 활용 기초

1. 피그마 설치 및 폰트 다운

       

       

 

                  1-1 기본 활용법/단축키 및 상세 기능 활용법

 

 

상세 도구 위치

 

 

Page, Design, Layer 색상 변경

     

 

       

Fill, Fill-Custom

 

Stroke, Effects, Export

Move, Scale 차이 / Frame 위치값 지정 - Constraint로

 

Section 기능, Slice

 

 

 

도형 그리기, 도형 여백 없애기 / 코멘트

 

겹친 도형 순서 변경하는 방법, 속성 복사 등등 기타 툴 관련 정보

 

 

                       1-2 아이콘 만들기

  

 

 

---

 

생각보다 정리할 것들이 많았네요.

피그마 툴 관련해서는 새롭게 배운 것들이 많았기 때문에,

  이렇게 정리하면서 다시 한 번 더 기억할 수 있게 되는 것 같습니다.