Vector Graphics

Relay supports the translation of Figma’s vector layers to Android’s vector drawables.

Diagram - Vector layers to VectorDrawable to Image

Relay converts Figma vector layers to Scalable Vector Graphics (SVG), which are then converted into vector drawables. A vector drawable is a vector graphic defined in an XML file as a set of points, lines, and curves with associated color information. In the generated code, the vector drawable is used like an image asset.

Relay currently supports the following vector format attributes:

  • All vector types (rectangle, line, arrow, ellipse, polygon, star, generic vector)
  • Vector fill (solid color, linear gradient, radial gradient)
  • Solid strokes
  • Stroke fill (solid color, linear gradient, radial gradient)
  • Stroke width
  • Stroke end style
  • Opacity

Limitations

Vector-specific attributes that are not currently supported are:

  • Features not supported by Android’s VectorDrawable format:
    • Embedded bitmap images (except rectangles, which are supported as images rather than vectors)
    • Dashed strokes
    • Blur
    • Shadow
    • Pattern
    • Mask
    • Group opacity
    • Radial gradient focal point
  • Features not supported by the SVG format:
    • Angular gradients
    • Diamond gradients
  • Boolean operations between vector objects (union / subtract / intersect / exclude)
    • A workaround is to combine and flatten into a single vector