Thank you for joining the PixelFree family.

The following documentation is intended to help you understand how to navigate and use our software.

version

Version

1.26.0
version

Author

Azada Shams
version

Created

06 January, 2022
version

Updated

11 March, 2024

Getting Started

Follow the steps below to setup PixelFree Studio

Creating a Project

After the installation is completed, a new shortcut will be created on your desktop. By clicking on the shortcut, a prompt window will appear with three different options: 'Create New', 'Open Project' and 'Import Figma Project'.

For a new project, select 'Create New'. In the next window, fill in the information about your project. In the text fields under the titles 'Enter Project Name' and 'Enter Document Name', you can define a name for your project and its first page. To specify the location where the project will be saved, you can either choose a path from the dropdown menu or click on the 'browse' button to find the desired folder. Use the 'Project description' option to provide a detailed description of the project.

Click on 'Next' at the bottom right corner to choose the required type of screen between Mobile, Tablet, and Desktop. The default value is always Desktop. In the final step, you can determine the base resolution of the screen by either picking one of the three given options or defining it manually.

Exporting a Project

Click on the generate code button located in the project navigation bar on the top right side. Initially, you have to log in to your PixelFree account or sign up for a new one in order to authenticate with our server. After that, the export window will open, giving you the option to choose between six different languages for designing websites and desktop applications. Select your preferred language along with a destination path for the files, and then click on the blue button, 'Direct Export'. The generated project's files will be saved in the specified folder on your computer. Once the export is complete, you can press the play button directly to start the corresponding local servers

For VUE, react and Angular there is also an edit export with which you have the possibility to define exactly which components and variables you want to have.

Importing Figma Project

Project Key

Where can I find the key to my project?

Open the Figma project that you want to import in your browser.

The URL should look something like this:

https://www.figma.com/file/484pQ9uYpeHoZGBRHhqeub/Figma-Basics?type=design

The key is located between the word "file" and your project name, for example:

export-img

(Make sure that you enter the key without the leading and following forward slashes.)

This is the key of our example project:

kNBJqlC1WFmFB32KisiqkF

Personal Access Token

How can I get a personal access token?

Open Figma in your browser and log in to an account that has "can view" access to the project you want to import (Figma - Team permissions).

Go to the Account settings.

Scroll down to the "Personal Access Tokens" section.

Create a token by entering any desired name in the token description field.

export-img

Hit enter, and your new personal access token will be displayed:

export-img

(This will be your only chance to copy the token, so make sure you keep a copy of this in a secure place.)

How to import Figma projects into PixelFree Studio in 5 simple steps

To Import Figma Projects into PixelFree Studio, follow the steps bellow:

1. Start the PixelFree Studio app and click on 'Import Figma Project'.

2. Enter your Figma Project Key and Personal Access Token in the next window.

3. Choose the destination for saving your project and click on 'Next' at the bottom right.

4. Select the Frames of your Figma project that you'd like to import by checking the checkboxes above them.

5. Click on 'Import' to start importing your selected Frames into PixelFree Studio.

6. Select the possible target types: The next window contains three sections. The first column shows a list of all elements of the Figma design.
The second one contains a preview for the selected Figma element at the top and a list of possible PixelFree target types at the bottom. To transform your design, select an element on the left and its matching target type right next to it. For example, if you have a text inside a rectangle in your Figma design, you can choose "Label" as a target type. If you want to assign the same target type to several elements, hold down 'ctrl' and all following elements will be assigned the same target type as the element before.
The last section is a preview of how the current frame will look in PixelFree Studio. Once the conversion is finished, press 'Import,'.

Containers

Anchor Pane

The Anchor Pane serves as a container, anchoring components in their designated positions. Regardless of resizing the Anchor Pane, the elements in it maintain their original placement. It is crucial to remember that an Anchor Pane can expand or get smaller as far as each child component allows it to do so. The position of any component within an Anchor Pane can be specified using the Anchor Pane constraints. The Anchor Pane constraints menu will open at the bottom right of PixelFree Studio once a child component of an Anchor Pane is selected. You can set them to any positive number for each side to anchor the child component within the Anchor Pane.

Important Note: Currently, you must set all Anchor Pane constraints' values manually. We intend to automatically adjust these values in the upcoming release of PixelFree Studio.

Accordion

Accordion is a container that can hold one or more Titled Panes together. Only one Titled Pane can be expanded at a time. You can add any component to a Titled Pane by simply dragging and dropping. It is an excellent UI tool for designing items such as FAQs where each Titled Pane represents a question and its answer. It is only possible to change the text of the title pane once you have selected the title pane. Choose from the tabs at the Properties Panel at the right side of the screen,
and you will find the following properties in the ‚Accordion – manage TitlePanes‘ menu:

  • Dropdown Menu: Holds a list of the Titled Panes in the Accordion and the selected one gets expanded.
  • Plus Sign: Adds a new Titled Pane to the Accordion. .
  • Negative Sign: Removes the selected Titled Pane from the dropdown menu.
  • HBox

    HBox is a type of container that arranges its containing objects in a single row. You can drag and drop the control elements, which will then be automatically placed horizontally one after another. This can be used, for example, to create a navigation bar for a website. Choose from the tabs in the Properties Panel on the right side of the screen, and you will find the following properties:

  • Spacing: Set the distance between objects in the HBox.
  • Fill Height: If enabled, resizable elements within the HBox will be stretched to fit their container
  • VBox

    Unlike HBox, VBox arranges its children into a single column automatically. Choose from the tabs in the Properties Panel on the right side of the screen, and you will find the following properties:

  • Spacing: Set the distance between objects in the VBox.
  • Fill Height: If enabled, resizable elements within the Box will be stretched to fit their container
  • Grid Pane

    Grid Pane is a great choice to arrange elements in rows and columns. This container provides a grid where a user can locate elements in cells based on the given horizontal and vertical index values. It is worth mentioning that the size of a cell in a Grid Pane is defined by the largest element in that row/column. You can determine the position of an item in the Grid Pane using the attributes in the Grid Pane constraints explained below.

  • Row Index: Locates an element in a row based on the given index value.
  • Column Index: Locates an element in a column based on the given index value
  • Row Span: Assigns the number of columns along which an element is stretched horizontally. 
  • Column Span: Assigns the number of rows along which an element is stretched vertically. 
  • H Grow: If an element has no fixed width, it will be stretched horizontally to fit the width of the cel
  • V Grow: If an element has no fixed height, it will be stretched vertically to fit the height of the cell. 
  • H Align: Specifies the horizontal alignment of the elements in accordance with the values Left, Center and Right.
  • V Align: Similar to H Align where the changes are applied to the vertical alignment.
  • Hgrow: The horizontal growth has priority for the element.
  • Vgrow: The vertical growth has priority for the element.
  • Margin: Sets marginal space around elements from the left, right, top, and bottom. 
  • Scroll Pane

    Scroll Pane is a container that provides a scrolled and clipped viewport of its content. The Scroll Pane offers a horizontal and vertical scrollbar. Using the scrollbars, you can easily navigate through the available items, such as images in a gallery. Each Scroll Pane contains an Anchor Pane to allow free positioning of its child elements. To customize the design of a Scroll Pane, choose in the Properties Panel on the right side of your screen, and you can find the following attributes:

  • Fit to Width: If enabled and the main width of the Anchor Pane within the Scroll Pane is resizable, the horizontal scrollbar will fit the viewport.
  • Fit to Height: If enabled and the main height of the Anchor Pane within the Scroll Pane is resizable, the vertical scrollbar will fit the viewport.
  • HBar Policy
    1. Never:Hides the scrollbar.
    2. Always:Keeps the scrollbar visible all the time.
    3. Always: Adds the scrollbar as the width of the container gets smaller in size.
  • VBar Policy: This option is very similar to HBar Policy, applying the same changes to the vertical scrollbar. 
  • Hmin: Specifies the minimum value to start scrolling horizontally.
  • Hvalue: Indicates the current scrolling value horizontally. 
  • Hmax: Specifies the maximum value to stop scrolling horizontally.
  • Vmin: Specifies the minimum value to start scrolling vertically.
  • Vvalue: Specifies the maximum value to end scrolling vertically.
  • Vmax: The vertical growth has priority for the element.
  • Min Viewport Width: Specifies the minimum width of the viewport.
  • Pref Viewport Width: Specifies the preferred width of the viewport.
  • Min Viewport Height: Specifies the minimum height of the viewport.
  • Flow Pane

    Flow Pane is a container capable of arranging its child elements either horizontally or vertically. It resembles HBox when aligned horizontally and VBox in vertical orientation. However, Flow Pane automatically wraps an item to the next row/column if its width/height exceeds that of the container.

    It's important to note that if the width/height of the item doesn't fit in the subsequent row/column, it will extend beyond the boundaries of its parent. If an element's height is resized in the horizontal orientation, the other elements will automatically and equally adjust themselves. Likewise, in the vertical orientation, if an item's width is modified, the other components will adapt accordingly.

    To change the design of a Flow Pane, select from the tabs in the Properties Panel on the right side of the screen. You will find the following options:

  • HGap: Specifies the horizontal space between the components.
  • VGap: Specifies the vertical space between the components.
  • Wrap: Specifies the width or height at which the elements within the Flow Pane should wrap around.
  • Hamburger Menu

    A Hamburger Menu is a collapsible container represented by an icon containing three horizontal lines. It proves invaluable in responsive web design, particularly for mobile viewport optimization. Navigation menus can easily be created within this container, streamlining design efficiency by organizing them into a compact list.

    To change the design of a Hamburger Menu, select from the tabs in the Properties Panel on the right side of the screen. You will find the following options:

  • Button Background Color: Indicates the color of the Hamburger Menu's button.
  • Button Radius: Indicates the radius at which the edges of the button are curved.
  • Button Alignment: Indicates the position of the button when expanded, given the values in the dropdown menu.
  • Expanded: Indicates the state of the container being collapsed or expanded. If expanded, it gets checkmarked.
  • Icon File Path When Expanded: This property can be used to choose an image or SVG as the button's icon when expanded.
  • Icon File Path When Contracted: Similar to the previous property with the difference that it specifies the button's icon when contracted.
  • Elements

    Button

    You can use a Button to trigger an event or action when it is clicked. This interactive element can be used to carry out tasks like submitting a form, closing a window or navigating to another page. To customize the design of your Button, refer to the relevant tabs explained in ‘Properties Panel’.

    Check Box

    The Check Box enables you to select or deselect one or multiple options. When checked, it indicates that the corresponding feature has been chosen. On the contrary, if unchecked, it denotes that the given option is not selected. Check Boxes can be used in different places such as forms, configuration menus, and other contexts. To customize the design of your Check Box, refer to the relevant tabs explained in ‘Properties Panel’.

    Radio Button

    You can use Radio Button in a context where there is a set of options, and only one of those features must be selected. Unlike Check Box, where you can choose multiple options simultaneously, multiple selections with Radio Buttons cannot be possible. You can use Radio Button to design a survey, preference settings, or forms.

    Toggle Button

    The Toggle Button allows you to shift between two states/options, an active and an inactive status. For example, you can use it to turn on/off notifications in an application. To customize the design of your Toggle Button, refer to the relevant tabs explained in ‘Properties Panel’.

    Typography

    Paragraph

    A Paragraph is used to format and structure a block of text on a website. When you double-click on the Paragraph, you can edit its content, and a format bar will be activated at the top of the window, allowing you to format your text. This bar contains options to style the font, align or indent the text, create lists, or change the text color. Each part of a Paragraph’s content can be styled individually.

    Label

    You can use a Label as a descriptive text along with other components. It clarifies the purpose of an element, e.g., a Text Field, by providing a title or some instructions right next to it. To edit your label, refer to ‘Labeled Text Properties’.

    Media

    Image

    An Image is useful for inserting visuals into your website/application for different purposes. For example, you can add your company’s logo to a website for a user to identify the existing association. If you click on the default image, the file chooser opens. It is then possible to select and add an image directly.
    To edit the Image’s properties, click on in the Properties Panel, and you will find the following options:

  • Preserve Ratio: Maintains the ratio between the width and height of an Image. If checked, ‘Fit Width’ and ‘Fit Height’ will preserve this ratio under any circumstance.
  • Path: Allows you to select the image you want to use by browsing the files on your computer.
  • Viewport X: Specifies the x coordinate of the viewport.
  • Viewport Y: Specifies the y coordinate of the viewport.
  • Fit Width: Specifies the width of the Image.
  • Fit Height: Specifies the height of the Image.
  • Video

    To enrich your website’s content with multimedia, you can use video along with the text. To edit the Video’s properties, click on in the Properties Panel, and you will find the following options:

  • Preserve Ratio:Maintains the ratio between the width and height of a Video. If checked, ‘Fit Width’ and ‘Fit Height’ will preserve this ratio under any circumstance.
  • Smooth: Presents the Video with a better quality when the size is scaled.
  • Path: Allows you to select the video you want to use by browsing the files on your computer.
  • Viewport X: Specifies the x coordinate of the viewport.
  • Viewport Y: Specifies the y coordinate of the viewport.
  • Fit Width: Specifies the width of the Video.
  • Fit Height: Specifies the height of the Video.
  • SVG

    In addition to using Images, you have the facility to import vector graphics to your website/application in PixelFree Studio. To edit the SVG’s properties, click on in the Properties Panel, and you will find the following options:

  • File Path: Allows you to select the SVG you want to use by browsing the files on your computer.
  • Viewport X: Specifies the x coordinate of the viewport.
  • Viewport Y: Specifies the y coordinate of the viewport
  • Viewport With: This makes it possible to define the width of the SVG
  • Viewport Height: This makes it possible to define the height of the SVG
  • Fit Width: Specifies the width of the SVG.
  • Fit Height: Specifies the height of the SVG.
  • Preserve Ratio: Maintains the ratio between the width and height of an SVG. If checked, ‘Fit Width’ and ‘Fit Height’ will preserve this ratio under any circumstance.
  • Carousel

  • Dropdown Menu: Maintains a list of the images to be presented.
  • Negative Sign: Specifies the x coordinate of the viewport.
  • Plus Sign: Adds a new image to the list by browsing to its folder on your PC.
  • Show Buttons: If checked the navigating buttons on the slide will be visible.
  • Show Active Slide: If checked, the pagination dots will be displayed at the bottom of the Carousel.
  • Use Autoplay: If checked, the Carousel will display each image based on the specified Transition Time automatically.
  • Transition Time: Specifies the number of seconds for each transition.
  • Navigation Buttons

  • Width: Determines the width of both buttons at the right and left sides.
  • Height: Determines the height of both buttons at the right and left sides.
  • Padding: Determines the space around the icon from the edges of the button.
  • Radius: Determines the length of the radius.
  • Left Button Text: Specifies a text for the button at the left side.
  • Right Button Text: If checked, the Carousel will display each image based on the specified Transition Time automatically.
  • Left Button Icon: Selects an icon to be displayed on the button at the left side.
  • Right Button Icon: Selects an icon to be displayed on the button at the right.
  • Background Color: Provides a set of colors for the background color of the Navigation Buttons.
  • Radio Buttons

  • Diameter: Determines the radio button’s diameter.
  • Padding: Determines the space between the dot and its background.
  • Background Color: Determines the color of the background of the radio button.
  • Dot Color: Provides a group of colors to choose the dot’s color.
  • Forms

    Text Field

    A Text Field can be used to enter text or alphanumeric characters in a Form. For example, it comes in handy for data entry, such as name, address, or e-mail address, while creating an account on a website. To edit the Text Field’s properties, click on in the Properties Panel, and you will find the following options:

  • Prompt Text: Specifies the text to be displayed when there is no user input in the Text Field.
  • Editable: If unchecked, no input can be entered.
  • Font Family: Sets the font family
  • Text Color: Specifies the color of input or prompt text
  • Font Weight: Determines the font weight. The available options depend on the ones installed on your computer.
  • Font Size: Sets the font size.
  • Styling: Allows you to italicize or underline the Text Field’s content.
  • Password Field

    Password is a type of text field designed to input passwords securely. You can use it in a form, for the purpose of authentication, and create rules for the users to enforce password strength. To edit the Password’s properties, click on in the Properties Panel, and you will find the following options:

  • Prompt Text: Specifies the text to be displayed when there is no user input in the Password.
  • Editable: If unchecked, no input can be entered.
  • Font Family: Sets the font family.
  • Text Color: Specifies the color of input or prompt text.
  • Font Weight: Determines the font weight. The available options depend on the ones installed on your computer.
  • Font Size: Sets the font size.
  • Styling: Allows you to italicize or underline the Password’s content.
  • Text Area

    A Text Area can be used to enter text or alphanumeric characters in a Form. For example, it comes in handy for data entry, such as name, address, or e-mail address, while creating an account on a website. To edit the Text Field’s properties, click on in the Properties Panel, and you will find the following options:

  • Prompt Text: Specifies the text to be displayed when there is no user input in the Password.
  • Editable: If unchecked, no input can be entered.
  • Font Family: Sets the font family.
  • Text Color: Specifies the color of input or prompt text.
  • Font Weight: Determines the font weight. The available options depend on the ones installed on your computer.
  • Font Size: Sets the font size.
  • Styling: Allows you to italicize or underline the Password’s content.
  • Smart Division

    Smart Division equips you with responsive web design. Using this property, you can create content for the mobile view with better quality. Follow the steps below to design a customized style for the visibility a button using Smart Division:

    1. To create a Smart Division, click on the Smart Divison Icon to the right of the gear icon from the properties panel.

    2. Click on ‘Add’ at the top to create a new Smart Division. After that, you will see a smart division with the default size of your project.

    3. Enter a random name for the Smart Division, and specify the width, e.g., 450px.

    4., Now you can adjust your design to this smart divison and make your project full responsive.

    Library

    It is possible to build and save certain components of your websites in a folder in PixelFree Studio. The components stored in the library can then be reused at a later time in the current project or others. To add a new group to the library, follow the steps below:

    1. Right-click on the component and select ‘add to library’ from the menu. (OR use the keyboard shortcuts: Control + G on Windows, or Command + G on Mac). A window will appear on your screen containing the selected item and its sub-components in a list.

    2. Choose the elements you want to save by checking the check boxes. (Note: If the parent element is deselected, the child component will become deactivated.)

    3. Enter a name for the group of selected elements in the text field. You can also replace this group with an existing one saved in the library by choosing its name from the dropdown menu.

    4. Choose a destination folder to save the group and click on "Save".

    You can simply reuse the saved group by dragging and dropping it from Library.

    Properties Panel

    The Properties Panel is a collection of different tabs used for designing containers and other elements. These tabs adapt automatically according to the corresponding chosen control/layout since each element has a unique design flexibility. Certain properties are designed for specific component types and will be elaborated upon along with the designated element. However, most common properties will be explained in detail to allow you to style each component as you like.

    Size Settings

    An element’s size can be determined using this property. You can set the values for height and width using the following parameters:

  • Min Width: Specifies the minimum width of an element. It accepts a positive number or the variable ‘min’, which equals 0 pixels.
  • Pref Width: Specifies the preferred width of an element accepting four different values: a positive number, ‘min’, ‘auto’, and ‘max’. ‘Auto’ will resize the element based on its contents.
  • Max Width: Specifies the maximum height of an element. It accepts a positive number or the variable ‘max’, which equals 100,000 pixels.
  • Min Height: Specifies the minimum height of an element. It accepts a positive number or the variable ‘min’.
  • Pref Height: Specifies the preferred height of an element accepting four different values: a positive number, ‘min’, ‘auto’, and ‘max’.
  • Max Height: Specifies the maximum height of an element. It accepts a positive number or the variable ‘max’.
  • Padding: Determines the space from right, left, top, and bottom for the child element within a container or another component. The default setting for this feature sets the padding for an element all at once.
  • Display Settings

    You can use this property to modify the design and position of an element. Click on, and you can find the following options in the ’Display Settings’ tab of the Properties Panel:

  • SVG String: Specifies the shape of the component. You can either import an SVG file by choosing it from your computer or define the vector coordinates directly in the text field.
  • Content Alignment: Determines the alignment of the component’s contents.

  • Visible: Determines the visibility of the selected element.

  • Pick on Bounds: Triggers the mouse event within the geometric boundaries of an element. If the component has a non-rectangular shape and this is deactivated, mouse events are triggered within the enclosing rectangle.
  • Focus Traversable: Determines if an element should receive focus when you navigate an interface using the keyboard.
  • Mouse Transparent: Determines whether an element should receive a mouse event or pass it on to the underlying node
  • Opacity: Specifies the degree of transparency of an element.

  • Blend Mode: Specifies the blending manner of two elements when overlapped. It accepts the following values:
    • - ADD: Adds the color values of the top and bottom elements.
    • - COLOR_BURN: Divides the inverse of the bottom element’s color by the top element’s color, then inverts the result.
    • - COLOR_DOGE: Divides the bottom element’s color by the inverse of the top element’s color, then inverts the result.
    • - DARKEN: Displays the color of the darker element.
    • - DIFFERENCE Subtracts the color of the darker element from the color of the lighter element.
    • - EXCLUSION: Multiplies and doubles the colors of both elements, then subtracts the result from the sum of the color components of the bottom element.
    • - HARD_LIGHT: Multiplies or screens the colors of both elements based on the color of the top element.
    • - LIGHTEN: Displays the color of the lighter element.
    • - MULTIPLY: Multiplies the colors of both elements
    • - OVERLAY: Multiplies or screens the colors of both elements based on the color of the bottom element.
    • - SCREEN: Inverts and multiplies the colors of both elements, then inverts the result.
    • - SOFT_LIGHT: Softens or lightens the colors of both elements based on the color of the top element.
    • - SRC_ATOP: Fills the overlapping area with the color of the bottom element and the non-overlapping area with the color of the top element.
    • - SRC_OVER: Draws the top element over the bottom element.
  • Cursor: Specifies the shape of the cursor when hovering an element. It accepts the following parameters:
    • - Default: Displays the cursor as an arrow.
    • - Crosshair: Displays the cursor as a plus sign used for selection.
    • - Hand: Displays the cursor as a hand sign, often used for clickable elements.
    • - Move: Displays the cursor as a hook sign that can be used to change the position of an element.
    • - E-resize: Indicates the possibility of resizing an element from the right.
    • - H-resize: Indicates the possibility of resizing horizontally.
    • - NE-resize: Indicates the possibility of resizing an element from the top right.
    • - NW-resize: Indicates the possibility of resizing an element from the top left.
    • - N-resize: Indicates the possibility of vertical resizing from the top.
    • - SE-resize: Indicates the possibility of resizing an element from the bottom right.
    • - SW-resize: Indicates the possibility of resizing an element from the bottom left.
    • - S-resize: Indicates the possibility of resizing an element vertically from the bottom.
    • - W-resize: Indicates the possibility of resizing an element horizontally from the left.
    • - V-resize: Indicates the possibility of resizing vertically.
    • - Text: Displays the cursor as a capital I, indicating that input can be entered.
    • - Wait: Displays the cursor as an animated loop shape, indicating the busy state of an element.

    Border Settings

    This tab provides two types of borders to be applied around an element: Base Border and Image Border. Click on, and you can find the following options in the ’Border Settings’ tab of the Properties Panel:

    Padlock: Displays four different directions: top, bottom, left, and right. The padlock facilitates creating borders with different designs or none for each side by selecting the corresponding direction.

    Base Border

  • Border Style: Specifies the style of the border based on the values: hidden, dotted, dashed, and solid.
  • Color: Specifies the color of the border.
  • Width: Specifies the width of the border.
  • Radius: Specifies the border radius.
  • Insets: Specifies an inward offset of the border.
  • Image Border

  • Image Repeat: Repeats the image based on the following parameters:
    • - Repeat-x: Repeats the image horizontally.
    • - Repeat-y: Repeats the image vertically.
    • - No-repeat: Does not repeat the image.
    • - Round: Repeats and stretches the image to fill the empty space without clipping.
    • - Space: Repeats the image to cover the area in a way that distributes the extra gap around the tiles.
    • - Filled: If checked, the border will cover the central patch.
    • - Image Border Width: Specifies the width of the Image Border.
    • - Image Insets: Specifies the inward offsets for Image Border.
    • - Percentage: If checked, calculates Image Slice in percentage.
    • - Image Slice: Divides the border into the given number of regions

    Background

    You can change the background of an element using this property. Click on, and you can find the following options in ’Background Settings’ of the Properties Panel:

    Background Color: Provides a set of colors for the background of an element.

    Image Path: Allows you to select an image as the background of an element.

    Image Repeat: Repeats the image based on the following parameters:

  • Repeat: Repeats the image as much as possible to fill the area. There are times when the image can get clipped
  • Repeat-x: Repeats the image horizontally at the specified position.
  • Repeat-y: Repeats the image vertically at the specified position.
  • No-repeat: Does not repeat the image.
  • Space: Repeats the image to fill the area without clipping. The extra gap is distributed around the tiles.
  • Space-x, Repeat-y: Combines the properties of Space and Repeat. In the horizontal direction, the image gets repeated with a gap in between the tiles with no clipping. On the contrary, there will be no space in the vertical direction, and the image can get clipped.
  • Repeat-x, Space-y: Similar to Space-x, Repeat-y with the difference that the x and y coordinates are exchanged.
  • Space-x, Round-y: Combines the properties of Space and Round. The image gets repeated as often as possible to cover the area with no clipping. It will be stretched vertically, and there will be a gap in between the fragments horizontally.
  • Round: Repeats the image to fill the area without clipping. The image is resized to fill the empty space.
  • Round-x, Repeat-y: Repeats the image as much as possible applying the properties: Round horizontally and Repeat vertically.
  • Repeat-x, Round-y: Repeats the image as much as possible applying the properties: Repeat horizontally and Round vertically.
  • Round-x, Space-y: If checked, the border will cover the central patch.
  • Image Border Width: Similar to Space-x, Round-y with the difference that the x and y coordinates are exchanged.
  • Image Fit: Changes the image size based on the following parameters:

  • Auto: Preserves the original size of the image.
  • Cover: Shrinks the image to the smallest size, preserving its aspect ratio.
  • Contain: Expands the image to the largest size, preserving its aspect ratio.
  • Image Position: Determines the position of the background image based on the self-explanatory values in the dropdown menu.

    Image Size:

  • Percentage: If checked, Width and Height will be calculated in percentage.
  • Width: Determines the width of the background image.
  • Height: Determines the height of the background image.
  • Horizontal Offset: Determines the horizontal offset of the background image.
  • Vertical Offset: Determines the vertical offset of the background image.
  • Percentage: If checked, Horizontal Offset and Vertical Offset will be calculated in percentage.
  • Radius: Defines the radius at which the corners of the background will curve.
  • Insets: Defines the inward offsets of the background image from four different directions in the padlock.
  • Snap to Pixel: Sets the position, spacing, and size of the components within an element to pixel boundaries.
  • Transformation

    You can use the attributes in this panel to apply different types of transformations to an element. Click on , and you can find the following options in the ’Transformations’ tab of the Properties Panel:

  • Scale: Scales an element along the x-axis and y-axis.
  • Translate: Moves an element very precisely based on the given x and y coordinate
  • Rotate: Rotates an element based on the given angle either manually or using the slider.
  • Rotation Axis: Defines the x, y, and z axes at which an element should be rotated. The default value is always set to 1 on the z axis.
  • Accessibility

    PixelFree Studio enables your application to work with external accessibility services. Using this property, your product can provide a better user experience for individuals with visual, auditory, and cognitive impairments. Click on, and you can find the following options in the ’Accessibility Settings’ tab of the Properties Panel:

  • Accessible Help: Provides a detailed description of a control.
  • Accessible Role: Defines the role of an element used by accessibility services to determine the relevant actions and attributes for an elemen
  • Accessible Role Description: Customizes the description of a role.
  • Accessible Text: Instructs the Screen Reader on articulating the information within a control.
  • Text Properties

    This panel appears when you click on the controls: Button, Label, Toggle Button, and Dropdown. Click on, and you can find the following options in the ’Labeled Text Properties’ tab of the Properties Panel:

  • Display Text: Sets the text that will be displayed.
  • Font Family: Sets the font family. PixelFree Studio can recognize the installed fonts on your computer and display them in the selection folder. In case you want a specific font that is not part of the suggested ones, you should install it on your PC.
  • Font Weight: Determines the font’s weight based on the values: Normal and Bold.
  • Font Size: Sets the font size
  • Text Alignment: Sets the alignment of a text within an element to left, center, right, or justified.
  • Text Color: Change the color your text
  • Styling: Offers the possibility of styling the text according to the parameters: Italic and Underline.
  • Overflow: Determines how to deal with the overflow of the text within an element by displaying a random string. The default value for this string is ... , which can be replaced by any set of characters in the text field under ‘Ellipsis String’. The position of this string can be determined by selecting one of the following values from the dropdown menu:
  • CENTER_ELLIPSIS: Positions the Ellipsis String in the middle of the text.
  • CENTER_WORD_ELLIPSIS: Positions the Ellipsis String in the middle of the text, ensuring it occurs between full words.
  • CLIP: Hides the overflow.
  • ELLIPSIS: Positions the Ellipsis String at the end of the text.
  • LEADING_ELLIPSIS: Positions the Ellipsis String at the beginning of the text.
  • LEADING_WORD_ELLIPSIS: Positions the Ellipsis String at the beginning of the text, ensuring to remain only full words.
  • WORD_ELLIPSIS: Positions the Ellipsis String at the end of the text, ensuring to remain only full words.
  • Line Spacing: Specifies the vertical distance between two lines of text.
  • Wrap Text: Breaks long words and wraps them to the following line. This property prevents overflow when an unbreakable string is too long to fit in the containing box.
  • This property is available for the elements: Label, Paragraph, Button, and Toggle Button. Click on, and you can find the following options in the ’Link’ tab of the Properties Panel:

  • Web Link: Links to a web page via the given URL.
  • Page Link: Links to another page in the same project created in PixelFree Studio.
  • Icon

    You can use this setting to choose an image or an SVG as an icon for the components: Button, Toggle Button, and Label. Click on, and you can find the following options in the ’Icon Settings’ tab of the Properties Panel:

  • File Path: Specifies the path where the image or SVG for the icon is located.
  • Graphic Text Gap: Determines the space between the icon and the text
  • Icon Width: Specifies the width of the icon.
  • Icon Height: Specifies the height of the icon.
  • Fit Size: The icon’s size will grow as wide as the main component.
  • Selection

    This property is related to the elements: Check Box, Toggle, and Radio Button. Click on, and you can find the following option in the ’Selection’ tab of the Properties Panel:

  • Selected: If checked, the element will remain selected by default.
  • Form Validation

    Form Validation is a property attributed to form the components: Password, Text Field, and Text Area. This property can be used to specify the type of input a component can accept based on the indicated criteria. Click on, and you can find the following options in the ’Form Validations’ tab of the Properties Panel:

  • Mandatory: If checked, the element must not be empty.
  • Use Condition: If selected, you can create rules to validate an input by checking the following criteria:
  • Allow Letters: Allows alphabetical input (A-Z, a-z).
  • Allow Numerical: Allows numerical input (0-9).
  • Allow Negative Numbers: Allows negative numbers as input.
  • Allow Special Characters: Allows special characters as input.
  • Allow White Space: Allows whitespace as input.
  • Use Regex: If selected, you can use a regular expression for validating the input. Use the text field below to define the regular expression.