피그마 기초

Part1. 아이콘 기능
이동, 선택, 텍스트, 도형 등 기본 툴을 활용해 UI 구성
상단 툴바와 좌측 패널을 중심으로 작업 진행
대부분의 작업은 프레임 기반으로 진행
Part2. 그룹 / 프레임 / 섹션
그룹 (Group)
여러 오브젝트를 하나로 묶는 기능
포토샵, 일러스트와 동일 개념
크기 조절 시 내부 요소(텍스트 등)가 밀릴 수 있음

단축키

Ctrl + G : 그룹 생성
프레임 (Frame)
아트보드 역할 (작업 영역)
UI 디자인의 기본 단위
크기 변경 시 내부 요소가 자동으로 정렬됨
반응형 작업에 유리함

실무에서는 그룹보다 프레임을 주로 사용

단축키

Ctrl + Alt + G : 프레임 생성
섹션 (Section)
여러 프레임을 묶는 상위 구조
페이지를 구역별로 나눌 때 사용
협업 및 작업 정리에 중요함
추가 내용
모든 작업은 프레임 기준으로 진행
프레임에 이름을 지정하여 관리
프레임을 밖으로 빼서 미리보기 가능
아이폰 기준 UI 제작 시 구형 기준 사이즈 활용
Part3. 그리드 시스템
기본 개념
UI 정렬을 위한 기준선 시스템
요소 배치의 일관성을 유지
구성 요소
컬럼 (Column)
마진 (Margin)
거터 (Gutter)

장비마다 값이 다르므로 디바이스에 맞게 설정 필요

단축키
Shift + G : 그리드 표시
Shift + R : 가이드 표시
작업 방식
먼저 컨텐츠 크기 설정
그리드 기준으로 위치 배치
가이드를 활용해 정밀 정렬
Part4. 컨텐츠 UI 디자인 예제
실제 앱 및 웹 화면을 참고하여 제작
레이아웃 → 텍스트 → 이미지 순서로 구성
반복 작업은 컴포넌트 활용
Part5. 플러그인
이미지 삽입, 아이콘, 목업 등 자동화 기능 제공
작업 속도를 높일 수 있음

대표 기능

이미지 자동 삽입
아이콘 라이브러리
UI 키트 사용
Part6. 스타일 가이드
색상, 폰트, 버튼 스타일 등을 미리 정의
디자인 일관성 유지
협업 시 필수 요소
Part7. Auto Layout
반응형 UI 제작의 핵심 기능
요소 간 간격과 정렬을 자동 조정

프레임 + 오토레이아웃 조합을 실무에서 많이 사용

핵심 정리
그룹보다 프레임 사용
오토레이아웃 활용
그리드 기반 작업
스타일 가이드로 통일성 유지
플러그인으로 작업 효율 향상