Figma Sites: 피그마 디자인에서 바로 웹사이트로!

https://help.figma.com/hc/en-us/articles/31230436657815-Explore-Figma-Sites

Figma Sites란?

Figma Sites는 Config 2025에서 발표된 새로운 제품으로, 디자이너가 Figma에서 작업한 디자인을 코드 작성 없이 직접 웹사이트로 변환하고 배포할 수 있게 해주는 도구입니다. 자세한 내용을 살펴보겠습니다.

핵심 개념과 목적

Figma Sites는 디자인과 개발 사이의 간극을 없애기 위해 만들어졌습니다. 많은 디자이너들이 Figma에서 웹사이트를 디자인한 후, 개발자에게 전달하거나 다른 도구로 옮겨 실제 구현하는 과정에서 많은 병목과 비효율이 발생했습니다. Figma Sites는 이 과정을 간소화하여 디자인을 그대로 실제 웹사이트로 만들 수 있게 해줍니다.

주요 기능

1. 디자인 통합

• 기존 디자인 활용: Figma Design에서 작업한 디자인을 복사하여 바로 Sites로 가져올 수 있습니다.
• 라이브러리 호환: 기존 Figma 컴포넌트 라이브러리를 그대로 사용할 수 있어 일관된 디자인 시스템 유지가 가능합니다.

2. 반응형 디자인

• BreakPoints 지원: Desktop, Tablet, Mobile 등 다양한 디바이스 크기에 맞춘 디자인을 한 번에 관리할 수 있습니다.
• Multi-edit 기능: 주요 뷰포트에서 수정한 내용이 자동으로 다른 뷰포트에도 반영되어 일관성을 유지합니다.
• 선택적 수정: 필요한 경우 특정 뷰포트만 별도로 수정할 수도 있습니다.

3. 인터랙션 및 애니메이션

• 프리셋 인터랙션: Hover, 클릭 애니메이션, 드래그 효과 등을 복잡한 코딩 없이 쉽게 적용할 수 있습니다.
• 다양한 효과: Scroll transforms, 커스텀 커서, 마키(marquee), 타이프라이터 효과 등 다양한 시각적 효과를 지원합니다.
• 실시간 미리보기: 인터랙션을 추가하면 즉시 HTML/CSS 기반 미리보기로 동작을 확인할 수 있습니다.

4. 즉시 배포 시스템

• 원클릭 퍼블리싱: Publish 버튼으로 즉시 웹사이트를 라이브로 배포할 수 있습니다.
• 커스텀 도메인: 자신의 도메인을 연결하여 전문적인 웹사이트를 구축할 수 있습니다.
• 반응형 퍼블리싱: 배포된 사이트는 모든 디바이스에서 반응형으로 작동합니다.

향후 추가 예정 기능

1. CMS(콘텐츠 관리 시스템)

• 콘텐츠 데이터베이스: 블로그 포스트, 기사 등 콘텐츠를 구조화하여 관리할 수 있습니다.
• 데이터 바인딩: 디자인 요소와 CMS 콘텐츠를 연결하여 동적 웹사이트 구축이 가능합니다.
• 간편한 편집 인터페이스: 캔버스에서 직접 또는 전용 CMS 패널에서 콘텐츠를 쉽게 편집할 수 있습니다.

2. Code Layers

• React + Tailwind 변환: 디자인을 React 및 Tailwind CSS 코드로 자동 변환합니다.
• 코드 커스터마이징: 자동 생성된 코드에 직접 커스텀 코드를 추가할 수 있습니다.
• NPM 패키지 지원: 외부 라이브러리 및 패키지를 활용할 수 있습니다.
• 상태 관리: 커스텀 훅과.상태 관리 기능을 활용한 복잡한 인터랙션 구현이 가능합니다.

활용 사례

Figma Sites는 이미 알파/베타 테스터들에 의해 다양한 용도로 활용되고 있습니다:

1. New Layers 컨퍼런스 사이트: Bruno Figueiredo가 컨퍼런스 공식 웹사이트를 Figma Sites로 제작했습니다.
2. 폰트 샘플 사이트: Figma의 Story Studio 팀이 커스텀 폰트와 스펙 사이트를 제작했습니다.
3. 포트폴리오: ReadCV와 협력하여 포트폴리오 템플릿을 개발 중입니다.
4. 마케팅 랜딩 페이지: 빠른 MVP 테스트나 마케팅 캠페인 페이지 구축에 활용됩니다.

템플릿과 리소스

Figma는 Play Studio와 파트너십을 맺고 다양한 웹사이트 템플릿을 개발했습니다. 이 템플릿들은 Figma Community를 통해 접근하거나 새 사이트 생성 시 시작점으로 활용할 수 있습니다. 이는 웹사이트 제작 경험이 없는 사용자나 빠르게 시작하고 싶은 사용자에게 유용한 리소스가 될 것입니다.

가용성 및 가격 정책

• 현재 상태: 베타 버전으로 (2025년 5월)부터 출시
• 접근성: 유료 플랜의 전체 시트 사용자에게 제공되며, 스타터 플랜 사용자에게는 향후 제공 예정
• 베타 이후 가격: 베타 종료 후 호스팅, 커스텀 도메인, 대역폭 요구사항이 많은 사용자에게는 추가 비용이 발생할 예정

Figma Sites와 다른 제품과의 통합

Figma Sites는 다른 Figma 제품들과 긴밀히 연동됩니다:

1. Figma Design: 디자인을 그대로 가져와 웹사이트로 변환
2. Figma Make: Make로 생성한 인터랙티브 컴포넌트를 Sites에서 직접 활용 가능
3. 컴포넌트 라이브러리: 기존 디자인 시스템과 컴포넌트를 그대로 활용

 

결론

Figma Sites는 디자인과 개발 사이의 간극을 메우는 우리가 기다렸던 소식인 것 같아요.
그동안 웹플로우나 프레이머로 연동하여 아쉬운 부분들에 대해 해소 될 것을 기대합니다.
코드 지식 없이도 전문적인 웹사이트를 구축할 수 있고, 디자이너가 의도한 디자인을 그대로 구현할 수 있어 디자인-개발 워크플로우를 크게 개선할 것으로 기대됩니다. 
CMS가 아직 안되서 복잡한 사이트는 어렵겠지만, 얼마나 안정적일지가 관건인 것 같아요.
이제 웹플로우나 프레이머에 비해 얼마나 더 발전할 것인지 매우 기대가 됩니다. 

매년 Config때마다 신기술을 발표하는 피그마, 아직 베타 버젼인데도 이런식으로 먼저 런칭하고, 유료 사용자에게 먼저 사용하게 하는 방식을 매년 쓰고 있는데, 이럴 때마다 교육용이나 무료 버젼도 괜찮은데, 이런 새로운 것을 쓰고 싶어서 유저들로 하여금 유로 버젼으로 전환하게 유도하는 것 같다고 느껴집니다. 작년에도 AI 기능도 순차적으로 풀었던 것처럼, 이번에 출시한 제품들도 너무 매력적이네요.

https://help.figma.com/hc/en-us/articles/31230436657815-Explore-Figma-Sites

Explore Figma Sites