Figma to SquareLine Vision

About this plugin

Bridge the gap between design and embedded development.

The SquareLine Vision Figma Plugin allows you to instantly convert your Figma-designed UI elements into fully functional widgets inside Vision. Forget static image exports and manual rebuilding: Vision builds each widget according to the styles defined in Figma—colors, sizes, border radius, alignment, and text styles—ensuring that what you see in Figma is exactly what you get inside Vision.

This plugin goes beyond simple visual export; it interprets your design structure, converting Auto Layouts into functional Flexbox layouts and transforming grouped elements into interactive widgets.

Why you’ll love it:

🚀 Instant Conversion: Transform your static UI designs into interactive Vision components instantly.

🧠 Smart Widget Detection: The plugin automatically analyzes your Figma design to identify common UI patterns and converts them into the appropriate widget types, speeding up your workflow.

🎨 Pixel-Perfect Fidelity: Your specific design choices—including linear gradients, borders, shadows, and typography—are preserved and mapped directly to SquareLine properties.

Key Features

Widget Detection:

1. Enabled (Default): The plugin automatically interprets your design as interactive components (e.g., detecting a Button from an Auto Layout with a Label).
2. Disabled (Manual Control): For full control, disable detection to generate only primitives (Container, Label, Image, Screen) and build custom widgets manually.

Advanced Layout Translation:

1. Figma Auto Layout settings are converted into Vision Flex layout properties.
2. Handles Padding, Gaps, and Alignment (Row/Column) automatically.

Comprehensive Style Support:

1. Backgrounds: Supports Solid colors and Linear Gradients.
2. Borders & Outlines: Converts Inside/Outside strokes and Corner Radius.
3. Typography: Preserves Font Family, Size, Weight, Letter Spacing, and Line Height.
4. Effects: Supports Drop Shadows, Opacity, and Rotation.

Supported Widgets

The plugin recognizes and converts the following elements when structured correctly:

Basic: Screen, Panel, Container, Image, Label

Input: Textarea (Auto Layout + Label)

Controls: Button, Checkbox, Switch, Slider, Arc, Bar

Selection: Roller, Dropdown

How to use

1. Design: Create your UI in Figma. Use Auto Layouts for responsive positioning and group elements according to the widget documentation (e.g., grouping an Indicator and Knob for a Switch).
2. Export: Run the plugin. "Widget Detection" will automatically identify your components.
3. Build: Open the result in SquareLine Vision with your widgets ready for logic and events.

Feedback & Community

We are constantly improving the plugin and value your input. Join our Discord channel to share your feedback, report bugs, or chat with the SquareLine team and community.

💬 Join us on Discord: Go to your Discord server

Resources

📂Example Project: Get started quickly by exploring our example project: Go to the example project

📖 Documentation: Go to documentation

🌐 Website: Go to SquareLine website