Thank you for joining the PixelFree family.

The following documentation is intended to help you understand how to navigate and use our software. Or read or blog here

version

Version

1.40.0
version

Author

Azada Shams
version

Created

06 January, 2022
version

Updated

08 April, 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 run the exported project.

For Vue, React and Angular there is an Edit-Export button that allows you to define which custom 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

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

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 the Figma project that you'd like to import

5. Click on 'Import' to start importing the 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. You can select multiple elements to combine them to one imported component. 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 elements selected after 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 position. 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,relative to its edges. 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 the 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 and the accordion.

    • 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. 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 VBox 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 in which you can position elements in cells through specifying 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 men, which appears if you click on a child element in the Grid Pane. If you select a Grid Pane, you can find the Grid Pane gaps tab where you can define the size of the gap between the elements.
    These are the Grid Panes properties:

  • 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 Align: Specifies the horizontal alignment of the elements in accordance with the values Left, Center and Right.
  • V Align: Similar to H Align, but the changes are applied to the vertical alignment and can have the values Tob, Center and Bottom.
  • 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. 
  • Grid Pane Gaps
    • - HGap:Sets the horizontal gap between the elements.
    • - VGap: Sets the vertical gap between the elements .

    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 properties of a Scroll Pane, select it and choose the Scroll Pane Tab in the Properties Panel on the right side of your screen. There you can find the following properties:

  • 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.
  • Hmin: Specifies the minimum value to start scrolling horizontally.
  • Hvalue: Indicates the current scrolling value horizontally. 
  • Hmax: Specifies the maximum value to end scrolling horizontally.
  • Vmin: Specifies the minimum value to start scrolling vertically.
  • Vvalue: Specifies the maximum value to end scrolling vertically.
  • Vmax: Specifies the maximum value to end scrolling vertically.
  • Min Viewport Width: Specifies the minimum width of the viewport.
  • Pref Viewport Width: Specifies the preferred width of the viewport.
  • Pref Viewport Height: Specifies the preferred height of the viewport.
  • Min Viewport Height: Specifies the minimum height of the viewport.
  • VBar Policy: This option is very similar to HBar Policy, applying the same changes to the vertical scrollbar. 
  • HBar Policy: Determines the visibility of the horizontal scrollbar based on the following three different values:
    • - Never: Hides the scrollbar.
    • - Always: Keeps the scrollbar visible all the time.
    • - As-needed: Adds the scrollbar as the width of the container gets smaller in size.

    • 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.

    These are the Flow Pane properties:

  • 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.
  • Orientation:
    • - horizontal: Arranges the elements horizontally.
    • - vertical: Arranges the elements vertically.

    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.

    These are the Hamburger Menu properties:

  • 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 checked.
  • 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 are not 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. You can clarify 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’ in the properties Panel.

    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. With a double-click on the default image, the file chooser opens. Now you can select an image.
    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 it 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 ofthe visible part of the SVG.
  • Viewport Y: Specifies the y coordinate of the visible part of the SVG.
  • Viewport With: This makes it possible to define the width of the viewport
  • Viewport Height: This makes it possible to define the height of the viewport
  • 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

    A carousel is a dynamic interface element that displays a collection of images in a sliding fashion, allowing users to browse through multiple items within a single space. The Images will slide through automatically or if users use the buttons at the bottom and the sides of the carousel.

  • Dropdown Menu: Maintains a list of the images to be presented.
  • Negative Sign: This allows you to delete an element from the carousel.
  • 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 slide through each image based on the specified Transition Time automatically.
  • Transition Time: Specifies the time for each transition in seconds
  • Move Slide: You can change the order of the slides by clicking to forward / backward button
  • 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 value of the radius.
    • - Left Button Text: Specifies a text for the button at the left side.
    • - Right Button Text: Specifies a text for the button at the right side.
    • - 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: Determines the color of the background 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: Determines the color of the dot of the radio button.

    Forms

    Text Field

    A Text Field can be used to enter any text 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 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. 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 Area’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.

    • Properties Panel

    The Properties Panel is a collection ofdifferent tabs used for changing the properties of components. When selecting a component, only the tabs needed for this component are visible. Some properties only apply to specific component types and are explained along the respective component. But most common properties are explained here.

    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 width 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 tab to modify the design and position of an element. Click on the icon, 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 position of the components content. Some examples for this are the position of the text/Icon of a Button or the children of a HBox
  • 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.
  • Disabled: Disables the components so that they are no longer clickable.
  • Managed: When unchecked, the element does not take up any more space from its parent.
  • 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 values:
    • - 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.
  • Node orientation:
    • - INHERIT: The orientation is inherited from the parent.
    • - RIGHT_TO_LEFT: Arranges the components from right to left.
    • - LEFT_TO_RIGHT: Arranges the components from left to right.

    Border Settings

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

    Padlock: Displays four different directions: top, bottom, left, and right. The padlock facilitates creating borders with different designs 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

  • 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
  • Image Path: Here you can input your own images
  • 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.

    Background

    You can change the background of an element using this tab:

  • Background Color: Provides a set of colors for the background of an element.
  • Image Path: Here you can input your own images.
  • 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 Fit: Changes the image size based on the following parameters:
    • - Auto: Preserves the original size of the image.
    • - Cover: Shrinks the image to cover the whole component while keeping it as small as possible and preserving its aspect ratio.
    • - Contain: Expands the image to completely fit inside of the component while keeping it as large as possible and 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 a component, 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 without changing where it takes up space in the parent
  • Rotate: Rotates an element based on the given angle. You can either set the angle manually or use 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 a component, 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 element
  • 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 a component, 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. Effects of this will be visible when the text has multiple lines (see Overflow)
  • Text Color: Change the color of your text
  • Styling: Offers the possibility of styling the text according to the parameters: Italic and Underline.
  • Line Spacing: Specifies the vertical distance between two lines of text.
  • Overflow:
      • Determines how to deal with text that does not completely fit inside the component.The default method is to cut of the text and add ‘...’ at the end, but the text added can be edited under the field ‘Elipsis String’
    • - 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.
    • - 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 a component, 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 a component, 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 high and wide as the main component.
  • Contend Display: This option defines where the icon should appear.

    • 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 components like these: 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 a component, 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.

    • Features

    Smart Division

    Smart Division equips you with the ability to create responsive web designs. This feature allows you to create better quality content for different screen sizes. Follow the steps below to create a fully responsive frontend with our Smart Divisions:

    1. To create a Smart Division, click on the Smart Division icon to the right of the gear icon in the property bar.

    2. Click on "Add" at the top to create a new Smart Division.

    3. Enter any name for the Smart Division and set the width, e.g. 450px.

    4. The Smart Division with the default size of your project will be displayed. To make changes to the design of the created Smart Division, you have to select the Smart Division first.

    You can create as many Smart Divisions as you like.
    If you select 'Auto Select', the design will automatically adapt to the appropriate Smart Division when you change the root size. With 'Auto Snap', the canvas will adapt to the selected Smart Division, i.e. the part behind the line is cut off

    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.