소개
Introduction
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