💡 25-05-07 (수)
수업 진도에 느리지만 열심히 쫓아가는중 ㅎㅋ...
요즘 디자이너에 필수툴인 피그마 배워서 너무 재밋당~~
뚠뚠 🐜 뚠뚠 🐜
Figma 장점
1️⃣ 클라우드 기반이어서 접근이 용이하다
▫️ 프로그램 설치 없이 브라우저에서 바로 사용 가능
▫️ 실시간 파일 저장과 다양한 디바이스에서 접근 가능
2️⃣ 실시간 협업이 가능하다
▫️ 여러 명이 동시에 같은 파일에서 작업 가능
▫️ 누가 어디를 보고 있는지도 실시간으로 확인할 수 있음
▫️ 코멘트 기능으로 피드백도 즉시 가능
3️⃣ 플러그인과 커뮤니티 자원 풍부하다
▫️ 다양한 플러그인으로 워크플로우를 최적화할 수 있음
▫️ 커뮤니티 템플릿, UI 키트, 아이콘 등을 바로 불러와 활용 가능
-> 무료여도 여러가지 재료들을 가져올 수 있음
4️⃣ 컴포넌트 및 스타일 시스템
▫️ 디자인 시스템 구축에 유리함
▫️ 버튼, 카드 등 UI 요소를 컴포넌트화해서 재사용 가능 → 수정이 쉬움
▫️ 텍스트 스타일, 색상 스타일 등을 지정해서 일관성 유지
5️⃣ 프로토타이핑 내장
▫️ 별도의 툴 없이 인터랙션 추가 가능
▫️ 사용자가 실제 앱을 사용하는 것처럼 테스트 가능
▫️ 디자인 시스템 구축에 유리함
➕ FigJam
: 디자이너뿐 아니라 기획자, 마케터, 개발자 등 팀원들이 함께 아이디어를 시각적으로 정리하고 공유할 수 있도록 도와주는 도구
🟰 디지털 화이트보드
Figma 인터페이스
recents : 내가 가장 최근에 사용한 파일들
drafts : 초안으로 작업했던 것들
explore community : 다양한 템플릿
design : 말 그대로 피그마에서 디자인
figjam : 화이트 보드
slides : PPT 템플릿 제공
타이틀 누르면 이름 변경 가능
show version history : 여태 작업한 내역 확인
오른쪽 상단에 minimize ui 누르면 캔버스 영역을 넓게 사용할 수 있다
하단 중앙을 보면 앞으로 쓰게 될 툴들이 나오는데 순서대로
무브-프레임-도형-펜-텍스트-코멘트-플러그인-디브모드
디브모드 : 개발에 필요한 정보만 딱 정리해서 볼 수 있게 해주는 모드
Layer의 개념
포토샵과 마찬가지로 피그마도 레이어 개념이다
(레이어 순서에 따라 맨 위에 할지 아래다 할지 정해짐)
✔️ 클리핑 마스크 설정/해제 : control + cmd + M
-> 도형,사진 두개를 동시 선택한 후 use as mask
-> 마스크 해제 remove mask
✔️ 그룹화 cmd + G (레이어 아이콘이 점선 네모로 바뀜)
✔️ 레이어 올리기 : ] / 레이어 내리기 : [
☑️ 도형을 선택한 후에 이미지를 삽입하면 바로 안에 삽입된다
☑️ 간격을 알고 싶으면 옵션 누르기
☑️ 사이즈 조절할때 shift 누르면 정비례로 바뀐다
✅ 네비게이션 툴 단축키
무브툴 : V
프레임 : R
펜툴 : P
텍스트 : T
코멘트 : C
플러그인 : cmd + K
오른쪽 아이콘 눌러서 잠그면 처음에 그려진 비율대로 확대/축소된다
Frame의 개념
= 아트보드,캔버스와 비슷한 개념
✔️ 프레임 이름 변경 : cmd + R
✔️ 섹션(여러 프레임을 그룹화하는 기능) : 오른쪽 마우스 - frame selectiond
☑️ 프레임안에 프레임을 계속 생성할 수 있다
☑️ 섹션 자체에도 색깔을 넣어줄 수 있다
피그마_도형
자세한 내용은 피그마에서 확인하기!
도형 더블클릭하면 활성화가 되며 하단에 다양한 툴들이 나타난다
모서리에 하얀 점을 잡고 움직이면 래디어스 값을 조정할 수 있다 (오른쪽에서 설정가능)
-> 옵션키를 누른 상태로 움직이면 한쪽만 적용
☑️ clip content를 체크해주지 않으면 프레임 안에 있는 요소들이 밖으로 빠져나온다
☑️ shift 누르면 15도씩 회전한다
➕ 피그마에서는 pathfinder(도형 합치기)를 boolean이라고 부른다
➕ 아직까지 디자인에서 아이폰 13 미니(375) 점유율이 높기 때문에 많이 사용함
오토레이아웃
: 컴포넌트나 프레임 내 요소들이 자동으로 정렬되고 크기가 조정되도록 해주는 기능
▶︎ 텍스트 길이가 늘어나도 버튼 사이즈가 같이 늘어나게
⭐ 오토레이아웃 단축키 : shift + A ⭐
(오른쪽 마우스 눌러서도 선택 가능)
Alignment : 텍스트 위치 조정
Gap : 두개의 버튼 사이의 간격
Padding : 버튼 안에 글자가 있을 때, 글자와 버튼 테두리 사이의 공간
▶︎ 패딩은 안쪽 여백
▶︎ 마진은 바깥 여백
🌟🌟🌟🌟🌟
Fixed : 너비 고정
Hug : 내용 크기에 맞춰서 프레임 너비가 자동으로 줄거나 늘어난다 (길이 조정)
-> 프레임이 안에 있는 글자를 안아준다(?)
Fill : 안에 있는 요소가 테두리에 맞춰 안을 꽉 채운다 (너비에 맞게)
-> 안에 내부 콘텐츠말고 바깥 요소에 맞춰 꽉 채워짐
▶︎ 아이콘 자체에 오토레이아웃을 한번 씌워준 뒤 fill을 적용시키면 원하는 위치로 바꿀 수 있음
Min width : 최소 너비 고정
Max width : 최대 너비 고정
☑️ 두줄로 떨어지는게 싫다면 Truncate text-A.. 선택 후 1줄로 바꾸면 된다
-> 그래도 안되면 w/fill, h/fixed 확인하기
☑️ 버튼 여러개를 오토레이아웃 하고 나서 flow vertical를 누르면 정해진 width값 이외 것들은 밑으로 떨어진다
☑️ Auto를 적용하면 각 요소들이 끝에 가서 붙는다
-> 패딩값을 줘서 떨어트리면 됨
☑️ 각 요소끼리 오토레이아웃을 적용시켜준 뒤 마지막에 다같이 적용시키기
✏️ 팝업창,검색창,뮤직앱 스크린 샷 1개 만들기
피그마 너무 재밌다...🤭
오토레이아웃 처음엔 헷갈리고 어려웠는데 계속 하다보니까 진짜 알겠다!!
도서도 왔구 이제 슬슬 데일리 ui 해야겠다 ㅎㅎ
