[Figma] Figma 활용1

1. 피그마 소개

1)  피그마 툴 소개

📌 뛰어난 디자인 협업 툴

피그마는 강력한 디자인 툴이자, 와이어프레임부터 핸드오프 과정 전부를 하나의 툴에서 할 수 있는 효율적인 툴

💡제품 제작 과정

- 제품을 만들 때는 크게 기획 → 디자인 → 개발 → 테스트 및 출시의 과정

- 이 모든 과정을 피그마 하나로 활용 가능 

2) 피그마의 특징

- 언제나 어디서나

웹에서도 사용할 수 있어 접근성이 좋고, 맥과 윈도우 모두 사용

- 디자인부터 개발까지 올인원

디자이너부터 개발자까지 아우르는 종합 협업 툴 (절반은 디자인 기능, 절반은 개발 관련 기능)

- 강력한 커뮤니티

 풍부한 커뮤니티 자료 (커뮤니티 내 각종 플러그인과 디자인 자료)

- 쉬운 학습

다른 툴들과 사용 방법이 유사해 금방 배울 수 있음, 디자인 기초부터 고급 기능까지 모두 피그마 하나로 가능

3) 피그마 VS 피그잼

- UI 제작시 어떤 걸 만들지, 어떻게 만들지 고민하는 과정과 논의 필요 

- 피그마 디자인 파일은 UI 설계, 피그잼 파일은 린 캔버스, 더블 다이아몬드, 사용자 여정 지도 등 UX 기획 및 아이데이션

4) 피그마 웹 VS 피그마 앱

기능의 차이는 없지만 앱 다운로드 추천 

- 데스크탑에서 댓글이나 태그 알림을 바로 받을 수 있음 

- 웹브라우저에서 사용하는 것보다 끊기거나 느려지는 현상이 덜함 

5) 만약 웹브라우저를 이용해서 피그마를 사용한다면?

컴퓨터에 설치된 폰트를 피그마 웹에서 쓸 수 있도록 추가 프로그램(Font Installers)을 설치

- 프로그램을 설치하면 컴퓨터 안에 있는 폰트 사용 가능 

- 웹 브라우저를 사용하는 경우, 컴퓨터 안에 있는 폰트 사용 불가 

- 컴퓨터에 설치한 폰트를 피그마 웹 브라우저에서 사용할 수 있도록 하는 추가 프로그램 = (Font Installers)

❗️커뮤니티 자료 사용 시 주의 사항

피그마 커뮤니티의 자료는 다른 사람이 직접 만들어서 올리는 자료

**서드파티(3rd-party, Third-party;제3자)** 서비스 제공자가 아닌 사람들이 자체적으로 만드는 것

- 가격 확인 

커뮤니티에 올라오는 자료들은 유무료가 섞여 있음 -> 사용 전 라이선스나 가격을 확인해야 함 

- 저작권 확인

자료나 플러그인을 사용해 디자인을 한 경우 개인적인 사용으로만 허락하는 경우도 있음 -> 사용하기 전에 미리 저작권이나 라이선스 확인

- 문제가 생겼을 경우, 제작자에게 직접 문의

피그마는 다른 사람들의 자료까지 직접적으로 관리 안 함 -> 플러그인이나 파일을 사용하다가 문제가 발생한 경우 제작자에게 문의

2. 피그마 디자인 시작 

피그마에서의 기본적인 디자인

1) 도형 

• 기초 도형 
• 곡률(Radius) 
• 선 
• 회전과 반전 (가로 반전 : Shift+H, 세로 반전 : Shift+V)

2) 텍스트

텍스트 레이어 만드는 방법

1. 툴바에서 텍스트 도구 선택

2. 입력하고 싶은 부분을 클릭하면 텍스트 레이어 생성

 

3) 이미지 

원하는 사진을 피그마 캔버스 위로 드래그 앤 드랍 -> 자동으로 첨부

📌 사진 크기가 자꾸 자동으로 바뀌나요?

피그마는 UI 작업에 특화 -> 너무 크거나 긴 사진은 지원 안 함 

가로나 세로가 4096px 이상인 경우 자동으로 리사이징

💡이미지 리사이징

항상 모든 영역에 사진이 딱 맞을 수 없음

-> 사진이 어디를 기준으로 꽉 차게 나오게 할 것인가를 정하기

1) Fill 섹션의 Image라고 써진 앞부분 썸네일 선택

- Fill 섹션의 항목 앞부분을 누르면 이미지 채우기 패널 열림

2) 리사이징 항목을 눌러 4개를 비교

• Fill : 정해진 도형 크기를 비율을 유지한 채 꽉 채우고, 나머지는 숨김
• Fit : 정해진 도형 크기 안에 비율을 유지한 채 이미지를 다 보이게 넣음
• Crop : 원하는 영역을 잘라 보여줍니다. 도형의 비율이 변하면 이미지도 비율이 변함
• Tile : 이미지를 반복해서 보여줌

3. 추출과 저장

만든 이미지를 다른 파일로 추출하고, 피그마 파일로 저장

개체를 이미지 파일로 저장하기 (추출) 

피그마 작업물 자체를 로컬 파일로 저장하기 

1) 파일로 추출하기

1. 추출하고 싶은 개체 선택

2. 디자인 패널 맨 아래의 Export 옆 + 아이콘 선택

3. 추출하고 싶은 확장자와 크기를 선택하고 Export 선택

Export 패널 ->  Suffix : 추출한 파일 뒤 붙여지는 이름

2) 피그마 파일로 컴퓨터에 저장하기

📌 피그마 파일 저장의 원리

피그마는 클라우드 저장 방식 ->  따로 저장하지 않아도 피그마가 알아서 서버에 진행 상황을 동기화

- 작업하다 보면 다양한 변수가 생기기 마련, 항상 백업이 필요

- 내 컴퓨터에 백업 파일을 만들어 두는 방법과 복구 시점을 만드는 방법

 * fig 파일로 컴퓨터에 저장하기

파일이 의도치 않게 삭제됐거나 변경사항을 잘못 적용해 복구하기 힘든 경우, 완전 이전 버전의 디자인이 필요한 경우를 대비해 백업 파일을 만들어 놓을 수 있음

1. 도구 모음 맨 앞에 있는 피그마 아이콘 -> 피그마 메뉴 ->  File 메뉴 

2. Save local copy를 선택해 컴퓨터 저장 위치를 선택

* 컴퓨터에 저장한 fig 파일을 피그마로 열려면?

백업을 피그마에서 다시 열기 위해 피그마에 다시 불러오는 과정이 필요

- 파일을 불러오고 싶은 곳의 우측 상단에 있는 import를 눌러 컴퓨터에 있는 피그마 파일 선택

3) 진행 상황 메모해서 클라우드 저장하기

변경 사항을 확인할 수 있고, 필요한 경우 이전 버전으로 되돌릴 수 있음

1. 도구 모음 맨 앞의 피그마 메뉴

2. File 메뉴->  Save to version history (메모를 적어 클라우드에 저장)

3. 간단한 메모 제목과 내용을 작성해 저장

4) 저장된 진행 상황 확인하기

1. 피그마 메뉴 File → Show version history Or 파일 이름 옆의 더보기 아이콘

2. 저장한 메모와 날짜를 확인

3. 이전 버전으로 되돌리려면?

• 원하는 버전에 대고 오른쪽 마우스 버튼을 클릭 -> 메뉴
• 메뉴에서 Restore this version => 이전 버전으로 되돌릴 수 있음