Skip to main content

Onboarding

Before diving into the detailed onboarding process, we highly recommend starting with our comprehensive 13-minute [YouTube](SquareLine Vision Beta v0.1 Tutorial - Getting Started with the Basics - YouTube) tutorial video. This tutorial is specifically designed to provide you with the fundamental knowledge and essential skills needed to effectively navigate SquareLine Vision and maximize your productivity from day one.

The video covers the core concepts, basic workflow, and key features that form the foundation of successful project development within the platform. By watching this tutorial first, you'll gain valuable insights into the application's interface, understand the primary tools at your disposal, and learn best practices that will streamline your development process.

The steps to onboard the app are as follows:

  1. Create first project
  2. Configure Project Settings
  3. Customize Your Layout
  4. Upload Your Assets
  5. Create Font Style
  6. Widget Library
  7. Organize Your Layers
  8. Inspector Panel
  9. Enhance Your Widgets
  10. Manage Your Styles
  11. Your Canvas
  12. Animation Mode
  13. Interactive Actions
  14. Instant Screen Testing
  15. You're All Set!

1. Create first project​

[Opening the launcher](SquareLine Vision Beta) choose from a variety of board templates by clicking on the Create new button in the left navigation menu. Select the one that best fits your needs and bring your ideas to life effortlessly. The current three boards are:

  • CMake/Eclipse/VScode with SDL for development on PC
  • Arduino with TFT_eSPI -GIGA R1 WiFi with GIGA Display Shield
  • Arduino-IDE

The CMake/Eclipse/VScode with SDL board is perfect when you need to develop and test your UI on a PC before deploying to actual hardware, saving development time and allowing for rapid prototyping without physical devices.

The Arduino with TFT_eSPI is ideal for projects requiring flexible display support across various microcontrollers like ESP32 or Raspberry Pi Pico, making it excellent for IoT applications with visual interfaces.

The GIGA R1 WiFi with GIGA Display Shield offers superior processing power with its dual Cortex processor and larger touchscreen with gesture support, making it the best choice for sophisticated interactive applications requiring more computing resources and a premium user interface.

ⓘ INFO You can learn more about creating new projects here.

2. Configure project settings​

Configure settings in the Project settings section as you like. You can set the following parameters here:

  • Resolution
  • Offset
  • Rotation
  • Shape
  • Depth
  • LVGL version
  • Theme

You're ready to go! Just click the Create button to start customize.

3. Customize your layout​

Make your workspace truly yours! Adjust the layout to fit your preferences—almost every panel can be rearranged to create the most comfortable setup for you. You can drag and drop panels to different positions, resize them with the dividers, or even collapse unused panels to maximize your working area. The layout settings are automatically saved between sessions, ensuring your personalized workspace is ready whenever you return.

4. Upload your assets​

Upload your resources with ease! By clicking the plus button in the Assets Panel, you can add PNG images and TTF font files to use them in your styles and give your project a unique touch. You can select and place multiple files at once to streamline your workflow, or browse your file system to select specific assets. All uploaded resources are automatically organized in the Assets Panel for quick access during your design process.

5. Create font style​

Design custom font styles and choose from your uploaded font files to bring a unique touch to your project. Tailor your typography to perfectly match your design vision! By clicking the plus button in the Fonts Panel, you can customize the following parameters for your font:

General:

  • Name
  • Family
  • Size
  • Bpp
  • Letters
  • Asian

Custom:

  • Ranges
  • Symbols

You can modify or delete your created fonts at any time later, giving you complete flexibility to refine your typography as your project evolves.

6. Widget library​

Explore a variety of widgets in three separated dropdown menus in the toolbar to enhance your project. You can also easily access the screen widget next to the dropdown menus. Browse the options, select the ones you need, and bring your ideas to life with ease.

The library contains 3 main groups with the following widget types:

  • Screen

Basic:

  • Panel
  • Container
  • Image

Text-based:

  • Label
  • Textarea

Special widgets:

  • Button
  • Checkbox
  • Switch
  • Spinbox
  • Slider
  • Arc
  • Bar
  • Roller
  • Dropdown
  • Keyboard

7. Organize your layers​

Organize your project effortlessly! Arrange your widgets and objects by nesting them or positioning them above and below each other, just like layers. You can duplicate, copy-paste, delete, and search for elements, as well as rename them with a simple double-click. Parent elements can be easily expanded or collapsed to maintain a clean workspace while managing complex hierarchies of components.

8. Inspector panel​

Fine-tune your objects with precision! In the Inspector, you can adjust sizes, transform elements along X and Y axes, manage states, add flags, and configure widget settings to perfectly match your project's needs. The panel dynamically updates to display properties specific to your currently selected element, providing contextual controls for maximum efficiency.

ⓘ INFO You can learn more about Inspector here.

9. Enhance your widgets​

Enhance your widgets by adding states and flags for greater control and interactivity. Different states like Default, Pressed, or Disabled allow your UI elements to respond dynamically to user interactions, creating a more intuitive user experience. Flags provide additional functionality to your widgets - options like Hidden, Clickable, Checkable, and Scrollable control visibility and interaction behavior.

The software has the following states and flags: States:

  • Checked
  • Focused
  • Focus key
  • Edited
  • Hovered
  • Pressed
  • Scrolled
  • Disabled
  • User 1
  • User 2
  • User 3
  • User 4

Flags:

  • Hidden
  • Clickable
  • Checkable
  • Scrollable
  • Scroll elastic
  • Scroll momentum
  • Scroll one
  • Scroll chain horizontal
  • Scroll chain vertical
  • Scroll with arrow
  • Press lock
  • Adv hittest
  • Ignore layout
  • Send draw task events
  • Overflow visible
  • Flex in new track

10. Manage your styles​

Customize the appearance of various widget parts with ease! Create unique style presets that you can save and apply to other objects later for a consistent and personalized design. The Styles Panel provides comprehensive control over colors, borders, shadows, and other visual properties, allowing you to perfect every detail of your interface elements. You can add new styles or remove unnecessary ones at any time, keeping the Styles panel always clear and easy to manage, significantly speeding up and making your work more efficient.

11. Your canvas​

Create as many screens as you need! Name them, customize their sizes, and design each one to fit your project perfectly. In the Screens Panel, you can transparently overview your project screens: rename them, delete them, and add new ones using the plus button. You can easily zoom in and out of the canvas by using your touchpad or holding Ctrl/Cmd while scrolling the middle mouse wheel, and pan around by using your touchpad or holding the middle mouse button. The minimap also helps you navigate quickly through your design.

12. Animation mode​

Switch from design mode to animation mode in the toolbar, and unlock the power to animate every UI element in your project. Bring your designs to life with smooth transitions, dynamic effects, and engaging movements. You can create complex animations by setting keyframes at different time intervals and specifying position. The intuitive timeline interface allows you to visualize and fine-tune each animation sequence, ensuring perfect timing and coordination between multiple animated elements.

13. Interactive actions​

Bring interactivity to your project! Create and manage events to define how your widgets and objects behave. Set triggers, actions, and responses to make your design dynamic and engaging. You can easily configure what happens when a user interacts with your interface through events like clicks, drags, or swipes. The Events Panel provides a visual way to connect these triggers to specific responses, such as screen changes, animations, or property updates, allowing you to create a fully interactive prototype without writing complex code.

14. Instant screen testing​

Launch and interact with your screen prototypes instantly with a single click on the play icon, allowing you to test and refine your UI without the need for time-consuming builds. The testing environment accurately simulates how users will experience your application, providing real-time feedback on animations, interactions, and layout performance. You can quickly switch between different screens during testing to verify navigation flows and ensure a seamless user experience across your entire project.

15. You're all set!​

Congratulations on completing the onboarding! You're now ready to dive in and start creating. Explore, experiment, and bring your ideas to life!