FigmaComponent.button

The FigmaComponent.button component renders interactive buttons from your Figma design, preserving all visual properties while adding tap functionality.

Basic Usage

FigmaComponent.button(
  "my_button_name",
  onPressed: () {
    // Handle button press
    print("Button pressed!");
  },
  child: YourCustomChild(), // Optional custom child
)

Parameters

How It Works

1. The component looks for a node with the specified name in your Figma file
2. It renders all visual properties of that node (colors, shapes, shadows, etc.)
3. It wraps the node in a GestureDetector to handle taps
4. If the node contains text, that text is preserved (unless a custom child is provided)
5. If a custom child is provided, it replaces the original content

Examples

Simple Button

FigmaComponent.button(
  "login_button",
  onPressed: () => authService.login(email, password),
)

Button with Navigation

FigmaComponent.button(
  "next_button",
  onPressed: () => Navigator.of(context).push(
    MaterialPageRoute(builder: (_) => NextScreen()),
  ),
)

Button with Custom Child

FigmaComponent.button(
  "submit_button",
  onPressed: () => submitForm(),
  child: isLoading
    ? CircularProgressIndicator(color: Colors.white)
    : null, // Use null to keep the original button content
)

Button with Async Action

FigmaComponent.button(
  "save_button",
  onPressed: () async {
    setState(() => isSaving = true);
    try {
      await saveData();
      showSuccessMessage();
    } catch (e) {
      showErrorMessage(e);
    } finally {
      setState(() => isSaving = false);
    }
  },
)

Button States

Currently, the FigmaComponent.button renders the default state from your Figma design. To handle visual feedback for button states:

1. For simple press feedback, Flutter's touch ripple effect is automatically applied
2. For more complex state changes, consider using a StatefulWidget to swap between different Figma components

Best Practices

1. Design clear button states: Even though only the default state is used, make your buttons clearly look interactive
2. Use appropriate sizing: Create buttons that are large enough to be easily tapped (minimum 44x44 points)
3. Add visual feedback: Design buttons with hover/pressed states in Figma for reference
4. Use consistent naming: Follow a naming pattern for buttons across your design system

This component is perfect for action buttons, form submissions, navigation actions, and any interactive elements in your app.