피그마 기초 수업
Connecting the Dots
오늘은 스티브 잡스의 연설 영상을 봤다!
“You can’t connect the dots looking forward; you can only connect them looking backwards.”
“앞을 보며 점들을 연결할 수는 없다. 오직 뒤돌아보며 점들을 연결할 수 있을 뿐이다.”
'지금 하고 있는 일이 맞는 걸까?'라는 의문이 들 때가 있다.
하지만 시간이 지나고 나면, 지금의 경험과 선택이 모두 이어져 큰 그림을 만든다는 걸 알려주었다.
그래서 지금은 단순히 Keep going. 내 마음 속의 직감을 믿고 나아가는 것이 중요하다.
오늘은 본격적으로 피그마(Figma) 를 다루며 기능과 단축키를 익혔다.
문제를 해결하는 프로덕트 디자인 도구로써 피그마를 이해하는 것이 중요하다.
📌 자주 쓰는 피그마 단축키
(맥OS 기준, 윈도우는 ⌘ → Ctrl, ⌥ → Alt로 대체)
도움말 & 단축키 패널 열기
Control + Shift + ? → 모든 단축키를 확인할 수 있는 패널 오픈
도형 그리기
R : 사각형(Rectangle)
O : 원 / 타원(Ellipse)
L : 선(Line)
T : 텍스트 상자 생성
Shift 누른 상태로 드래그 → 정사각형, 정원, 45도 직선
프레임 & 그룹
F : 프레임(Frame) 생성
⌘ + G : 그룹(Group) 묶기
Shift + ⌘ + G : 그룹 해제
정렬 & 분배
Shift + A : Auto Layout 적용 (요소 간격 자동 정렬)
상단 패널에서 Align 옵션으로 가로/세로 정렬
클립 컨텐트(Clip Content)
Frame 속성에서 Clip content 체크 → 프레임 밖 요소 숨김
줌 & 화면 조작
⌘ + 1 : 선택한 요소 전체 화면에 맞춤
⌘ + 2 : 선택한 요소 중심으로 줌
⌘ + 0 : 전체 캔버스를 화면에 맞춤
🛠️ 패스파인더 기능 (Boolean Groups)
피그마에서도 패스파인더(도형 결합 기능) 를 지원한다!
Union (합치기) : 두 개 이상의 도형을 하나로 합침
Subtract (빼기) : 위 도형으로 아래 도형 일부를 잘라냄
Intersect (교집합) : 겹치는 부분만 남김
Exclude (차집합) : 겹치는 부분을 제외하고 남김
수업 내 실습
1. 도형툴 및 클립컨텐트, 이펙트 만져보기
2. 유튜브 뮤직 UI 클론 디자인
오토 레이아웃 기능으로 피그마 기능 맛보기!
배운 오토 레이아웃 기능 활용하여 유튜브 뮤직 Ui 클론 디자인 해보기
느낀 점
오토레이아웃~~ 신세계다!! html 이나 css 에서 배우던 요소들이 같이 들어있는 느낌?
div 형식으로 만들고, css 요소 넣는다고 생각하니까 쉬웠다 ㅎㅎ
그리고 내용이 계속 바뀌는 ui 디자인에 굉장히 편리하다고 생각했다!
개발자에게 보여줄 때도 정확한 값들이 나와있어서 더욱 좋을 것 같다 👍
과제
1. 피그마 기능으로 나만의 비전보드 만들기
내가 바라는 미래들을 핀터레스트에서 찾고 모아서 만들었다!
모바일용 / 데탑용
배경 제거 플러그인도 써봤는데 요건 아직까지 포토샵이 우위인듯? (ㅎㅎ)
2. 피그마로 포트폴리오 대문 만들어보기
완성물!
느낀 점
확실히 이펙트 적용 부분을 익히니 어떻게 만들었는지 눈에 잘 보였다:)
다만 이미지는 누끼 안따진채로 박스로 효과가 적용되어서,
블러를 통해서 그림자를 표현해주었다! 😝
확실히 포토샵보다 가벼운 느낌? 컴포넌트들은 일러스트처럼 벡터처럼 다루는 것 같은데
가벼워서 신기하당
3. 앱서비스 클론 디자인
어플 리볼트를 클론해주었다.
오토 레이아웃을 통해 정렬하니 굉장히 편했던!
회고
"Connecting the Dots" 지금은 불안해 보여도, 모든 경험은 언젠가 연결된다. 부트캠프에서 배우는 모든 경험들을 모아 프로덕트 디자이너로써의 나를 성장시킬 수 있을 것이라고 믿는다. 피그마 배우고 익숙해지니 정말 유용한 툴인 것이 느껴졌다. 현업에서 사용하는 첫번째 툴이니, 앞으로의 수업에서도 잘 배워나가야겠다.
#하나하나의 경험들을 소중히
