Figma & Tailwind 切图之字体渐变

如何在 Figma 中使用 Tailwind 对 字体渐变 进行切图

流程

1. 观察设计图

   原设计图OriginSvg.tsx

2. 先使用固定颜色切一个组件出来

   固定颜色FixedColorExample.tsx

   Solana链上的全能工具箱

3. 字体渐变使用 background-clip: text 实现, 需要先把背景色渐变切出来

   • 选中文字图层后, 在 Text colors 可以点击 Copy 复制出颜色: background: linear-gradient(309.61deg, #9A46FF 12.82%, #8196C5 48.44%, #1AFC9B 87.03%);

   • 在使用时, 将 background 改为 background-image, 然后转换为 Tailwind 的形式

   • 这里使用简单的方式: [background-image:linear-gradient(309.61deg,#9A46FF_12.82%,#8196C5_48.44%,#1AFC9B_87.03%)]

     背景渐变GradientBackgroundExample.tsx

     Solana链上的全能工具箱

4. 最后将文字图层放在背景图层上, 设置 background-clip: text 即可

   • 注意这里要将文字的 color 设置为 transparent, 不然会盖住背景

     文字渐变GradientColorExample.tsx

     Solana链上的全能工具箱

The End

欣赏图片