[사용자 친화 웹] Figma

Figma

UI 디자인 & 프로토타이핑 툴

와이어프레임, 프로토타입 제작, 브레인스토밍, 아이디에이션, 다이어그램 제작, 디자인 시스템 구축

 

Figma 특징

1. 실시간 협업 가능

한 화면에서 여러 명이 동시에 작업할 수 있음

 

2. 다양한 환경 지원

웹 브라우저 기반이라 브라우저만 사용할 수 있다면 어떤 환경에서도 사용 가능

ex) Mac, Window, Linux 등. 필요하다면 설치하여 사용할 수도 있음

 

3. 자동 저장 및 버전 관리

자동저장 기능, 누가, 언제, 무엇을 변경했는지 확인할 수 있는 히스토리 기능

 

4. 다양한 무료 폰트 지원

구글 폰트 설치 없이 사용 가능, 로컬 PC에 저장된 폰트 불러와서 사용 가능

 

5. 오토 레이아웃 기능(Shift + a)

요소들 사이의 간격과 정렬에 규칙을 부여하여,

요소의 크기가 변하더라도 규칙에 맞게 간격과 정렬을 유지할 수 있음

 

6. 프로토타이핑

Lo-Fi에서 Hi-Fi 프로토타입까지 제작 가능

 

 

 

기능

Prototype

- Overflow scrolling 프레임에만 적용 가능

- Interactions(이벤트, 애니메이션) 한 이벤트는 한 번만 연결 가능

(오버레이- 창 위에 창을 띄워 한 페이지를 여러 페이지에서 사용 가능)

 

Design

- Constraints 위쪽, 왼쪽 고정하면 프레임 조정 시 크기 변하지 않음

- Layout grid(Coulmn) 그리드 시스템을 활용하여 좋은 레이아웃 작성 가능(이전 게시글 휴대폰 4, 태블릿 8, PC 12) 

 

Figma > community > unsplash(이미지), iconify(아이콘), wireframe(와이어프레임) 등 다양한 plugins 존재

 

 

 

 

 

 

22.12.20 

코스 S3U2 Figma 진행중