Figma
Figma는 벡터 그래픽과 계층적 프레임을 사용해 웹사이트·모바일 애플리케이션 및 소프트웨어 사용자 인터페이스를 설계하는 협업형 디자인 플랫폼이다. 브라우저에서 공동 작업이 가능하도록 설계되어 한 파일을 여러 사람이 열어 그래픽 객체와 화면 구성을 동시에 수정하고 의견을 교환할 수 있다...
| 작성 언어 | C++ (렌더링 엔진), TypeScript (웹 클라이언트) |
|---|---|
| 분류 | 협업형 UI·UX·벡터 그래픽 디자인 소프트웨어 |
| 개발·배포 | Figma, Inc. |
| 대표 용도 | 웹·모바일 인터페이스 디자인, 프로토타이핑 |
| 편집 모델 | 프레임·벡터 경로·레이어·컴포넌트 |
| 레이아웃 | Auto Layout·제약 조건 |
| 디자인 시스템 | 컴포넌트·베리언트·변수·스타일 |
| 프로토타입 | 화면 연결·인터랙션·애니메이션 |
| 협업 | 브라우저 기반 실시간 공동 편집·코멘트 |
| 개발자 연계 | Dev Mode·디자인 사양·에셋 전달 |
| 확장 | 플러그인·위젯·API |
| 제품 관계 | FigJam, Figma Design, Dev Mode |
| 공식 사이트 | Figma |
Figma는 벡터 그래픽과 계층적 프레임을 사용해 웹사이트·모바일 애플리케이션 및 소프트웨어 사용자 인터페이스를 설계하는 협업형 디자인 플랫폼이다. 브라우저에서 공동 작업이 가능하도록 설계되어 한 파일을 여러 사람이 열어 그래픽 객체와 화면 구성을 동시에 수정하고 의견을 교환할 수 있다. 시각적으로 완성된 화면을 제작하는 것뿐 아니라 반복되는 UI 요소를 디자인 시스템으로 관리하고 시제품을 구성하여 개발자에게 전달하는 작업까지 포함한다. 일반적인 페인팅 프로그램보다 화면 구조와 컴포넌트의 재사용성·일관성이 중요한 소프트웨어다.[1]
Figma Design의 그래픽 문서는 프레임·그룹·패스·문자와 벡터 도형으로 구성된다. 사용자는 각 객체의 크기·위치·채움·스트로크·효과를 조정하고 프레임에 여러 요소를 중첩하거나 계층적으로 배치한다. Auto Layout은 프레임 안의 객체가 방향·간격·패딩·정렬 규칙을 따라 배치되도록 하여 버튼의 글자가 길어지거나 목록의 항목이 바뀔 때 주변 레이아웃이 자동으로 적응하게 한다. 제약 조건과 반응형 프레임을 결합하면 서로 다른 화면 크기에 맞는 인터페이스를 하나의 편집 구조로 설계할 수 있다.[2]
디자인 시스템에서는 버튼·입력창·아이콘 등 반복해서 쓰는 객체 묶음을 컴포넌트로 정의하고, 각 화면에서는 이를 인스턴스로 사용한다. 컴포넌트의 속성·베리언트는 동일 요소의 크기나 상태에 따라 서로 다른 모습을 표현하며, 변수는 색상·수치와 여러 디자인 값을 여러 화면에서 일관되게 참조하도록 돕는다. 프로토타입 기능으로 화면 전환·클릭·오버레이와 움직임을 연결하면 실제 애플리케이션을 구현하기 전에 정보 구조와 사용 흐름을 시연할 수 있다. 디자인 파일의 그래픽과 상호 작용을 표현하는 모델은 최종 앱의 소스 코드와 동일하지 않다.
Figma의 협업 기능은 사용자별 커서, 변경 기록, 파일 공유와 댓글을 통해 디자인·기획·개발 인력이 같은 자료를 확인하도록 한다. Dev Mode는 컴포넌트·속성·크기·변수와 에셋 등 개발에 필요한 구조를 검토하고 디자인을 코드 구현으로 연결하는 작업을 지원한다. 다만 생성된 코드 조각이나 디자인 속성은 실제 동작하는 앱의 상태 관리·접근성·네트워크 로직을 완성해 주는 것은 아니다. 같은 플랫폼의 FigJam은 정확한 UI 설계보다는 화이트보드형 공동 기획에 특화되어 있으므로 두 작업 환경을 구별해야 한다.[3]