DAY+13 [ 피그마 인터페이스 공부 ]

안녕하세요, 주-주스 입니다! 🍹

 

(∩｡•ｏ•｡)っ.∅｡💡
✺!~ 캠프 13일차  ~!✺

꒰ᐢ๑⸝⸝˙‎‎‎‎ࠔ˙⸝⸝๑ᐢ꒱

 

오늘은!! 

피그마 인터페이스를 학습했던 내용 및 핵심 단축키와 기능을 포스팅하겠습니다!

 

 

---

Figma 이해하기

1. 클라우드 기반 - 어디서든 접근 가능

- 프로그램 설치 없이 브라우저에서 바로 사용 가능

- 파일을 실시간으로 저장하고, 다양한 디바이스에서 접근 가능

(노트북, 데스크탑, 심지어 태블릿도 가능)

 

2. 실시간 협업

- 여러 명이 동시에 같은 파일에서 작업 가능 (Google Docs처럼!)

- 누가 어디를 보고 있는지도 실시간으로 확인할 수 있음

- 코멘트 기능으로 피드백도 즉시 가능

 

3. Figma 이해하기 플러그인과 커뮤니티 자원 풍부

- 다양한 플러그인으로 워크플로우를 최적화할 수 있음 (예: lorem ipsum 생성기, 이미지 삽입 등) 커뮤니티 템플릿,
UI 키트, 아이콘 등을 바로 불러와 활용 가능

 

4. 컴포넌트 및 스타일 시스템

- 디자인 시스템 구축에 유리함

- 버튼, 카드 등 U 요소를 컴포넌트화해서 재사용 가능 수정이 쉬움 텍스트 스타일, 색상 스타일 등을 지정해서 일관성 유지

 

5. 프로토타이핑 내장

- 별도의 툴 없이 인터랙션 추가 가능

- 사용자가 실제 앱을 사용하는 것처럼 테스트 가능

- 디자인 시스템 구축에 유리함

---

Figma의 핵심 인터페이스 둘러보기

Figma의 인터페이스는 크게 4가지 영역으로 나눌 수 있습니다.

1. Toolbar (툴바) 화면 최상단에 위치한 툴바는 가장 기본적인 기능을 제공합니다.
   • Move Tool (V): 오브젝트를 선택하고 이동시키는 기본 도구입니다.
   • Frame Tool (F): 아트보드 역할을 하는 '프레임'을 생성합니다.
                             모바일, 웹, 데스크톱 등 다양한 기기 사이즈 템플릿을 제공합니다.
   • Shape Tools (R, O, L): 사각형(R), 원(O), 선(L) 등 기본적인 도형을 그리는 도구입니다.
   • Pen Tool (P) / Pencil Tool (Shift + P): 자유로운 형태의 벡터 도형을 만들 때 사용합니다.
   • Text Tool (T): 텍스트를 입력합니다.
   • Hand Tool (H): 캔버스를 이동시킵니다.
   • Add Comments (C): 특정 위치에 댓글을 달아 팀원에게 피드백을 전달할 수 있습니다.
2. Layers Panel (레이어 패널) 화면 좌측에 위치하며, 현재 캔버스에 있는 모든 프레임, 도형, 텍스트 등 오브젝트의 목록을 보여줍니다. 포토샵이나 일러스트레이터와 같이 레이어의 순서를 바꾸거나, 그룹화, 숨기기, 잠그기 등의 작업을 할 수 있습니다.
3. Canvas (캔버스) 작업 공간의 중앙에 위치한 영역입니다. 모든 디자인 작업은 이 캔버스 위에서 이루어집니다. 프레임을 생성하고, 그 안에 오브젝트들을 배치하여 디자인을 완성합니다.
4. Properties Panel (속성 패널) 화면 우측에 위치하며, 선택된 오브젝트의 속성을 조정하는 곳입니다.
   • Design: 크기, 위치, 색상, 그림자, 투명도 등 디자인 요소를 설정합니다. 특히, Auto Layout과 Constraints 기능을 통해 반응형 디자인을 효율적으로 구현할 수 있습니다.
   • Prototype: 클릭, 드래그, 호버 등 다양한 상호작용을 설정하여 실제 앱처럼 작동하는 프로토타입을 만들 수 있습니다.
   • Inspect: 선택된 오브젝트의 CSS, Swift, Android 코드를 보여줍니다. 개발자와의 협업 시 매우 유용한 기능입니다.

---

Figma의 단축키 모음

단축키	기능 설명
기본 조작 및 뷰
V	이동 툴 선택 (Move Tool)
F	프레임 툴 선택 (Frame Tool)
T	텍스트 툴 선택 (Text Tool)
H	손 모양 툴 선택 (Hand Tool)
Ctrl + D (Cmd + D)	오브젝트 복제 (Duplicate)
Ctrl + G (Cmd + G)	그룹화 (Group)
Ctrl + Shift + G (Cmd + Shift + G)	그룹 해제 (Ungroup)
Shift + 1	선택된 프레임을 화면에 맞게 확대/축소 (Zoom to Fit)
Shift + 2	100% 원본 크기로 보기 (Zoom to 100%)
Ctrl + + (Cmd + +)	확대 (Zoom In)
Ctrl + - (Cmd + -)	축소 (Zoom Out)
오브젝트 정렬 및 배치
Alt + A (Opt + A)	왼쪽 정렬 (Align Left)
Alt + D (Opt + D)	오른쪽 정렬 (Align Right)
Alt + W (Opt + W)	위쪽 정렬 (Align Top)
Alt + S (Opt + S)	아래쪽 정렬 (Align Bottom)
Alt + Shift + H	수평 간격 일정하게 맞추기 (Distribute Horizontal Spacing)
Alt + Shift + V	수직 간격 일정하게 맞추기 (Distribute Vertical Spacing)
컴포넌트 및 스타일
Ctrl + Alt + K (Cmd + Opt + K)	컴포넌트 생성 (Create Component)
Ctrl + Alt + B (Cmd + Opt + B)	인스턴스 분리 (Detach Instance)
Ctrl + R (Cmd + R)	레이어 이름 변경 (Rename Layer)
Ctrl + C (Cmd + C)	컬러 피커 (Pick Color)
Ctrl + Alt + C (Cmd + Opt + C)	스타일 복사 (Copy Properties)
Ctrl + Alt + V (Cmd + Opt + V)	스타일 붙여넣기 (Paste Properties)
오토레이아웃 (Auto Layout)
Shift + A	오토레이아웃 추가 (Add Auto Layout)
H	수평으로 꽉 채우기 (Horizontal Fill)
V	수직으로 꽉 채우기 (Vertical Fill)

 

---

오늘의 실습 !

⭐️ 피그마 기능으로 나만의 비전보드 만들기 - 웹 사이즈 / 모바일 사이즈

 

⭐️ 피그마로 포트폴리오 대문 만들어보기 (메인 과제) : 1페이지 

• 자기를 소개하는 페이지 하나를 만들어봅시다.
• 래퍼런스를 수집하고 기존에 나를 브랜딩했던 과제를 참고하여 (새롭게 진행해도 됨) 만들어보세요.

 

 

⭐️  앱 서비스 클론 디자인 (최소 3페이지) — 진행중!

• 오토레이아웃 적용 및 오늘 배운 기능들로 자유롭게 피그마에 익숙해지기

---

[ 13일차 소감 🌱 ]

컨디션 조절 실패로 아침부터 너무너무 아파서 따라가기 버거웠지만, 그래도 드디어 피그마를 배운다는 것에 너무너무 기뻤습니다!! 차근차근 포토샵과 일러스트레이터와 비슷한 점도 있었지만 새로운 기능들이 많아서 무척이나 흥미롭게 배웠습니다! 오토 기능이 진짜 너무 신기해서 마구마구 활용하고자 연습했던 것 같습니다. 수업이 끝나고 스터디 조율 후 그대로 뻗었다가 블로그를 쓰게 되었습니다 ㅎㅎ 환절기라 더 심해진 것 같아서 조심해야 겠습니다 ㅠㅠ 내일도 파이팅!!