Paketdetailsv0.0.5

figma_frame_inspector

Ein Flutter-Plugin zur Überprüfung der Genauigkeit der Umsetzung des Figma-Frames in der App.

AndroidiOSmacOSWindowsLinux

pub.dev API-Dokumentation Quellcode

30-Tage-Downloads: 45
Likes: 25
Pub-Punkte: 150

Paket installieren

flutter pub add figma_frame_inspector

Paketübersicht

Aus öffentlichen Paketdaten erstellte Orientierung.

Der Figma Frame Inspector ist ein Flutter-Plugin, das Entwicklern hilft, die Genauigkeit der Umsetzung von Figma-Designs in ihren Apps zu überprüfen. Er legt die Rahmen und Abmessungen von Figma-Frames direkt auf die laufende App über, wodurch eine Echtzeit-Vergleichsmöglichkeit zwischen Design und Entwicklung entsteht. Dieses Werkzeug vereinfacht die UI-Validierung während des Testens und stellt sicher, dass die Implementierung exakt den Designvorgaben entspricht. Der Plugin unterstützt mehrere Plattformen wie Android, iOS, macOS, Windows und Linux und ist somit vielseitig für cross-platform Teams geeignet. Besonders nützlich ist er in kooperativen Umgebungen, in denen Designer und Entwickler eng zusammenarbeiten.

Anwendungsfälle

Überprüfung der UI-Fidelity anhand von Figma-Entwürfen
Überprüfung der plattformübergreifenden UI-Konsistenz
Design-Übergabe-Überprüfung
Echtzeit-Debugging von Layout-Diskrepanzen
Teamzusammenarbeit zwischen Designern und Entwicklern

Hauptmerkmale

Figma-Frames auf die App überlagern
Unterstützt mehrere Plattformen
Echtzeit-Vergleich der Visualisierung
Einfache Integration über pub add
Layoutabweichungen hervorheben

Geeignet für

UI/UX-Entwickler
Designer, die mit Flutter arbeiten
Cross-Platform-Entwicklungsteams
Qualitätssicherungstester
Teams, die Figma für Design verwenden

Hinweise

Nur für Entwicklung/Testzwecke
Benötigt Figma-Rahmendaten
Nicht geeignet für Produktionsbuilds
Kann die Leistung im Debug-Modus beeinträchtigen
Beschränkt auf visuelle Inspektion ohne automatisierte Assertionen

Original-README

Originaler README-Schnappschuss aus dem verknüpften Quell-Repository. Aktuelle Inhalte finden Sie im Repository.

Figma Frame Inspector

A Flutter plugin to verify how accurately the Figma frame was implemented in the app (whether paddings and elements sizes are correct).

With this tool any developer can verify all the paddings, font styles and elements sizes matches design specification in Figma.

How it works

This plugin provides FigmaFrameInspector widget that renders provided Figma frame on top of child screen widget. This helps to check proper frame implementation.

PS: Example Figma frame was taken from here

Implementation	Figma	Diff

Installation

flutter pub add figma_frame_inspector

Usage

Get Figma Personal Access Token

In Figma go to Account -> Personal Access Tokens
Generate a new token

Get Figma Frame URL

In Figma open design file
On the left side in Layers section select a frame that you need to verify
Copy the URL of the frame

Integration

import 'package:figma_frame_inspector/figma_frame_inspector.dart';
Wrap your app with FigmaFrameInspector widget:

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  Widget build(BuildContext context) {
    return FigmaFrameInspector( // <-- Wrap your screen widget with this widget.
      frameUrl:
          "<figma-frame-url>", // <-- Specify the Figma frame url. Looks like this: https://www.figma.com/file/<file_key>/<file_name >?node-id=<node_id>
      figmaToken: '<figma-token>', // <-- Specify the Figma `Personal access token` from Account Settings page.
      // Optional parameters:
      scale: 3, // A number between `0.01` and `4`, the image scaling factor.
      initialOpacity: .3, // Opacity of the frame on the screen start (default `30%`).
      enabled: true, // Enable or disable the frame overlay (default `true`).
      isTouchToChangeOpacityEnabled: true, // Enable or disable vertical scroll to change the frame overlay opacity (default `true`).
      child: Scaffold(
        appBar: AppBar(
          title: Text(title),
        ),
        floatingActionButton: const FloatingActionButton(
          onPressed: null,
          tooltip: 'Increment',
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}