figma_importer 0.1.0

A light dart command-line tool for generating Figma styles as variables.

example/example.md

Basic Example

Import Figma styles command:

$ figma_importer import

Auto Theme generation command:

$ figma_importer gen-theme --auto

Manual Theme generation command:

$ figma_importer gen-theme --path=figma_importer_theme_ref.yaml

Theme reference generation command:

$ figma_importer create-theme-ref

Imported style classes example

Color styles

class MyAppPalette {
  MyAppPalette._();

  static const Color primary = Color(0xFF378EFF);
  ...
}

Typography styles

class MyAppTypography {
  MyAppTypography._();

  static const displayLarge = TextStyle(
    fontSize: 48,
    fontWeight: FontWeight.w600,
    fontFamily: 'Inter',
    ...
  );
}

Shadow styles

class MyAppShadows {
  MyAppShadows._();

  static const shadowSmall = [
    BoxShadow(
      color: Color(0x4D000000),
      blurRadius: 10,
      spreadRadius: -4,
      offset: Offset(4, 3),
   ),
   ...
  ];
}

Imported theme class example

class MyAppTheme {
  const MyAppTheme._();

  static final ThemeData m3SysDarkTheme = ThemeData(
    brightness: Brightness.dark,
    textTheme: m3TextTheme,
    colorScheme: m3SysDarkColorScheme,
  );

  static final ThemeData m3SysLightTheme = ThemeData(
    brightness: Brightness.light,
    textTheme: m3TextTheme,
    colorScheme: m3SysLightColorScheme,
  );


  static const ColorScheme m3SysDarkColorScheme = ColorScheme.dark(
    primary: Palette.m3SysDarkPrimaryFixedDim,
    onPrimary: Palette.m3SysDarkOnPrimaryFixedVariant,
    primaryContainer: Palette.m3SysDarkPrimaryContainer,
    ...
  );


  static const ColorScheme m3SysLightColorScheme = ColorScheme.light(
    primary: Palette.m3SysLightPrimaryFixedDim,
    onPrimary: Palette.m3SysLightOnPrimaryFixedVariant,
    primaryContainer: Palette.m3SysLightPrimaryContainer,
    ...
  );

  static const TextTheme m3TextTheme = TextTheme(
    displayLarge: TextStyles.m3DisplayLarge,
    displayMedium: TextStyles.m3DisplayMedium,
    displaySmall: TextStyles.m3DisplaySmall,
    headlineLarge: TextStyles.m3HeadlineLarge,
    ...
  );
}