Figma 로컬 변수 파일 - Tailwind CSS 기본 스타일 기반
이 파일은 Tailwind CSS의 기본 스타일을 기반으로 한 Figma 로컬 변수 세트를 제공합니다. 포함 항목은 다음과 같습니다:
- Colors
- Spacing scale (Margin, Padding, Gap)
- Breakpoints
- Font sizes
- Border radius
이 파일을 통해 Figma 프로젝트에서 Tailwind 스타일의 디자인을 손쉽게 적용할 수 있습니다.
변수명은 직관적인 사용을 위해 Tailwind 클래스명과 최대한 유사하게 작성되었으며, Figma 네이밍 제약으로 인해 일부 수정이 있습니다(예: 점(.) 대신 쉼표(,) 사용). 이러한 방식을 통해 클래스명 추출을 위한 외부 플러그인 없이도 Tailwind 속성을 바로 활용할 수 있습니다.
이 변수들을 사용하면 Figma 디자인과 Tailwind CSS 구현 간의 일관성을 유지할 수 있어, 디자인-개발 워크플로우가 한층 개선됩니다. 이 파일은 좋은 출발점이 되며, 프로젝트의 특정 요구사항에 맞게 변수를 커스터마이징하여 사용하시면 됩니다.
This file provides a set of local variables in Figma based on Tailwind CSS's default styles. It includes:
- Colors
- Spacing scale (Margin, Padding, Gap)
- Breakpoints
- Font sizes
- Border radii
You can easily apply Tailwind-style designs in your Figma projects by copying this file.
Variable names closely mirror Tailwind class names for intuitive use, with minor modifications (e.g., commas instead of dots) due to Figma naming constraints. This approach enables direct use of Tailwind properties without relying on external plugins for class name extraction.
By using these variables, you can seamlessly align your Figma designs with Tailwind CSS implementations, enhancing your design-to-development workflow. The file serves as a great starting point, customizing variables as needed to meet your project's specific requirements.