Figma 디자인 접근성 플러그인
코드 한 줄 작성하기 전에 접근성 문제를 발견하세요. Figma에서 레이어를 선택하면 WCAG 명암비 및 터치 영역 크기 검사 결과를 즉시 확인할 수 있습니다. 업로드도, API 토큰도 필요 없습니다.
색상 명암비
반투명 채우기에 대한 알파 합성을 포함한 WCAG AA/AAA 명암비 계산입니다. 상위 프레임까지 거슬러 올라가 실제 배경을 찾으며, 웹 스캐너와 동일한 공식을 사용합니다.
터치 영역 크기 (WCAG 2.5.8)
프로토타입 클릭 또는 탭 반응이 설정된 노드 중 최소 크기인 24×24px보다 작은 인터랙티브 요소를 표시합니다.
아직 Figma 커뮤니티 마켓플레이스에 등록되지 않음. 플러그인은 완전히 작동하지만, 아직 마켓플레이스에 게시되지 않았습니다. 그동안은 아래 단계에 따라 소스에서 직접 설치해 주세요.
소스에서 설치하기
- 1
소스 다운로드
AccessiSight 저장소를 클론하거나 packages/figma-plugin 폴더를 다운로드하여 컴퓨터에 저장하세요.
- 2
Figma의 플러그인 개발 메뉴 열기
Figma 데스크톱 앱에서 Menu → Plugins → Development → Import plugin from manifest…로 이동하세요.
- 3
manifest 선택하기
다운로드한 packages/figma-plugin 폴더 안에 있는 manifest.json 파일을 선택하세요.
- 4
선택 항목에서 실행하기
파일에서 텍스트 또는 인터랙티브 레이어를 선택한 다음, Plugins → Development에서 AccessiSight를 실행하세요. 선택 항목을 변경하면 문제가 즉시 표시됩니다.