Figma Sites에서 디자인 도구 사용 – Figma Learn - 도움말 센터

Figma Sites는 Config 2025에서 오픈 베타로 출시되었습니다. 현재 모든 유료 요금제에서 사용할 수 있으며, 곧 스타터 요금제에서도 제한적으로 사용할 수 있게 될 예정입니다. 베타 버전에 포함된 내용을 자세히 알아보세요.

이 기능을 사용할 수 있는 사용자

파일에 대한 편집 액세스 권한이 필요합니다.

Figma Sites를 사용하면 Figma Design의 강력한 도구를 활용하여 웹사이트를 만들고 게시할 수 있습니다.

Figma Sites에서 디자인 생성하기

Figma Sites에서 작업할 때, 웹페이지 내에서 직접 디자인하거나 캔버스를 아이디어를 탐색하는 공간으로 활용할 수 있습니다.

디자인 요소 만들기. 디자인 파일에서처럼 프레임, 도형, 텍스트 등 디자인 요소를 파일에 추가하는 것으로 시작합니다.
반응형으로 만들기. 오토레이아웃과 제약조건을 사용하여 사이트를 다양한 화면 크기에 맞게 조정합니다.
디자인 요소 재사용하기. 컴포넌트, 스타일 또는 변수를 만들거나 라이브러리의 기존 에셋을 사용하여 사이트의 일관성을 유지합니다.
라이브러리 게시하기. 컴포넌트, 스타일 또는 변수를 공유하여 다른 파일에서 사람들이 액세스할 수 있도록 합니다.
인터랙티브 요소 추가하기. Figma Design에서 프로토타입을 만들듯이, 인터랙션을 사용하여 디자인 요소에 움직임과 애니메이션을 추가합니다.

웹페이지에 디자인을 추가한 후에는 코딩할 필요 없이 미리보고 게시할 수 있습니다.

일반적으로 Figma Design과 Figma Sites 간 작업은 원활하고 문제 없이 진행되어야 합니다.

디자인은 두 제품에서 동일하게 표시되며, 더 복잡한 기능은 두 제품 간에 자동으로 변환됩니다. 예를 들어, Figma Design에서의 프로토타입 연결은 Figma Sites에서 해당 인터랙션으로 자동 변환됩니다.

Figma Sites에서 디자인할 때, Figma Design에서 제공하는 대부분의 기능에 액세스할 수 있습니다. 아래 링크에서 각 기능의 사용 방법에 대한 설명서를 찾을 수 있습니다.

	Figma Design에서 사용 가능	Figma Sites에서 사용 가능
프레임	✓	✓
도형	✓	✓
이미지	✓	✓
텍스트	✓	✓
Google Fonts	✓	✓
사용자 지정 글꼴	✓	컴퓨터에 설치된 사용자 지정 글꼴은 현재 Figma Sites에서 사용할 수 없지만, 향후 제공될 예정입니다.
벡터 개체	✓	✓
벡터 경로 편집(불리언 연산 포함)	✓	✓
마스크	✓	✓
개체 일괄 편집	✓	Figma Sites에는 여러 중단점에 걸쳐 편집할 수 있는 추가 기능이 있습니다.
위젯 및 플러그인	✓	현재는 이용할 수 없지만, 향후 제공될 예정입니다.
Dev Mode	✓	X
그리기 도구	✓	X
브랜치	✓	X
파일 버전 기록	✓	✓
AI 도구	✓	Figma Design과 일부 기능을 공유합니다. 자세히 알아보기.
액션 메뉴	✓	✓
섹션	✓	섹션에는 디자인을 포함할 수 있지만 웹페이지는 포함할 수 없습니다.
웹페이지	X	✓
중단점	X	✓
주석	✓	X
프로토타입 만들기	✓	X
인터랙션	X	✓

	Figma Design에서 사용 가능	Figma Sites에서 사용 가능
댓글	✓	✓
스포트라이트	✓	스포트라이트는 Make 또는 Settings(설정)와 같은 전체 화면 보기에서 사람을 따라가지 않습니다.
오디오 통화	✓	X

	Figma Design에서 사용 가능	Figma Sites에서 사용 가능
컴포넌트	✓	Figma Design에서와 같이 컴포넌트를 만들고 관리할 수 있습니다. 웹페이지에서는 인스턴스만 사용할 수 있습니다.
변형이 있는 컴포넌트	✓	✓
스타일	✓	✓
중단점이 있는 텍스트 스타일	X	✓
변수	✓	✓
파일에 라이브러리 추가	✓	✓
라이브러리 게시	✓	✓
웹에 게시하기	X	✓
커뮤니티에 게시하기	✓	X