Figma sites VS Framer

Figma가 최근 Config 2025 행사에서 Figma sites를 공개했습니다. 디자인에서 퍼블리싱까지 한 번에 지원이 가능한 플랫폼이 된 것이죠. 아직은 베타버전으로 제공되며, Figma의 유료 플랜 사용자라면 Figma sites를 사용해볼 수 있습니다.

다만 디자인 기반 퍼블리싱으로는 Framer가 이미 널리 사용되고 있습니다. 이 글에서는 Figma Sites와 Framer의 기능, 요금, 사용자 경험 측면에서의 차이점을 짚어보고, 각각 어떤 상황에 더 적합한지 알아보겠습니다.

각 장점 비교

Framer의 강점

1. 성숙도: Framer는 웹 퍼블리싱 기술을 수년간 개발해왔으며, 안정성과 신뢰성을 확보하고 있습니다.
2. 전문성: 웹 퍼블리싱에 집중하여 고급 기능과 사용자 피드백을 반영한 최적화를 하고 있
3. CMS 기능: 이미 CMS 기능을 제공하고 있습니다. 플랫폼 내에서 글의 추가 및 편집이 가능하며, Notion, Spreadsheet와의 연동이 가능합니다.

Figma의 강점

1. 협업 기능: 업계 최고의 협업 기능을 웹사이트 제작에도 확장하여 팀 작업에 유리합니다.
2. 통합 워크플로우: 디자인에서 웹사이트 제작까지 도구를 전환할 필요 없이 한 곳에서 처리할 수 있습니다.
3. 상호작용 요소: 출시 초기부터 다양한 상호작용 기능을 제공하여 사용자 경험을 향상시킵니다.

사용 사례에 따른 추천

• Figma Sites – 이미 Figma를 사용하고 있는 디자이너나 팀에게 적합합니다. 디자인, 프로토타이핑, 퍼블리싱을 한 곳에서 처리할 수 있어 워크플로우가 간소화됩니다. Figma에서 제작한 간단한 디자인의 퍼블리싱을 추천합니다.
• Framer – 애니메이션, SEO 최적화, CMS 등 웹사이트 제작에 필요한 다양한 기능을 제공하므로, 더 복잡한 웹사이트나 마케팅 페이지를 제작하려는 경우에 적합합니다.

Figma sites: 향후 추가 예정 기능

추후 Content seat를 구매하면 Figma Buzz, Figma Sites CMS, Figma Slides, and FigJam까지 시트 당 월 $8–$25 정도에 판매 예정에 있다고 합니다.

• 콘텐츠 관리 시스템(CMS): Figma 내에서 콘텐츠를 관리하고 편집할 수 있는 CMS 기능이 곧 추가될 예정입니다.
• 코드 레이어: AI 채팅을 통해 상호작용 요소를 추가하고, 코드 레이어에서 재사용 가능한 컴포넌트를 생성하며, 디자인 시스템 라이브러리와 통합할 수 있는 기능이 예정되어 있습니다.

비용 비교

Figma Sites는 현재 베타 버전으로 제공되며, Figma의 전체 유료 플랜 사용자에게 제공됩니다. Figma의 요금제는 다음과 같습니다:

• Starter: 무료
• Professional: 월 $12~$16/사용자
• Organization: 월 $45/사용자
• Enterprise: 월 $75/사용자

추후 Content Seat를 추가로 구매 시 Figma Sites CMS, Figma Buzz, Figma Slides, FigJam 등의 기능을 사용할 수 있으며, 가격은 seat 당 월 $8~$25입니다.

Framer

Framer는 다양한 요금제를 제공하며, 주요 플랜은 다음과 같습니다:

• Free: 비상업적 사용에 적합
• Mini: 월 $5/사이트
• Basic: 월 $15/사이트
• Pro: 월 $30/사이트
• Business: 월 $60/사이트

각 플랜은 페이지 수, 방문자 수, CMS 컬렉션 수 등에 따라 차이가 있으며, 예를 들어 Pro 플랜은 최대 10,000페이지, 월 200,000명의 방문자, 10개의 CMS 컬렉션을 지원합니다 .

결론

Figma에서 디자인한 요소들은 Framer로 임포트가 가능하지만, 현재 Framer to Figma 변환은 불가하기 때문에 초반 퍼블리싱 툴 결정이 중요합니다. Figma sites의 경우 Figma의 협업 용이성과 호환성을 그대로 가져갈 수 있다는 장점이 있지만, 아직 베타 기능이므로 CMS, SEO 최적화 등의 기능을 사용하려면 Framer를 사용하거나 Figma sites의 기능 업데이트를 기다려야 하겠습니다.

TI Tech Lab 이유진 연구원

Source

• https://help.figma.com/hc/en-us/articles/31230436657815-Explore-Figma-Sites
• https://www.figma.com/pricing/?utm_source=chatgpt.com
• https://www.hxmzaehsan.com/blog/figma-sites