CSS Color Importer
CSS 색상을 Framer 색상 스타일로 변환하는 강력한 플러그인으로, 디자인 토큰을 유지하며 색상 추출과 가져오기를 간편하게 지원합니다.
CSS 색상 시스템을 Framer 색상 스타일로 변환해주는 강력한 플러그인으로, 디자인 토큰을 보존하면서 즉시 접근할 수 있게 합니다.
CSS Color Importer란?
CSS Color Importer는 CSS 워크플로우와 Framer 디자인 시스템 사이의 간극을 메워줍니다. 색상을 추출하고 가져오면서 의미와 구조를 유지합니다.
주요 기능
스마트 색상 감지: CSS 파일에서 모든 색상 값을 자동으로 식별하고 추출
다크 모드 지원: 미디어 쿼리, CSS 클래스, 데이터 속성을 통해 라이트/다크 모드 변형 처리
유연한 입력 방식: CSS 파일 업로드 또는 CSS 내용 직접 붙여넣기 지원
지능형 파싱: hex, RGB, HSL, 이름 지정 색상, 폴백이 있는 CSS 변수를 지원
스마트한 정리: 접두어별로 색상을 그룹화하고 네이밍 규칙을 유지
사용자 맞춤 옵션: 라이트/다크 변형을 병합하거나 별도로 유지 선택 가능
선택적 가져오기: Framer 프로젝트에 가져올 색상을 정확히 선택 가능
설정 저장: 향후 가져오기를 위해 사용자의 선호 설정을 기억
사용 방법
Framer Marketplace에서 플러그인을 설치
CSS 파일 업로드 또는 CSS 내용 붙여넣기
추출된 색상과 라이트/다크 변형 미리보기
접두어 제거, 변형 병합 등 옵션 설정
가져올 색상 선택
즉시 Framer 색상 스타일로 가져오기
이 플러그인을 사용해야 하는 이유
색상 시스템을 처음부터 다시 만들 필요가 없습니다. 이 플러그인은 기존 CSS 색상을 Framer의 네이티브 색상 스타일로 지능적으로 변환하여 수많은 디자인 작업 시간을 절약합니다.
이 플러그인은 다음과 같은 유저에게 적합합니다.
기존 프로젝트를 Framer로 마이그레이션하는 디자이너
플랫폼 전반에 걸쳐 일관된 색상 시스템을 유지하는 팀
Framer에서 CSS 변수를 사용하려는 개발자
기존 디자인 시스템이나 구성 요소 라이브러리를 사용하는 모든 사람
지원되는 CSS 기능
색상 형식: Hex (#RGB, #RRGGBB, #RRGGBBAA), RGB/RGBA, HSL/HSLA, 지정된 색상
CSS 변수:
var(--color-name)폴백 지원 포함다크 모드:
@media (prefers-color-scheme: dark),.dark-mode,[data-theme="dark"]네이밍 규칙: 접두어 제거 설정 가능 (예: Tailwind 색상에서 "tw-" 제거)
Explore More Plugins