Figma Sites 살펴보기
Figma Sites는 Config 2025에서 오픈 베타로 출시되었습니다. 현재 모든 유료 요금제에서 사용할 수 있으며, 곧 스타터 요금제에서도 제한적으로 사용할 수 있게 될 예정입니다. 베타 버전에 포함된 내용을 자세히 알아보세요.
Figma Sites란 무엇인가요?
Figma Sites를 사용하면 한 곳에서 고품질 웹사이트를 디자인하고, 프로토타입을 제작하며, 게시할 수 있습니다.
- 모든 화면 크기에 맞는 아름다운 반응형 레이아웃을 만들 수 있습니다.
- 프레임, 오토레이아웃, 도형, 반응형 컴포넌트 등 Figma 디자인에서 익숙한 디자인 툴을 그대로 사용할 수 있습니다.
- Figma Design과 Figma Sites 간에 원활하게 복사하고 붙여넣을 수 있습니다.
- 마키 스크롤, 사용자 지정 커서, 호버 효과 등 손쉽게 사용할 수 있는 인터랙션 및 애니메이션으로 사이트를 생동감 있게 만들 수 있습니다.
- 공동작업자와 실시간 웹사이트를 공유하여 아이디어를 탐색하고, 사용성을 테스트하며, 작업을 계속 진행할 수 있습니다.
팁: https://figma.com/site/new를 즐겨찾기에 추가하세요. 영감이 떠오를 때마다 새로운 Figma Sites 파일을 언제든지 손쉽게 사용할 수 있습니다!
방법 알아보기
왼쪽 탐색 표시줄 및 사이드바
왼쪽 탐색 표시줄을 사용하면 Figma Sites에서 작업 간에 빠르게 전환할 수 있습니다.
- File(파일): 이 보기는 작업이 이루어지는 곳입니다. 파일에서 전체 웹페이지 및 레이어 목록을 확인할 수 있으며, 준비가 되면 사이트를 게시할 수 있습니다.
- Insert(삽입): 탐색 표시줄, 바닥글, 웹페이지 템플릿, 임베드와 같은 미리 만들어진 요소를 추가하고 디자인 라이브러리에 액세스합니다.
- Search(검색): 디자인에서 요소를 신속하게 찾습니다.
- Make: 코드 레이어를 사용하여 아이디어와 디자인을 구현합니다. (곧 출시됩니다!)
- CMS: 사이트의 콘텐츠를 생성하고 관리합니다. (곧 출시됩니다!)
- Settings(설정): 검색 엔진이 콘텐츠를 이해하고, 접근성을 개선하며, 사용자가 원하는 것을 더 쉽게 찾을 수 있도록 웹사이트 설정을 업데이트합니다.
툴바
도구 모음에는 사이트를 만드는 데 필요한 모든 도구가 들어 있습니다.
- 웹페이지, 프레임, 이미지, 텍스트, 도형과 같은 개체를 추가합니다.
- Actions(액션) 메뉴에서 Figma AI 도구에 액세스할 수 있습니다.
팁: Figma Design에서 디자인 작업을 해본 적이 있다면 Figma Sites에서 작업하는 것도 매우 익숙하게 느껴질 겁니다. Figma Sites에서 사용할 수 있는 디자인 도구 목록을 확인하세요.
오른쪽 사이드바
오른쪽 사이드바에서는 캔버스나 웹페이지의 디자인 요소의 모양과 느낌을 제어할 수 있습니다.
캔버스에서 개체를 선택하면 그 속성이 Design(디자인) 탭에 표시됩니다.
파일에 대한 권한(편집 또는 보기 전용)에 따라 오른쪽 사이드바에서 볼 수 있는 항목과 수행할 수 있는 작업이 결정됩니다.
애니메이션, 전환, 시각 효과를 추가하여 사이트에 생동감을 더하세요.
버튼에 미묘한 호버 애니메이션을 추가하거나, 시차 효과로 깊이와 움직임을 더하거나, 사용자 액션에 의해 발생되는 흥미로운 효과를 통해 인터랙션은 웹페이지를 더 반응적이고 생동감 있게 만들어 줍니다.
웹사이트 구축
기존 디자인으로 시작하기
Figma Sites를 처음부터 시작하지 않고도 빠르게 시작할 수 있는 몇 가지 방법이 있습니다.
템플릿으로 시작
모든 새 파일은 템플릿 선택기와 함께 열립니다.
이러한 템플릿을 비롯한 더 많은 템플릿은 파일 브라우저의 Templates and tools(템플릿 및 도구)에서도 사용할 수 있습니다.
Figma Design에서 복사하여 붙여넣기
디자인을 가져와 복사하여 웹페이지에 바로 붙여넣거나 기존 디자인 라이브러리를 통해 액세스하세요.
블록을 사용하여 사이트를 구성하기
랜딩 페이지, 머리글, 바닥글, 사용자 지정 가능한 섹션 등 사전 제작된 블록을 드래그 앤 드롭하여 사이트를 빠르게 구성할 수 있습니다.
반응형으로 제작하기
Figma Sites는 다양한 화면 크기에 맞춰 픽셀 단위로 정밀한 레이아웃을 만들 때 많은 제어권을 제공합니다.
웹페이지 추가하기
새 사이트를 만들면 회색 컨테이너가 표시됩니다. 이것은 웹페이지입니다. 각 웹페이지에는 이름, 미리보기 버튼, 그리고 새로운 중단점을 추가하는 방법이 있습니다.
도구 모음에서 Webpage(웹페이지) 아이콘을 클릭하여 새 웹페이지를 추가합니다.
중단점 추가하기
중단점은 다양한 화면 크기의 요구에 맞게 웹페이지 레이아웃이 변경되는 특정 화면 너비를 정의합니다.
중단점을 추가하면 웹페이지의 모양과 느낌을 세밀하게 조정하고 여러 기기에서 사용자 경험을 최적화할 수 있습니다.
여러 중단점에 걸쳐 편집하기
웹페이지에 여러 개의 중단점이 있는 경우, 모든 중단점에서 동시에 개체를 추가, 선택, 편집할 수 있습니다.
작업 미리보기
준비가 완료되면 사이트를 미리 보고 사용자 입장에서 직접 경험해 보세요. 게시하지 않고도 애니메이션, 인터랙션, 반응성을 빠르게 확인할 수 있는 좋은 방법입니다. 웹페이지에서 Preview(미리보기) 아이콘을 탭하거나 Shift Space 키보드 단축키를 눌러 인라인 미리보기를 열기만 하면 됩니다.
전 세계와 공유
사이트를 게시하는 것은 사이트를 전 세계와 공유하기 전 마지막 단계입니다.
게시한 후에는 사이트를 변경하고, 웹페이지를 추가 또는 제거하고, 사용자 지정 도메인을 연결할 수 있습니다.