Figma
Figma, Inc. · 생산성 · 비즈니스
Figma는 브라우저에서 돌아가는 디자인 플랫폼이다. 같은 캔버스에서 인터페이스와 프로토타입, 사이트를 만들고, AI 에이전트가 지시를 편집 가능한 디자인과 작동하는 코드로 바꾼다.
Figma 소개
About
Figma란
Figma는 브라우저에서 돌아가는 AI 디자인 도구다. 손으로 캔버스를 만지는 작업이 중심인 점은 그대로다. 화면을 그리고 프로토타입을 연결하며 공용 디자인 시스템을 관리하고, 개발팀에 넘기는 일까지 한곳에서 끝낸다. 파일을 내보내고 다시 받는 과정이 사라진다.
쓰임새는 인터페이스 설계에 머물지 않는다. 한 파일 안에 FigJam 화이트보드, 발표 자료, Figma Draw 삽화, Figma Buzz 마케팅 소재, Figma Sites로 발행한 페이지를 함께 둘 수 있다. Figma Make는 지시문이나 기존 프레임을 실제로 동작하는 앱으로 만든다. Figma 에이전트는 이 도구들을 넘나들며 레이어를 고치고 셰이더를 생성하고 설명만으로 작은 도구를 조립한다.
전체를 묶는 것은 파일 그 자체다. 디자이너와 라이터, 엔지니어가 같은 캔버스를 열고 해당 레이어에 코멘트를 남기며 변경을 즉시 본다. 개발팀은 Dev Mode에서 치수와 에셋, 코드 조각을 얻고, Figma MCP 서버가 같은 맥락을 외부 코딩 에이전트에 전달한다.
한계는 대체로 요금과 실무에서 나온다. 요금은 좌석 단위로 매기고 좌석 종류마다 쓸 수 있는 기능이 다르다. AI 기능은 매달 주어지는 크레딧을 소모하므로 에이전트를 매일 돌리면 플랜 요금을 넘어선다. Sites와 Buzz를 비롯한 최신 도구는 베타로 남아 있어 화면과 한도가 릴리스마다 바뀐다.
시작하기
- figma.com에서 무료 계정을 만든다. 이메일, Google 계정, 회사 SSO 중 하나를 쓰면 된다. Starter 플랜은 카드 등록을 요구하지 않는다.
- 디자인 파일을 열고 작업할 화면에 맞는 프레임 크기를 고른다. 완성된 파일의 구성을 보고 싶다면 Community 템플릿에서 시작한다.
- 프레임과 오토 레이아웃, 컴포넌트로 조립한다. 색상과 텍스트 스타일, 컴포넌트 기준이 팀에서 정해지면 라이브러리로 발행한다.
- 프레젠테이션을 켜 프로토타입을 시험한다. 다른 방향을 보고 싶으면 Figma Make를 열고 원하는 앱을 말로 설명한다.
- 링크나 이메일로 팀을 초대하고 좌석 종류를 지정한다. 구현 단계에 들어가면 Dev Mode를 연다.
제품 정보
Figma의 요금, 지원 플랫폼, 성능을 한눈에 확인해 보세요.
추천 대상
이 도구가 가장 잘 맞는 사용자, 작업, 상황입니다.
사용자
- 소프트웨어 회사의 프로덕트 디자이너
- 디자인 시스템 담당자
- 디자인 경험이 없는 창업자와 마케터
작업
- 모바일 흐름을 설계하고 시험하기
- 흐릿한 아이디어를 누를 수 있는 형태로 만들기
- 완성된 화면을 개발에 넘기기
활용 상황
- 원격 팀이 시차를 두고 리뷰한다
- 브랜드 팀이 금요일까지 SNS용 50종을 만들어야 한다
- 스타트업이 이번 주에 마케팅 페이지를 열고 싶다
주요 기능
공유 캔버스와 실시간 편집
파일을 연 사람 모두가 같은 커서와 코멘트, 레이어 트리를 본다. 디자이너 두 명이 같은 프레임을 동시에 만질 수 있고, 개발자는 디자인이 움직이는 중에도 컴포넌트를 살핀다. 브랜치는 위험한 개편을 본 파일에서 떼어 두고 리뷰를 받게 한다.
Figma 에이전트
에이전트는 지시를 받으면 캔버스에서 직접 움직인다. 화면 초안을 잡고, 선택 영역의 스타일을 바꾸고, 셰이더를 만들고, 설명한 조작을 갖춘 작은 플러그인을 조립한다. 파일 안의 컴포넌트와 변수를 읽기 때문에 범용 이미지 생성기보다 팀의 시스템에 가까운 결과가 나온다. 자체 스킬에 지시를 저장해 두면 매번 다시 입력하지 않아도 된다.
Figma Make
Figma Make는 지시문에서 앱을 만드는 도구로, 유료 플랜의 Full 좌석이 쓴다. 디자인이나 이미지를 붙이고 동작을 설명하면 작동하는 앱과 Files 탭에서 고칠 수 있는 코드가 나온다. 결과를 웹사이트로 발행할 수 있어 티켓을 만들기 전에 제품 가설을 시험하기 좋다.
코드 레이어와 Figma Motion
코드 레이어는 코드를 벡터나 이미지처럼 캔버스 위의 재료로 올린다. 디자인 레이어는 클릭 한 번으로 상호작용 레이어가 되고, 변경은 편집 가능한 프레임으로 되돌아온다. Figma Motion은 키프레임과 가속 곡선이 있는 타임라인을 더한다. 그 데이터는 Dev Mode에서 읽히고 CSS, JSON, React, MP4, GIF로 내보낼 수 있다.
Dev Mode와 MCP 전달
Dev Mode는 개발자에게 치수와 컴포넌트 이름, 복사할 수 있는 코드를 모아 보여 주는 검사 화면을 준다. Figma MCP 서버는 그 맥락을 Cursor나 Claude Code 같은 에이전트로 넓힌다. 에이전트는 스크린샷에서 추측하지 않고 실제 구조를 읽는다. 둘 다 Dev나 Full 좌석이 필요하고, MCP 서버는 데스크톱 앱을 통해 돌아간다.
디자인 시스템과 변수, 라이브러리
변수는 색상과 간격, 모드를 한곳에 모으고 변경을 라이브러리를 쓰는 모든 파일로 퍼뜨린다. 밝은 테마와 어두운 테마, 브랜드별 모드를 컴포넌트 복제 없이 유지한다. 규모가 커질수록 시간을 가장 많이 아껴 주는 부분이고, 이름을 대충 지으면 가장 먼저 물어뜯기는 부분이기도 하다.
장단점
장점
- 첫 와이어프레임부터 프로토타입 링크, 개발 전달까지 한 브라우저 탭에서 끝난다.
- 에이전트와 Figma Make가 실제 컴포넌트와 변수를 읽어서 결과물이 기존 디자인 시스템에 맞물리기 쉽다.
- Dev Mode와 Figma MCP 서버가 디자인과 개발 사이의 스크린샷과 빨간 줄 왕복을 줄여 준다.
- 실시간 협업과 레이어에 고정된 코멘트는 분산된 팀에서도 버틴다. 버전 기록 덕에 되돌리기도 간단하다.
- 무료 Starter 플랜으로 평가를 시작할 수 있고, Community에는 대부분의 작업에 쓸 템플릿과 플러그인이 있다.
단점
- AI 사용량은 크레딧으로 매긴다. 매일 에이전트에 기대는 팀은 월 한도를 넘겨 크레딧을 더 사게 된다.
- 좌석 종류를 따로 과금해서 작은 팀은 예상보다 일찍 Full, Dev, Collab을 함께 결제하게 된다.
- 프로토타입이 많은 큰 파일은 오래된 노트북에서 로딩이 느리고, 실시간 편집에는 안정적인 회선이 필요하다.
- Sites와 Buzz, 여러 에이전트 기능이 베타라 한도와 화면이 예고 없이 바뀐다.
자주 묻는 질문
UI를 설계하고 클릭 가능한 프로토타입을 만들고 디자인 시스템을 유지하며 개발팀에 작업을 넘기는 데 쓴다. 지금은 화이트보드, 발표 자료, 삽화, 마케팅 소재, 지시문으로 만든 앱까지 같은 플랫폼에서 다룬다.
관련 콘텐츠
Figma와 관련된 도구, 스킬, 아티클을 살펴보세요.
Figma 대안
Base Code
Base44 (Wix) · 코딩 · 생산성Base Code는 Base44가 만든 공유 클라우드 개발 환경이다. 팀은 기존 GitHub 저장소에 대한 변경을 채팅으로 설명하고, 미리보기로 확인한 뒤 풀 리퀘스트로 돌려보낸다.
Knocket
Knocket (Tencent RTC team) · 생산성 · 비즈니스 · 챗봇Knocket은 무료 라이브 채팅과 연락처 페이지 도구다. 방문자는 웹사이트, 앱, 공유 링크에서 메시지를 보내고, 운영자는 텔레그램이나 하나의 받은편지함에서 답한다.
FloorGen
Vinit Kumar (FloorGen) · 생산성 · 중국 AIFloorGen은 브라우저에서 도는 평면도 제작 도구다. 문장이나 스케치를 편집 가능한 2D 평면도와 3D 둘러보기로 바꾸고, PDF, DXF, 영상으로 내보낸다. 계정 없이도 그릴 수 있다.