Today I Learned 19회차 - Figma 기초

오늘은 Figma의 기본 인터페이스와 핵심 개념들을 학습했습니다. 페이지, 섹션, 프레임, 레이어의 구조와 각 디자인 요소를 효율적으로 다루는 방법을 익혔어요!

🎯 학습 목표

• Figma를 사용하는 이유와 주요 기능 이해
• Design 화면의 인터페이스와 툴 파악
• 페이지, 섹션, 프레임, 레이어의 계층 구조 이해
• 기본 단축키와 작업 효율화 팁 습득

📚 학습 내용

1. Figma를 사용해야 하는 이유

이유	설명
시간 단축	불필요한 반복 작업을 줄이고 생산성 향상
효율적인 협업	실시간 공동 작업과 피드백 가능
완성도 높은 툴	전문적인 UI/UX 디자인 작업에 최적화

2. Figma의 주요 섹션

주요 기능 영역

섹션	설명
Community	각종 디자인 리소스 확인 (Library, Plugin, Icon)
Design	UX/UI 디자인을 위한 기본 툴
FigJam Board	브레인스토밍을 위한 화이트보드
Slides	PPT 제작 툴 (피그마 화면을 바로 프레젠테이션으로 활용)

3. Design 화면 구조

인터페이스 구성

Figma Design 화면
├─ 왼쪽 패널
│   ├─ Pages (페이지 관리)
│   ├─ Layers (레이어 구조)
│   └─ Assets (라이브러리)
├─ 중앙 캔버스 (작업 영역)
└─ 오른쪽 패널
    ├─ Design (디자인 속성)
    └─ Prototype (프로토타입 설정)

하단 툴바

툴	설명
선택 툴	오브젝트 선택 및 이동
프레임 툴	프레임(화면 단위) 생성
도형 툴	네모, 동그라미 등 기본 도형 생성
텍스트 툴	텍스트 추가
Comment	협업을 위한 코멘트 추가
Action	인터랙션 설정
Dev 모드	개발자용 정보 확인

4. 오른쪽 Design 패널 주요 속성

컴포넌트 선택 시 사용 가능한 속성

속성	설명
Position	위치 및 크기 조정
Layout	레이아웃 설정 (lock 기능으로 비율 유지)
Appearance	가시성 설정 (눈 아이콘으로 숨김 처리)
Corner radius	모서리 둥글기 조정 (Shift 키로 10씩 조절)
Fill	배경색 및 채우기 색상 변경
Stroke	테두리 색상, 두께, 스타일, 위치 설정
Typography	텍스트 스타일 설정

5. 페이지, 섹션, 프레임, 레이어 이해하기

계층 구조

페이지 (Page)
└─ 섹션 (Section)
    └─ 프레임 (Frame)
        └─ 레이어 (Layer)
            ├─ 그룹 (Group)
            └─ 개별 요소 (Shape, Text, Image 등)

각 개념 설명

레이어 (Layer)

개념

• 생성된 모든 요소의 층을 의미
• Z축으로 쌓인 앞뒤 순서로 표현
• 레이어 순서를 조정하여 요소의 겹침 제어

주요 기능

기능	단축키
그룹화	Cmd + G
그룹화 해제	Shift + Cmd + G
요소 복제	Option + 드래그

프레임 (Frame)

개념

• UI 디자인을 위한 기본적인 틀
• 화면 단위를 나타내는 컨테이너

단축키

• F - 프레임 생성

섹션 (Section)

개념

• 여러 프레임을 그룹화하여 조직화
• 작업 영역을 논리적으로 구분

단축키 및 기능

기능	단축키
섹션 생성	Shift + S
자동 크기 조정	Option + Shift + Cmd + R

페이지 (Page)

개념

• 하나의 파일 안에 여러 페이지로 나눠서 작업 가능
• 프로젝트를 큰 단위로 분류

💡 핵심 개념 정리

Figma 계층 구조

File (파일)
└─ Page (페이지) - 큰 단위 분류
    └─ Section (섹션) - 프레임 그룹화
        └─ Frame (프레임) - 화면 단위
            └─ Layer (레이어) - 개별 요소들
                ├─ Group (그룹)
                └─ Elements (도형, 텍스트 등)

레이어 순서와 Z-Index

레이어 패널 (위)
├─ Layer 3 (가장 앞)
├─ Layer 2 (중간)
└─ Layer 1 (가장 뒤)

💻 유용한 단축키 정리

필수 단축키

단축키	기능
F	프레임 생성
Shift + S	섹션 생성
Cmd + G	그룹화
Shift + Cmd + G	그룹 해제
Option + Shift + Cmd + R	섹션 크기 자동 조정
Option + 드래그	요소 복제

작업 효율화 팁

팁	설명
Cmd + 클릭	그룹 내부의 컴포넌트 직접 선택
Option + 마우스 오버	컴포넌트 간 간격 확인
Shift + 드래그	모서리 둥글기 10씩 조절