Text With Styles

About this plugin

# Flutter Text Style Inspector

A powerful Figma plugin that bridges the gap between Figma text styles and Flutter's Material Design text theme system. This plugin helps developers and designers maintain consistency between Figma designs and Flutter implementations by automatically mapping Figma text styles to their corresponding Flutter TextTheme properties.

## Features

### Real-time Style Inspection

- Instantly view text style information for any selected text layer

- Live updates as you select different text elements

- Support for multiple text selection with smart duplicate filtering

### Comprehensive Style Information

- Displays the complete Figma text style name

- Shows associated color token information

- Previews the actual text content

- Automatically generates corresponding Flutter TextTheme code

### Smart Flutter Code Generation

- Automatically maps Figma text styles to Flutter's Material Design text theme

- Supports all standard Material text styles:

- Headlines (Large, Medium, Small)

- Titles (Large, Medium, Small)

- Body text (with weight variations)

- Labels (Large, Medium, Small)

- Includes font weight handling for body styles (w400, w500, w600)

### User-Friendly Interface

- Clean, organized display of style information

- Easy-to-copy Flutter code snippets

- Compact, floating UI that stays out of your way

- Simple click-outside-to-close functionality

## How to Use

1. Select any text layer(s) in your Figma design

2. The plugin will automatically display:

- The applied Figma text style

- The color token (if available)

- A preview of the text content

- The equivalent Flutter TextTheme code

3. Copy the generated Flutter code directly into your application

## Best Practices

- Name your Figma text styles to match Material Design conventions for automatic mapping

- Use consistent style names to ensure accurate Flutter code generation

- Apply color styles to text layers for complete token information

- Select multiple text layers to quickly inspect all text styles in a component

Perfect for teams working with both Figma and Flutter, this plugin streamlines the handoff process and ensures design consistency across platforms.