시작하기 전에
이 기능을 사용할 수 있는 사람
Figma Make는 유료 요금제의 풀 시트에서 사용할 수 있습니다.
다른 시트와 요금제에서 Figma Make를 사용해 볼 수 있습니다.
스타일 컨텍스트를 기존 Figma 라이브러리에서 Figma Make로 가져와 작동 가능한 프로토타입 및 웹 앱의 모양과 느낌을 일관성 있게 만들 수 있습니다. 이 작업을 하면 Figma Make가 해당 라이브러리에서 스타일링 CSS를 추출합니다.
스타일 컨텍스트를 라이브러리에서 Figma Make로 가져오려면 두 단계를 거쳐야 합니다.
- Figma Design에서 라이브러리를 내보냅니다.
- Figma Make 파일에서 라이브러리를 선택합니다. 그다음 내보낸 스타일을 편집하고 가이드라인을 추가하여 Figma Make 파일을 더 자세히 사용자 정의할 수 있습니다. 이렇게 하면 Figma Make가 추출된 스타일을 어떻게 사용할지에 집중할 수 있습니다.
1단계: Figma Make에서 스타일 컨텍스트로 사용할 Figma Design 라이브러리 내보내기
Figma Design에서 Figma Make 파일의 스타일 컨텍스트로 사용할 라이브러리를 선택하세요. 라이브러리에 편집 가능 권한이 있는 사람만 Figma Make로 내보낼 수 있습니다. 이 단계는 회원님 및 다른 사람들이 Figma Make에서 사용하기 전에 한 번만 수행하면 됩니다.
- Figma Make에 내보내려는 에셋이 포함된 Figma Design 파일에서 왼쪽 사이드바의 에셋 탭을 선택합니다.
- 라이브러리를 클릭합니다.
- 이 파일 섹션에서 현재 파일을 찾은 후 게시하기를 클릭하여 라이브러리 게시 모달을 엽니다.
- 이전에 라이브러리를 팀, 작업공간 또는 오거니제이션에 게시한 적이 없다면, 모달 하단의 게시하기를 클릭합니다. 게시된 라이브러리만 Figma Make로 내보낼 수 있습니다. 이 과정은 몇 분 정도 걸릴 수 있습니다.
-
Make용으로 내보내기를 클릭합니다.
내보내기 프로세스를 완료하는 데 몇 분이 걸릴 수 있습니다. 이 과정에서 Figma는 Figma Make에서 참조할 CSS 파일을 생성하고 내보냅니다.
- 내보내기 프로세스가 완료되면 Figma Make로 이동을 클릭합니다.
라이브러리를 추출한 후 Figma Make 파일에서 선택하고 코드 보기로 이동합니다. 거기에서 스타일 폴더를 열고 globals.css를 클릭하여 생성된 스타일을 탐색합니다. 보통 스타일은 네 가지 카테고리로 나뉩니다.
- 색상 팔레트
- 타이포그래피(글꼴 및 계층 구조)
- 변수
- 테두리와 모서리 반경
추출된 CSS는 전체 CSS 라이브러리의 간소화된 버전이라는 점을 명심하세요. 모든 디자인 디테일이 들어 있지는 않을 것입니다. 일관적이고 명확하게 만들려면 guidelines.md 파일에 더 자세한 컨텍스트와 규칙을 추가하는 것이 좋습니다.
Figma Make는 현재 디자인 토큰의 완전한 추출을 지원하지 않습니다. 대신, 변수의 일부를 가져와 원시 값으로 글로벌 CSS 파일을 생성합니다. 즉 변수 구문은 정의된 대로 정확히 보존되지 않습니다. 변수가 단일 .css 파일에 반영된 단순화된 보기가 1:1 매핑 대신 생성됩니다. 이 기능은 생성된 코드와 기본 스타일이 일치하는 데 도움이 됩니다.
특히 상태와 관련된 추가 규칙이나 매개변수가 있다면 시스템 전체의 일관성을 유지할 수 있도록 guidelines.md 파일에 문서화하는 것을 권장합니다.
한 번에 하나의 라이브러리만 사용할 수 있습니다. 오거니제이션이 여러 라이브러리에서 디자인 시스템을 관리하는 경우, 핵심 컴포넌트와 가장 기본적인 스타일을 포함하는 라이브러리를 선택하는 것이 좋습니다. Figma Make로 내보내도 컴포넌트 자체는 추출되지 않지만, 이 라이브러리는 속성 내에서 컨텍스트로 사용될 색상과 타이포그래피를 참조할 가능성이 큽니다.
아니요. 라이브러리를 Figma Make로 한 번만 내보내면 됩니다. 오거니제이션 내 해당 라이브러리에 열람 가능 권한이 있는 모든 사용자는 라이브러리를 본인의 Figma Make 파일에서 사용할 수 있습니다.
예. 누군가 디자인 라이브러리를 편집하고 Figma Make에서 업데이트된 버전을 사용하려면 라이브러리를 다시 내보내야 합니다. 다시 내보낸 Figma Make 라이브러리는 향후 Figma Make 파일에만 업데이트되며, 업데이트 이전에 생성된 Figma Make 파일에는 업데이트 내용이 적용되지 않습니다.
2단계: Figma Make 파일에서 라이브러리 참조
라이브러리의 스타일 컨텍스트를 Figma Make에 추가하면 회원님 및 팀이나 오거니제이션에 속한 사람들이 이를 사용하여 스타일이 적용된 작동 가능한 프로토타입과 웹 앱을 만들 수 있습니다. 팀 또는 오거니제이션 내에서 열람 가능 권한을 가진 사람은 누구나 본인의 Figma Make 파일 내에서 이 라이브러리를 보고 사용할 수 있습니다.
- Figma Make 파일에서 라이브러리 선택을 클릭합니다.
- 어떤 라이브러리를 사용할지 선택합니다.
즉시 프롬프트를 시작하거나, 라이브러리 스타일을 편집하거나 가이드라인을 추가하여 Figma Make가 라이브러리 스타일을 사용하는 방식을 더 자세히 사용자 정의하세요. 라이브러리를 선택하고 프롬프트를 시작하면, 이 파일에 생성된 모든 콘텐츠는 그 스타일을 참조합니다.
팁: Figma Design 라이브러리를 참조하면 Figma Make 스타일 컨텍스트를 활용하여 아이디어를 탐구하고 작동 가능한 프로토타입과 웹 앱을 만들 수 있습니다. 더 구체적으로 만들려면 다음을 시도해 보세요.
라이브러리 스타일 편집
Figma Design 라이브러리를 Figma Make로 내보내면, 라이브러리의 속성에 대한 CSS 파일이 자동으로 생성됩니다. 필요에 따라 CSS를 사용자 지정하여 Figma Make를 원하는 대로 구성할 수 있습니다. CSS 변경 사항은 이 Figma Make 파일에만 영향을 미칩니다.
- 버튼을 클릭합니다.
- 스타일 편집을 선택하여 이 라이브러리의 CSS 속성을 업데이트합니다.
생성을 위한 가이드라인 추가
가이드라인을 사용하면 Figma Make에 스타일 컨텍스트 사용 규칙이나 지침을 제공할 수 있습니다. 지침은 이 파일에서 만든 항목에만 적용되며, 이 라이브러리나 라이브러리 자체를 참조하는 다른 파일에는 영향을 미치지 않습니다.
- 버튼을 클릭합니다.
- 가이드라인 편집을 선택하여 이 Figma Make 파일에 가이드라인을 추가합니다.
guidelines.md 파일은 자유 형식의 텍스트 파일이므로 Figma Make가 따르도록 원하는 특정 지침을 추가할 수 있습니다.
팁: guidelines.md 파일은 라이브러리를 선택하지 않더라도 사용할 수 있으므로 필요에 따라 Figma Make 파일을 원하는 대로 구성할 수 있습니다.
열람 가능 권한이 라이브러리에서 제거되면 어떻게 되나요?
이전에 특정 라이브러리에 열람 가능 권한이 있었던 사용자가 해당 권한이 취소된 경우, Figma Make 내에서 해당 라이브러리를 보거나 사용할 수 없게 됩니다. 하지만 해당 라이브러리로 만든 이전 Figma Make 파일은 여전히 사용할 수 있으며, 라이브러리 이름은 '알 수 없음'으로 표시됩니다.
아니요. CSS 스타일이나 가이드라인의 업데이트는 해당 Figma Make 파일에만 영향을 미칩니다.
자주 묻는 질문
아니요. 현재는 Figma Make에서 프롬프트로 사용된 Figma Design 라이브러리를 삭제할 수 없습니다.
라이브러리를 참조하여 생성 작업을 시작하면, 해당 라이브러리를 제거할 수 없습니다. 다른 라이브러리를 사용하거나 특정 라이브러리의 사용을 중단하려면 새로운 Figma Make 파일을 만들고 생성 작업을 시작하세요.