피그마 기초

1. 레퍼런스 수집
비핸스, 핀터레스트, 드리블 등에서 스타일 참고
원하는 분위기와 UI 방향 정리
컬러, 레이아웃, 폰트 스타일 분석

주요 사이트

Behance
Dribbble
Pinterest
2. 기획 정리

작업 전에 기본 구조 정리

정리할 내용

주제
타겟
컨셉
컬러 방향
사용 목적
화면 구성

예시

게임 소개 웹사이트
카페 브랜드 앱
전시 홍보 페이지
3. 와이어프레임 제작

디자인 전 구조를 먼저 배치

구성 예시

헤더
메인 비주얼
컨텐츠 영역
버튼 위치
푸터

처음에는 흑백 박스 형태로 단순하게 제작

실무에서도 가장 중요한 단계 중 하나

4. 프레임 생성

디바이스 기준 프레임 제작

예시

Desktop : 1440px
Tablet : 768px
Mobile : 390px

프레임 이름 정리

Main_PC
Main_Tablet
Main_Mobile
5. 그리드 시스템 설정

레이아웃 기준선 제작

일반적인 기준

PC : 12컬럼
Tablet : 8컬럼
Mobile : 4컬럼

설정 요소

Margin
Gutter
Column
6. 스타일 가이드 제작

먼저 디자인 기준을 정리

정리 요소

메인 컬러
서브 컬러
폰트
버튼 스타일
그림자
Radius

실무에서는 가장 먼저 만드는 경우 많음

7. 메인 UI 디자인

본격적인 화면 디자인 진행

작업 순서 추천

레이아웃
이미지
텍스트
버튼
디테일 효과

중요 포인트

여백 유지
정렬 통일
컬러 과다 사용 금지
8. Auto Layout 적용

반응형 구조 제작

적용 영역

버튼
카드
메뉴
리스트

실무에서 거의 필수

단축키

Shift + A
9. 컴포넌트 정리

반복 요소를 컴포넌트화

예시

버튼
카드
네비게이션
아이콘

수정 관리가 매우 편해짐

단축키

Ctrl + Alt + K
10. 프로토타입 연결

화면 이동 및 인터랙션 제작

예시

버튼 클릭 이동
메뉴 오픈
화면 전환

포트폴리오 퀄리티가 크게 올라감

11. 목업 제작

실제 화면처럼 표현

예시

모바일 목업
모니터 목업
태블릿 목업

플러그인 활용 가능

12. 최종 정리 및 내보내기

최종 파일 정리

정리 내용

레이어 이름 정리
프레임 정리
사용하지 않는 요소 삭제
Export 설정 확인

내보내기 형식

PNG
JPG
PDF
추천 실무 작업 흐름

레퍼런스 수집
→ 기획 정리
→ 와이어프레임
→ 프레임 생성
→ 그리드 설정
→ 스타일 가이드 제작
→ UI 디자인
→ 오토레이아웃 적용
→ 컴포넌트 정리
→ 프로토타입 연결
→ 목업 제작
→ 최종 정리

포트폴리오 제작 시 가장 중요한 점
디자인보다 정리가 더 중요
프레임 이름 정리 필수
여백과 정렬 통일
컬러 사용 최소화
반응형 구조 고려
실제 서비스처럼 구성하기