[강의학습일지] Figma 활용법(1) 1주차 강의

UXUI 디자이너에게 가장 중요한 것

1. 사용자의 문제를 해결해주려고 하는 끈기와 집요함

2. 논리적으로 생각할 수 있는 것

2-1. 상대방에게 설명, 설득할 수 있어야 함

2-2. 상대방이 나와 다른 이야기를 했을 때 합리적이라면 수용할 수 있는 열린 사고

3. 우리 웹사이트 들어오는 사용자들에 대한 관심, 애정

 

제품 제작 과정

아이데이션 ^[각주:1] - 와이어프레임, 플로우차트 - UI 설계, 디자인 시스템 - 프로토타이핑 - 개발 핸드오프

Figma 둘러보기

Drafts (연습파일): 커뮤니티에서 가져온 파일도 여기에 저장됨

Tab (탭): 전환하기 Ctrl+Shift+[/]

Import (불러오기): .fig 확장자 파일 불러오기

Community (커뮤니티): 가격, 저작권 확인하기 (검증된 플러그인 사용)

Figma 디자인 시작하기

다각형 만들기: Polycon>Count (Rectangle에서는 Count 설정 안 됨)

모든 모서리 둥글게 만들기: Corner Radius에서 곡률 조정

한쪽 모서리만 둥글게: Indepentent Corners>Corner Radius

이미지 첨부: 4096px까지만 지원

Crop: 도형 사이즈를 바꾸면 이미지의 비율이 깨짐

Figma 추출 (Export)

1x (원본 사이즈 크기)
확장자: PNG/JPG/SVG/PDF
Suffix 추출한 파일 뒤에 이름 붙이기

512w/h: 비율유지, 가로세로 512w/h에 맞춘다

Figma 저장 (Import/Save)

File>Save local copy: 컴퓨터에 저장(백업) 디자인을 하다가 이전 버전이 필요할 경우가 있음^[각주:2]

 

(기본적으로) 클라우드에 자동저장됨

File>Save to version history: 메모를 기록해서 클라우드에 저장하기

File>Show version history: 메모와 함께 저장한 기록 보기, 작업한 시점 불러오기(자동저장) (파일 이름 옆에도 있음)

Restore this version: 작업한 시점으로 복원하기

 

 

 

1.  Idea + action의 약자로, 새로운 아이디어의 생성, 발전, 커뮤니케이션 등의 과정을 아우르는 개념이다. 즉, 아이디어가 만들어지는 하나의 전체적인 과정을 의미한다 [본문으로]
2. Import (불러오기): .fig 확장자 파일 불러오기 [본문으로]