SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsfigma-ui-design

figma-ui-design

Design & creation

View repository

Updated 10-15 07:58

About this skill

Figma UI Design Automation

Feature Description

This skill is specifically used to automate Figma design workflows, including:

  • Design systems and component library creation
  • Automated design mockup generation
  • Design asset export
  • Design specification document generation
  • Figma API integration
  • Design-to-code conversion

Use Cases

  • "Create a Figma design for a login page"
  • "Generate a design system component library"
  • "Export all icons from Figma"
  • "Convert Figma designs to React components"
  • "Automate the design review workflow"
  • "Generate design specification documents"

Core Functional Modules

1. Design System

  • Color System: Define brand colors, semantic colors, and neutral colors
  • Typography System: Font families, font sizes, line heights, font weights
  • Spacing System: Unified spacing specifications (4px, 8px, 16px, etc.)
  • Component Library: Reusable components such as buttons, forms, and cards
  • Icon Library: A unified icon collection

2. Page Design

  • Layout Design: Responsive layouts and grid systems
  • Interaction Design: Prototypes and interaction flows
  • Motion Design: Transition animations and micro-interactions
  • Adaptive Design: Multi-platform adaptation (Web, mobile)

3. Asset Export

  • Image Export: PNG, JPG, SVG formats
  • Icon Export: SVG icons and icon fonts
  • Asset Slice Export: @1x, @2x, @3x image scales
  • Style Export: CSS and SCSS variables

4. Design to Code

  • Component Generation: React, Vue, and Angular components
  • Style Generation：CSS、Tailwind、Styled Components
  • Code Standards: Follow team code standards
  • Type Definitions: TypeScript types

Design Workflow

Standard Design Process

  1. Requirements Analysis: Understand product requirements and user scenarios
  2. Information Architecture: Plan page structure and navigation
  3. Wireframes: Draw low-fidelity prototypes
  4. Visual Design: Apply the design system to create high-fidelity mockups
  5. Interactive Prototype: Add interactions and motion effects
  6. Design Review: Team review and feedback
  7. Development Handoff: Export assets and annotations

Component Library Development Process

  1. Component Planning: Determine the required component types
  2. Design Specifications: Define the design rules for components
  3. Component Design: Create base components
  4. Variant Management: Define different states of components
  5. Documentation: Usage instructions and examples
  6. Release Updates: Version management and changelog

Best Practices

Design Guidelines

  • Naming Conventions: Use clear layer naming
  • Organization Structure: Reasonable page and layer organization
  • Componentization: Maximize component reuse
  • Auto Layout: Use Auto Layout to improve efficiency
  • Constraint Settings: Correctly set responsive constraints

Collaboration Guidelines

  • File Organization: Clear classification of projects, pages, and components
  • Version Management: Use Figma version history
  • Comment Feedback: Communicate using the comment feature
  • Permission Management: Reasonably set view and edit permissions
  • Team Library: Share design systems and components

Performance Optimization

  • Layer Optimization: Reduce unnecessary layers
  • Effect Usage: Use shadows and blurs with caution
  • Image Optimization: Compress large images
  • Component Instances: Use component instances instead of copies

Design System Examples

Color System

const colors = {
  // 品牌色
  primary: {
    50: '#E3F2FD',
    100: '#BBDEFB',
    500: '#2196F3',  // 主色
    700: '#1976D2',
    900: '#0D47A1'
  },
  // 功能色
  success: '#4CAF50',
  warning: '#FF9800',
  error: '#F44336',
  info: '#2196F3',
  // 中性色
  gray: {
    50: '#FAFAFA',
    100: '#F5F5F5',
    500: '#9E9E9E',
    900: '#212121'
  }
};

Typography System

const typography = {
  fontFamily: {
    sans: 'Inter, system-ui, sans-serif',
    mono: 'Fira Code, monospace'
  },
  fontSize: {
    xs: '12px',
    sm: '14px',
    base: '16px',
    lg: '18px',
    xl: '20px',
    '2xl': '24px',
    '3xl': '30px',
    '4xl': '36px'
  },
  fontWeight: {
    normal: 400,
    medium: 500,
    semibold: 600,
    bold: 700
  },
  lineHeight: {
    tight: 1.25,
    normal: 1.5,
    relaxed: 1.75
  }
};

Spacing System

const spacing = {
  0: '0',
  1: '4px',
  2: '8px',
  3: '12px',
  4: '16px',
  5: '20px',
  6: '24px',
  8: '32px',
  10: '40px',
  12: '48px',
  16: '64px',
  20: '80px'
};

Using the Figma API

Get File Content

const response = await fetch(
  'https://api.figma.com/v1/files/FILE_KEY',
  {
    headers: {
      'X-Figma-Token': 'YOUR_TOKEN'
    }
  }
);
const data = await response.json();

Export Images

const response = await fetch(
  'https://api.figma.com/v1/images/FILE_KEY?ids=NODE_ID&format=png&scale=2',
  {
    headers: {
      'X-Figma-Token': 'YOUR_TOKEN'
    }
  }
);
const { images } = await response.json();

Get Styles

const response = await fetch(
  'https://api.figma.com/v1/files/FILE_KEY/styles',
  {
    headers: {
      'X-Figma-Token': 'YOUR_TOKEN'
    }
  }
);
const { meta } = await response.json();

Design-to-Code Conversion

React Component Generation

// 从 Figma 设计生成的按钮组件
import React from 'react';
import styled from 'styled-components';

const StyledButton = styled.button`
  padding: 12px 24px;
  background: #2196F3;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;

  &:hover {
    background: #1976D2;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);
  }

  &:active {
    transform: translateY(0);
  }

  &:disabled {
    background: #BDBDBD;
    cursor: not-allowed;
  }
`;

export const Button = ({ children, ...props }) => {
  return <StyledButton {...props}>{children}</StyledButton>;
};

CSS Variable Generation

:root {
  /* Colors */
  --color-primary: #2196F3;
  --color-primary-dark: #1976D2;
  --color-success: #4CAF50;
  --color-error: #F44336;

  /* Typography */
  --font-sans: Inter, system-ui, sans-serif;
  --font-size-base: 16px;
  --font-weight-normal: 400;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-1: 4px;
  --spacing-2: 8px;
  --spacing-4: 16px;
  --spacing-8: 32px;

  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
}

Recommended Common Plugins

Design Efficiency

  • Autoflow: Automatically generate flowchart connectors
  • Content Reel: Quickly fill text and images
  • Unsplash: Free high-quality images
  • Iconify: Massive icon library

Development Collaboration

  • Figma to Code: Design to code
  • Anima: Export React/Vue code
  • Zeplin: Design annotations and assets
  • Avocode: Design handoff platform

Design Systems

  • Design System Manager: Manage design systems
  • Stark: Accessibility design checks
  • Contrast: Contrast checks

Integration Scenarios

1. Automated Design Review

  • Check compliance with design guidelines
  • Verify color and font usage
  • Check component consistency
  • Generate review reports

2. Design Resource Synchronization

  • Automatically export design resources
  • Sync to code repository
  • Update component library
  • Notify the development team

3. Design Documentation Generation

  • Extract design guidelines
  • Generate component documentation
  • Create usage guides
  • Publish to documentation site

4. Prototype Testing

  • Generate interactive prototypes
  • Collect user feedback
  • Analyze interaction data
  • Iterate on design solutions

Notes

  • Keep design files clean and organized
  • Regularly clean up unused components and styles
  • Use version control to manage important changes
  • Maintain close communication with the development team
  • Follow accessibility design principles
  • Consider performance and loading speed