벡터 그래픽

Relay는 Figma의 벡터 레이어를 Android의 벡터 드로어블로 변환하는 기능을 지원합니다.

다이어그램: 벡터 레이어에서 VectorDrawable, 이미지로

Relay는 Figma 벡터 레이어를 Scalable Vector Graphics(SVG)로 변환하고 이는 이후 벡터 드로어블로 변환됩니다. 벡터 드로어블은 XML 파일에서 연관된 색상 정보와 함께 점, 선, 곡선의 조합으로 정의되는 벡터 그래픽입니다. 생성된 코드에서 벡터 드로어블은 이미지 애셋처럼 사용됩니다.

Relay는 현재 다음과 같은 벡터 형식 속성을 지원합니다.

  • 모든 벡터 유형(직사각형, 선, 화살표, 타원형, 다각형, 별표, 일반 벡터)
  • 벡터 채우기(단색, 선형 그래디언트, 방사형 그래디언트)
  • 실선
  • 획 채우기(단색, 선형 그래디언트, 방사형 그래디언트)
  • 획 너비
  • 획 종료 스타일
  • 불투명도

제한사항

현재 지원되지 않는 벡터 관련 속성은 다음과 같습니다.

  • Android의 VectorDrawable 형식에서 지원되지 않는 기능:
    • 삽입된 비트맵 이미지(벡터가 아닌 이미지로 지원되는 직사각형 제외)
    • 파선
    • 블러
    • 그림자
    • 패턴
    • 마스크
    • 그룹 불투명도
    • 방사형 그래디언트 초점
  • SVG 형식에서 지원되지 않는 기능:
    • 각진 그래디언트
    • 다이아몬드 그래디언트
  • 벡터 객체 간의 불리언 연산(합집합/빼기/교집합/제외)
    • 해결 방법은 단일 벡터로 결합하고 평면화하는 것입니다.