从Figma迁移至Android时自定义图形显示不一致问题

我正在将Figma设计师提供的设计文件迁移至Android平台，仅保留了一个平行四边形图形。通过Figma的Inspect功能获取的Android代码，在Android Studio中显示的图形与Figma中不一致：Figma里的平行四边形右下角是倾斜的，而Android Studio中无倾斜效果。询问设计师得知，他仅将图形左下角和右下角的端点向右移动，但该倾斜效果未体现在导出的路径数据中。想了解Figma中是否有其他控制路径倾斜的参数可查看。

导出的Android代码 #

布局代码

<!-- Rectangle 3 -->
<View
    android:id="@+id/rectangle_3"
    android:layout_width="233.34dp"
    android:layout_height="51.38dp"
    android:layout_alignParentLeft="true"
    android:layout_marginLeft="74.95dp"
    android:layout_alignParentTop="true"
    android:layout_marginTop="62.77dp"
    android:background="@drawable/rectangle_3"
    android:elevation="20dp"
 />

Drawable文件（drawable/rectangle_3.xml）

<vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt"
    android:width="233.34dp"
    android:height="51.38dp"
    android:viewportWidth="233.34"
    android:viewportHeight="51.38"
 >

<group>

<clip-path
    android:pathData="M5 0H228.343C231.105 0 233.343 2.23858 233.343 5V46.3827C233.343 49.1441 231.105 51.3827 228.343 51.3827H5C2.23858 51.3827 0 49.1441 0 46.3827V5C0 2.23858 2.23858 0 5 0Z"
/>

<path
    android:pathData="M0 0V51.3827H233.343V0"
    android:fillColor="#FFFFFF"
/>

</group>

</vector>

效果对比 #

Figma中显示效果：

Android Studio中实际图形：

解决方案与排查方向 #

1. 检查Figma的变换参数

   • 选中目标图形，打开右侧「变换」面板，查看是否存在**倾斜（Skew）**属性值（X/Y轴的倾斜角度）。如果是通过倾斜变换实现的形状，Figma的Inspect可能不会将变换转换为路径数据。
   • 查看图形的「路径详情」，确认锚点坐标是否正确反映了倾斜后的平行四边形。若锚点已修改但导出异常，建议设计师将图形**Flatten（扩展）**后再导出，将变换效果固化为路径。

2. 手动修复Android矢量图

   • 修改路径数据：直接调整pathData为平行四边形的路径，比如根据Figma中的锚点偏移量调整：

     <path
         android:pathData="M0 0L233.343 0L253.343 51.3827L20 51.3827Z"
         android:fillColor="#FFFFFF"
     />
     

   • 使用倾斜变换：在group标签中添加android:skewX属性实现倾斜，角度根据实际效果调整：

     <group android:skewX="10"> <!-- 示例倾斜角度为10度 -->
         <path
             android:pathData="M0 0V51.3827H233.343V0"
             android:fillColor="#FFFFFF"
         />
     </group>
     

内容的提问来源于stack exchange，提问作者Ankit Jain