design_sync

Description:

design sync

DesignSync #
DesignSync is a Flutter utility for creating pixel-perfect, responsive layouts by adapting dimensions from Figma designs to various device screen sizes.
Features #

Adapt width and height dimensions from Figma to device screen
Adapt font sizes from Figma to device screen, accounting for the device's text scale factor
Adapt radius values (for rounded corners, etc.) from Figma to device screen
Easy-to-use extension methods for numeric values
No context required for adaptation operations
Singleton pattern for efficient global access

Installation #
Add this to your package's pubspec.yaml file:
dependencies:
design_sync: ^1.0.0
copied to clipboard
Then run:
flutter pub get
copied to clipboard
Usage #

Import DesignSync in your Dart file:

import 'package:design_sync/design_sync.dart';
copied to clipboard

Initialize DesignSync in your main.dart file before runApp():

void main() {
DesignSync.initialize(figmaCanvasSize: Size(375, 812)); // Use your Figma canvas size
runApp(MyApp());
}
copied to clipboard

Use the adaptation methods or extension getters in your widget builds:

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DesignSync Demo', style: TextStyle(fontSize: 20.adaptedFontSize)),
),
body: Center(
child: Container(
width: 200.adaptedWidth,
height: 100.adaptedHeight,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10.adaptedRadius),
),
child: Center(
child: Text(
'Adapted Container',
style: TextStyle(fontSize: 16.adaptedFontSize, color: Colors.white),
),
),
),
),
);
}
}
copied to clipboard
API Reference #
DesignSync Class #

DesignSync.initialize({required Size figmaCanvasSize}): Initialize DesignSync with your Figma canvas size.
DesignSync.instance: Access the singleton instance of DesignSync.

Methods

adaptWidth(double figmaWidth): Adapt a width dimension from Figma.
adaptHeight(double figmaHeight): Adapt a height dimension from Figma.
adaptFontSize(double figmaFontSize): Adapt a font size from Figma.
adaptRadius(double figmaRadius): Adapt a radius value from Figma.

Properties

screenSize: Get the current device screen size.
figmaCanvasSize: Get the Figma canvas size used for adaptations.
widthFactor: Get the current width adaptation factor.
heightFactor: Get the current height adaptation factor.
textScaleFactor: Get the current text scale factor of the device.

Extension Methods #

num.adaptedWidth: Adapt a width value from Figma.
num.adaptedHeight: Adapt a height value from Figma.
num.adaptedFontSize: Adapt a font size value from Figma.
num.adaptedRadius: Adapt a radius value from Figma.

Example #
Here's a more comprehensive example demonstrating various uses of DesignSync:
import 'package:flutter/material.dart';
import 'package:design_sync/design_sync.dart';

void main() {
DesignSync.initialize(figmaCanvasSize: Size(375, 812)); // Example: iPhone X dimensions
runApp(MyApp());
}

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'DesignSync Demo',
theme: ThemeData(primarySwatch: Colors.blue),
home: MyHomePage(),
);
}
}

class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
final pp = DesignSync.instance;

return Scaffold(
appBar: AppBar(
title: Text('DesignSync Demo', style: TextStyle(fontSize: 20.adaptedFontSize)),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Container(
width: 200.adaptedWidth,
height: 100.adaptedHeight,
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.circular(10.adaptedRadius),
),
child: Center(
child: Text(
'Adapted Container',
style: TextStyle(fontSize: 16.adaptedFontSize, color: Colors.white),
),
),
),
SizedBox(height: 20.adaptedHeight),
Text(
'Screen Size: ${pp.screenSize.width.toStringAsFixed(2)} x ${pp.screenSize.height.toStringAsFixed(2)}',
style: TextStyle(fontSize: 14.adaptedFontSize),
),
Text(
'Figma Canvas Size: ${pp.figmaCanvasSize.width} x ${pp.figmaCanvasSize.height}',
style: TextStyle(fontSize: 14.adaptedFontSize),
),
Text(
'Width Factor: ${pp.widthFactor.toStringAsFixed(2)}',
style: TextStyle(fontSize: 14.adaptedFontSize),
),
Text(
'Height Factor: ${pp.heightFactor.toStringAsFixed(2)}',
style: TextStyle(fontSize: 14.adaptedFontSize),
),
Text(
'Text Scale Factor: ${pp.textScaleFactor.toStringAsFixed(2)}',
style: TextStyle(fontSize: 14.adaptedFontSize),
),
],
),
),
);
}
}
copied to clipboard
Examples #
For more advanced usage and examples, check out the example folder in the package repository.
Additional Information #
For more information on using this package, please refer to the API documentation.
Contributing #
Contributions are welcome! Please feel free to submit a Pull Request.
License #
This project is licensed under the MIT License - see the LICENSE file for details.