[CCFM 채용 패키지 2기] 3일차(3/27) 블로그

 

📌 피그마 활용 가이드

---

🎨 피그마란?

현업에서 피그마를 많이 사용하는 이유:

• 기존 이미지 툴(포토샵, 일러스트)은 파일 공유에 어려움이 있음
• 📌 피그마는 자동 저장, 링크 공유 기능 덕분에 협업이 용이함
• 플러그인을 활용하여 디자인 소스 및 편의 기능 추가 가능

---

🛠️ 피그마의 주요 구성 요소

🔲 프레임

• 작업의 울타리를 설정하는 요소
• 어플, 웹 작업 시 규격을 맞추는 데 필수

🗂️ 섹션

• 많은 프레임이 있을 경우 그룹화하여 보기 쉽게 정리

✂️ 슬라이스

• 특정 영역만 Export 하고 싶을 때 사용

🔺 도형

• 네모, 원, 삼각형 등 기본 도형 생성
• Shift를 누르고 크기 조절 시 비율 유지

➖ 선

• 선 및 화살표 생성 도구
• Shift를 누르고 조절 시 직선으로 생성 가능

✏️ 연필

• 자유롭게 그림을 그릴 수 있는 도구 (브러쉬)

🖊️ 펜툴

• 벡터 작업에 활용되는 도구
• 곡선 등 정교한 디자인 작업 가능

🔌 플러그인

• 프로젝트에 적용된 플러그인 확인 및 설정 가능
• 피그마 웹앱 기준 지구본 모양 클릭 시 스토어 진입 가능

---

🔧 피그마의 대표 기능

🏗️ 오토 레이아웃 (Shift + A)

• 자동 레이아웃 정렬 및 간격 조절 가능
• 사각형 위치 고정 및 크기 조절 가능
• 프레임 내 요소 변경 시 유연하게 대응 가능

🏷️ 컴포넌트

• UI/UX에서 공용 버튼, 아이콘 등 반복 요소에 적용
• 한 번 변경하면 모든 복사본에 자동 반영

🔄 베리언츠

• 컴포넌트의 확장 기능
• 여러 컴포넌트를 묶어 패널을 통해 교체 가능
• UI/UX에서 버튼 애니메이션(default/hover 등)에 활용

---

⌨️ 자주 사용되는 단축키 정리

• 📌 생성 변경
  • V : Move
  • F : Frame
  • P : Pen
  • T : Text
• ⚙️ 각종 편의 기능
  • Ctrl + Shift + E : Export
  • Ctrl + ] : 레이어 한 칸 앞으로 가져오기
  • ] : 가장 앞으로 가져오기

---

🔥 유용한 플러그인 모음

🖼️ Remove BG

• 이미지의 배경을 제거하는 플러그인
• 복잡한 이미지는 정확도가 떨어질 수 있음

🔍 Iconify

• 다양한 아이콘 모음 제공 (저작권 걱정 없음)
• 아이콘 검색 시 영어로 검색 필수

🏞️ Unsplash

• UI 가이드용 고품질 예시 이미지 제공
• 사각형 이미지 위주

📝 Content Reel

• 이미지뿐만 아니라 텍스트 등 다양한 예시 콘텐츠 제공

---