如何在 Figma 中创建像素完美的 UI 组件（然后在 React 中构建它们）

Source: Dev.to

快速检查清单

• 打开像素网格 – View → Pixel Grid
• 使用帧（而非组） – 帧提供约束、网格和自动布局支持。
• 启用布局网格 – 采用 8 pt 间距系统（8、16、24、32…）。
• 使用自动布局。
• 创建样式
  • 颜色样式
  • 文本样式
  • 效果（阴影）

一致的样式 → 一致的代码。

检查元素

点击任意元素并检查：

• 宽度 / 高度
• 内边距和间距值
• 边框圆角
• 阴影值
• 字体大小 / 粗细 / 行高

直接复制数值 — 避免“差不多就行”。

示例：Figma 卡片 → React 组件

import React from "react";

export default function Card({ title, subtitle, children }) {
  const styles = {
    card: {
      width: 320,
      padding: "16px 20px",
      borderRadius: 16,
      border: "1px solid #e5e7eb",
      background: "#ffffff",
      boxShadow: "0 8px 20px rgba(0,0,0,0.04)",
    },
    title: {
      margin: "0 0 6px",
      fontSize: 18,
      fontWeight: 600,
    },
    subtitle: {
      margin: "0 0 12px",
      color: "#6b7280",
      fontSize: 14,
    },
  };

  return (
    
      
## {title}

      
{subtitle}

      {children}
    
  );
}

用法

  Content goes here…

完全匹配数值 — 间距、圆角、阴影、字体。保持组件可复用（Figma 中的变体，React 中的 props）。避免“凭眼”。检查 → 复制 → 粘贴。像素完美在于设计与代码使用相同的数值。