UXUI 디자이너라면 Figma Site 쓰고 있지?
UX/UI 디자인 분야는 인공지능(AI) 기술의 발전으로 새로운 변화를 맞이하고 있다. 최근 몇 년간 생성형 AI 등 혁신적인 기술이 디자인 워크플로우에 도입되면서, 디자인 작업 방식이 크게 진화하고 있다. 특히 Figma와 같은 도구들은 협업 디자인의 표준으로 자리 잡았고, 여기에 AI 기능을 접목해 UX/UI 디자이너들의 작업 효율과 창의성을 높이고 있다. 이번 글에서는 Figma가 새롭게 선보인 Figma Sites를 살펴보고, 이 도구가 UX/UI 디자이너의 UI 디자인 결과물 제작 및 출판 방식에 가져올 혁신에 대해 소개해보고자 한다.
디자인 워크플로우의 변화:
AI와 새로운 도구의 등장
전통적으로 UX/UI 디자이너는 와이어프레임과 목업(mockup)을 만든 후 개발자와 협업하여 실제 웹사이트나 앱을 구현하는 과정이 필요했다. 하지만 AI 기술의 발달로, 디자이너 스스로 디자인 결과물을 코드 없이 인터랙티브한 프로토타입이나 웹사이트 형태로 빠르게 만들어내는 것이 가능해지고 있다. 여러 AI 기반 디자인 보조 도구와 플러그인이 등장하여 반복 작업을 자동화하거나 디자인 제안을 해주는 등 워크플로우를 효율화하고 있다. Figma 역시 이러한 흐름을 주도하는 핵심 플랫폼 중 하나다. Figma는 실시간 협업과 강력한 디자인 시스템 관리로 이미 많은 UX/UI 디자이너들의 필수 도구가 되었는데, 최근 AI 기능과 새로운 제품군을 추가하며 디자인 프로세스의 혁신을 이끌고 있다. 그 중에서도 2025년 Figma의 연례 컨퍼런스 Config에서 발표된 Figma Sites는 주목할 만한 신제품으로, 디자인 → 프로토타입 → 웹사이트 출판 단계를 하나의 툴 안에서 빠르게 해내는 것을 목표로 한다.
Figma Sites란 무엇인가?
Figma Sites는 Figma에서 디자인한 UI를 별도 코딩 작업 없이 그대로 실제 웹사이트로 변환하여 출판할 수 있게 해주는 올인원 도구다. 2025년 5월 열린 Config 2025 행사에서 공개된 이 제품은, 디자인과 개발 사이의 간극을 줄여 디자이너가 자신의 디자인을 직접 웹에 구현할 수 있도록 설계되었다. 기존에는 디자이너가 만든 시안을 개발자에게 전달하거나 Webflow, Framer 같은 별도 툴로 가져가서 웹 페이지를 제작해야 했지만, Figma Sites를 쓰면 이러한 과정의 많은 병목과 비효율을 해소할 수 있다.
요약하면 Figma Sites는 Figma 플랫폼 내에서 동작하는 웹사이트 디자인 및 게시 도구로서, Figma의 디자인 편집 기능, 프로토타이핑 기능, 거기에 웹 퍼블리싱 기능까지 통합한 새로운 워크플로우를 제공한다. 디자이너는 Figma Sites를 통해 자신의 디자인을 실제 동작하는 웹사이트 형태로 빠르게 만들어 공유할 수 있고, 초기 MVP나 프로토타입을 개발 리소스 없이도 현실에 가깝게 구현해볼 수 있다. Figma의 최고제품책임자(CPO) 유키 야마시타(Yuhki Yamashita)는 “Figma Site는 사이트의 모습이 확실히 정해져 있고 완벽한 통제를 원하는 마케팅·디자인 팀에 유용하다”고 설명하며, 실험적 프로토타이핑 도구인 Figma Make와 달리 완성도 높은 웹 제작에 초점을 맞춘 툴임을 강조했다.
주요 기능과 특징
Figma Sites는 디자이너가 신속하게 반응형 웹 UI를 구현하고 간편하게 인터랙션을 추가하여 원클릭으로 웹에 게시할 수 있게 해주는 다양한 기능을 제공한다. 주요 특징은 다음과 같다.
프로급 템플릿 제공:
처음부터 빈 화면에서 시작하지 않아도 된다. Figma Sites에는 전문 디자이너들이 제작한 웹사이트 템플릿들이 다수 제공되어, 몇 번의 클릭만으로 완성도 높은 기본 구조를 확보할 수 있다. 이벤트 페이지, 랜딩 페이지, 개인 포트폴리오, 비즈니스 소개 사이트 등 다양한 카테고리의 템플릿이 마련되어 있어, 자신의 용도에 맞는 템플릿을 골라 내용만 수정해 빠르게 결과물을 얻을 수 있다. 이 템플릿들은 Figma 커뮤니티에서 추가로 공유되기도 하며, Play Studio 등과 파트너십을 통해 지속적으로 늘어날 예정이다. 덕분에 웹 제작 경험이 적은 디자이너라도 손쉽게 시작할 수 있고, 숙련된 디자이너는 템플릿을 기반으로 시간을 절약하며 자신만의 커스텀 디자인을 입힐 수 있다.
Figma Site에서 제공하는 다양한 기본 템플릿들디자인 통합 및 라이브러리 활용:
기존 Figma Design 파일에서 작업한 디자인을 그대로 가져와 웹사이트로 활용할 수 있다. 별도의 마이그레이션 과정 없이 디자인을 복사/붙여넣기하여 Sites로 옮기면, 페이지 레이아웃부터 타이포그래피까지 모든 디테일이 유지된다. 또한 Figma에서 관리하던 컴포넌트 라이브러리와 스타일을 그대로 사용할 수 있어, 브랜드 일관성을 유지하면서도 재작업 없이 효율적으로 디자인을 전개할 수 있다.
기존에 작업하던 피그마 파일을 그대로 가져와서 사용하면 된다.반응형 레이아웃 지원:
다양한 기기와 화면 크기에 대응하는 반응형 웹 디자인 기능을 갖추고 있다. 데스크탑, 태블릿, 모바일 등 여러 뷰포트에 맞춰 중단점(Breakpoint)을 설정할 수 있고, 주요 화면에서 수정한 내용이 다른 화면 크기에도 자동 반영되는 멀티에디트 기능으로 일관성을 유지한다. 필요에 따라 특정 기기 사이즈별로 개별 조정도 가능해 손쉬운 반응형 튜닝이 가능하다. 이러한 기능 덕분에 어떤 화면에서 보더라도 완벽한 레이아웃을 손쉽게 구현할 수 있다.
기본적으로 반응형으로 제공되기 때문에 하나를 수정하면 전체적으로 수정 및 조율이 가능하다.인터랙션과 애니메이션 추가:
웹사이트에 생동감을 불어넣는 동적 인터랙션을 코드 없이 적용할 수 있다. 예를 들어 클릭, 호버 시의 애니메이션, 드래그 효과 같은 기본 상호작용을 미리 준비된 프리셋으로 손쉽게 넣을 수 있다. 또한 스크롤 시 패럴랙스 효과나 마키(marquee) 텍스트, 커스텀 커서, 타자 효과 등 다양한 시각적 효과도 클릭 몇 번으로 적용 가능하다. 이러한 인터랙션을 추가하면 즉시 HTML/CSS 기반 미리보기로 결과를 확인할 수 있어, 디자인 단계에서 곧바로 실제 동작을 검증할 수 있다.
각 버튼을 눌렀을 대 이동하는 인터랙션에 대한 설정도 가능하다.
기본적인 인터랙션을 걸어서 설정할 수 있다. 가운데 버튼에 마우스 hover 상태 테스트 이미지AI 및 코드 활용:
Figma Sites는 필요에 따라 직접 코드를 편집하거나 AI의 도움을 받을 수 있는 유연성도 제공한다. 디자이너가 코드 지식이 있다면 생성된 사이트의 코드를 열어 세부적으로 커스터마이징할 수 있으며, 복잡한 인터랙션이나 위젯도 직접 구현 가능하다. 한편 어디서부터 코딩을 해야 할지 막막하다면, AI가 코드를 자동 생성해주는 기능을 활용할 수 있다. 예를 들어 특정 인터랙션을 구현하고 싶을 때 프롬프트로 AI에게 요청하면 관련 코드를 생성해 사이트에 적용할 수 있고, 이후 필요하면 해당 코드를 직접 다듬는 식으로 사용할 수 있다. 이러한 프롬프트 투 코드(prompt-to-code) 기능은 디자이너가 코드를 몰라도 복잡한 기능을 시도해볼 수 있게 해주며, 동시에 개발자와의 협업 여지도 남겨두어 AI와 수동 편집의 장점을 모두 활용할 수 있게 한다.
Figma Make와 연동에서 프롬프트로 디자인 수정이 가능하고 해당 코드 작성도 해준다.원클릭 출판 및 공유:
디자인한 웹사이트는 Publish 버튼 한 번으로 실제 라이브 웹에 배포할 수 있다. 별도의 호스팅 설정이나 파일 내보내기 없이 Figma가 제공하는 호스팅을 통해 즉시 인터넷에 공개할 수 있기 때문에, 팀원이나 클라이언트에게 곧바로 결과물을 공유하여 피드백을 받을 수 있다. 또한 고유한 커스텀 도메인을 연결하는 기능도 지원해, 원하는 도메인 주소로 전문적인 웹사이트처럼 공개할 수 있다. (현재 베타 기간 중에는 요금제에 따라 커스텀 도메인 개수 제한 등이 있지만, 정식 출시 후에는 유연한 도메인 설정이 가능할 전망이다.)
개별 파일에서 바로 웹사이트로 출판할 수 있다.
실제 피그마에서 바로 출판한 웹사이트활용 사례와 사용 방법
이처럼 강력한 기능을 갖춘 Figma Sites는 다양한 상황에서 UX/UI 디자이너에게 유용한 도구로 활용될 수 있다. 몇 가지 대표적인 사례와 사용 방안을 살펴보자.
빠른 프로토타이핑과 MVP 제작:
스타트업이나 프로젝트 초기에 아이디어를 검증하기 위한 MVP(최소 기능 제품)나 프로토타입 웹사이트를 만들어야 할 때, Figma Sites가 큰 역할을 할 수 있다. 디자이너는 Figma에서 UI를 설계한 뒤, 개발자 도움 없이 즉시 동작하는 웹사이트로 게시하여 사용자 피드백을 수집하거나 내부 테스트를 진행할 수 있다. 예를 들어 어떤 행사 이벤트 페이지나 제품 소개 랜딩 페이지를 하루 이틀 만에 만들어야 한다면, Figma Sites에서 디자인과 동시에 바로 퍼블리싱까지 함으로써 시간을 절약하고 반복 수정에 빠르게 대응할 수 있다.
포트폴리오 및 개인 웹사이트:
UX/UI 디자이너에게 자신의 작품을 선보이는 포트폴리오 사이트는 매우 중요하다. Figma Sites는 템플릿 중 포트폴리오용 템플릿도 제공하며, 본인이 Figma로 작업한 디자인을 그대로 활용해 손쉽게 포트폴리오 웹사이트를 만들 수 있다. 별도로 웹 개발 지식이 없어도 클릭 몇 번으로 반응형 포트폴리오를 구축하고, 자신만의 도메인으로 공개할 수 있다는 점에서 디자이너 친화적인 웹 구축 방법이라 할 수 있다. 초급 디자이너도 익숙한 Figma 인터페이스에서 작업하듯 포트폴리오를 만들고 출판할 수 있으므로, 복잡한 코딩 없이도 프로 수준의 결과물을 얻을 수 있다.
디자인 시스템 실험 및 팀 협업:
Figma Sites는 Figma의 디자인 시스템과 통합되므로, 디자인 시스템을 실제 웹에서 시험해보는 용도로도 활용 가능하다. 디자인 팀이 새로운 UI 컴포넌트를 만들거나 리브랜딩을 진행할 때, 그것을 곧바로 웹에 적용해보며 인터랙션까지 포함해 미리보기할 수 있다. 팀 내 프로토타이핑 단계에서 개발 리소스 투입 없이도 거의 실제 같은 웹 환경을 만들어내므로, 디자이너와 이해관계자들이 더 풍부한 정보로 소통할 수 있다. 예를 들어, 스타일 가이드에 맞춘 컴포넌트들이 다양한 화면에서 잘 작동하는지 Figma Sites로 점검해보고, 문제가 발견되면 디자인 단계에서 수정하여 다시 게시하는 식의 신속한 피드백 루프를 구축할 수 있다.
한계와 향후 전망
Figma Sites는 많은 가능성을 열어주지만, 아직은 완벽한 만능 솔루션이라기보다는 초기 단계의 도구라는 점을 이해할 필요가 있다. 현재 베타 버전에서는 기본적인 정적 웹사이트 제작과 호스팅에 초점을 맞추고 있으며, 블로그나 대규모 콘텐츠 사이트에 필요한 CMS(콘텐츠 관리 시스템)는 구현되지 않은 상태다. Figma 측도 Sites에 CMS 기능을 곧 통합할 예정이라고 밝혔는데, 정식 버전에서는 블로그 포스트 등 콘텐츠를 관리하고 디자인 요소와 데이터(CMS 콘텐츠)를 바인딩하여 동적 콘텐츠 표시까지 지원하게 될 전망이다.
또한 SEO 최적화나 접근성, 퍼포먼스 튜닝 등 전문 웹개발 영역의 세부 조정에도 한계가 있을 수 있다. 코드 수정 기능이 있더라도, 웹 개발에 익숙하지 않은 디자이너가 모든 사항을 조정하긴 어려우므로 매우 특수한 기능 구현이나 최적화가 필요하면 개발자의 협력이 여전히 필요할 것이다. 그럼에도 불구하고 이러한 제약들은 시간이 지남에 따라 개선될 가능성이 높다. Figma 팀은 향후 Code Layers 기능을 통해 디자인을 React 코드로 변환하고 외부 라이브러리(NPM 패키지)도 활용할 수 있게 하는 등 개발자 친화적 업그레이드도 예고하고 있어, 장기적으로 보면 Figma Sites가 단순한 웹사이트 빌더를 넘어 디자인-개발 통합 플랫폼으로 발전할 여지가 크다.
Figma Sites는 AI 시대에 걸맞게 UX/UI 디자이너의 작업 방식을 재정의하는 흥미로운 도구다. 전문 디자이너에게는 디자인과 개발 사이의 장벽을 낮춰 창의적인 아이디어를 바로 웹으로 실현할 수 있는 수단을 제공하고, 초급 디자이너에게는 복잡한 코드 없이도 완성도 높은 웹 디자인 결과물을 만들어볼 기회를 준다. 아직 베타 단계이므로 완벽하지는 않지만, 현재도 프로토타입 제작부터 간단한 웹사이트 배포까지의 과정을 획기적으로 단축해주고 있으며, 추후 기능이 보강되면 활용 가치는 더욱 높아질 것이다.
Figma AI 기능들을 학습하고 AI-UI 디자인 자격증도 취득하고 싶다면?
https://onoffmix.com/event/329345
AI 디자이너들과 소통하며 성장하고 싶다면?
