Documentation

Thanks for joining the PixelFree family

The following documentation is intended to assist you in understanding how to navigate our evolutionary software.

version

Version

3.0
version

Author

Fabian Sattler | Melina Wonn
version

Created

17 January, 2022
version

Updated

23 June, 2023

Installation

Follow the steps below to setup PixelFree Studio

How do I create a project?

Start PixelFree Studio.

create-img

You can choose whether to create a new project or open an already created one.

For a new project, select: Create New.

create-img

In the next window, you enter the project’s and document’s names.

You can specify where the project will be saved.

With the Project description option, you can specify an exact description for the project.

create-img

In the next window, you can set the base resolution of the project. You can choose between Mobile, Tablet, and Desktop.

The default value is always Desktop the desktop resolution.

How to export a project

Click on the export button. You will find this button in the project navigation bar on the right side.

export-img

Choose your language and click on export.

export-img

The code files will be stored locally.

export-img
export-img

Figma Import: Instructions on how to find Project Key and Personal Access Token

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

A. Enter your Figma Project Key and Personal Access Token.

B. Select where you want to save your project.

C. Then use the checkboxes to select which pages of your Figma project you‘d like to import.

export-img

Click Import to import your selected pages

export-img

Now you are ready to adjust your imported Figma design. Above, in the window, you can see a basic page on how to assign individual elements to your Figma images.

1. All elements imported from Figma are displayed here. Only the currently selected page is shown.

2. The current selection is displayed.

3. In this step, you assign an element to each Figma element. For example, you choose whether an text element should be an label or imported as a vector, or if the footer has a base as an AnchorPane with buttons inside.

4. Similarly to the picture above, you will see a preview of your project in PixelFree Studio.

5. Now press import and your project is complete, ready to be exported and converted into human-readable, production-ready code.

IMPORTANT

At present, you still have to set all anchorpane constraints values manually. We are planning a future near-term release that will automatically set constraints.

Layout

Documentation and examples for Layouts

Anchor Pane

You can find the Anchor pane in the container menu:

anchorpane-img-1

The Anchor Pane holds individual objects firmly in their position. Even if you change the size of the Anchor Pane, the particular objects remain in the position in which they were set. This allows you to work more flexibly. If you resize the Anchor Pane, our tool enables you to do this as far as the individual objects allow. Each object has its size and its place within the Anchor Pane. This means you can only shrink the Anchor Pane as much as the individual objects permit. The advantage of this is that if you find that your Anchor Pane is too big, but your design fits, you can shrink the Anchor Pane without fear of losing your design.

The first object in our stack pane is the image you want to use. We supplement this in our display with four buttons. The objects are added one after the other and keep their order, fort he purposes of manipulating them using the features within our tool.

An anchor pane is always the basis of all designs. The following is our example of a landing area:

anchorpane-img-2 anchorpane-img-4

The Base_Anchorpane is set to 0 in the AnchorPane Constraints Menu at the Top, Left, and Right. This ensures that the landing area is permanently stuck to the sides. When the screen enlarges, the background image automatically enlarges with it.

anchorpane-img-5

The same applies to the Navigation Bar. Only this is located in the Base_Anchorpane.

anchorpane-img-7

The Text V-Box was also set using the AnchorPane constraints since it is located in the Anchor Pane. This will always maintain 200-pixel spacing from the top and 100-pixel spacing from the left, regardless of how big or small you make the screen. To see the landing area on mobile screens, you must set Smart Divisions (see documentation for Smart Divisions) accordingly.

anchorpane-img-7

It is essential to mention that the AnchorPane Constraint values only apply to the selected Anchor Pane. If you drag a new Anchor Pane into your project, you should assign new constraints to those elements. It is especially helpful to do this if you create several sections on one website. If you fail to do so, the values will be taken from the position of the elements in the Anchor Pane and the Anchor Pane will not automatically adjust but, rather, will maintain specific values.

Accordion

The Accordion can be found in the Layout/Container menu:

anchorpane-img-1

An Accordion is a grouping of Titled Panes. Only one Titled Pane can be open at a time. The content of the Titled Pane in an Accordion can be any element. The Accordion is an excellent tool for designing such items as FAQ's, for example:

anchorpane-img-2

The base of an Accordion is an Anchor Pane in which the individual Tideld Panes (as indicated below) are located.

anchorpane-img-4

You can add as many Titled Panes as you like. This is done in the Accordion properties panel.

anchorpane-img-5

The Titeled Pane behaves like all other containers. You can design whatever you want in the Titeled Pane. This is done by simply dragging and dropping individual controls or layout/containers. Since the base of the Accordion is an Anchorpane, you can also change the background color of the Anchorpane.

anchorpane-img-7

If you want to change the background color of the Titled Pane bar. Then this must be collapsed.

anchorpane-img-7

Thus, it is also possible to set the opacity to 0 and create a transparent background.

anchorpane-img-7

If you want to change the background for the content of the Accordion you have to unfold the Titled Pane.

anchorpane-img-7

This makes it very easy to change the respective area of an Accordion in the background menu.

HBox

The H Box can be found within the containers menu:

hbox-img-1

The H Box arranges objects in a single horizontal row. If the H Box has a frame and/or padding, then the contents are arranged within these inserts.

Since the H Box is a container, you can drag and drop all the controls into it. The individual elements are automatically placed in the horizontal direction.

This can be used, for example, to create a navigation bar for a website.

hbox-img-2

In the Anchor Pane Constraints menu at the bottom right of your screen, you will find options for positioning. Using that feature, you can locate the exact position of an object on the website you are creating.

Enter a 0 for Top, Left and Right. By doing so, the H Box gets attached to the top of the page, completely filling the space up to the left and right side margins.

hbox-img-3

The object will remain there permanently, even if you change the size of the page. Thus, the navigation bar has a fixed position.

In the H Box menu, you can set the distance that all objects in the H Box have in relation to each other. The distance here, for example, is 5 pixels.

hbox-img-4

If you want the elements in the H box to all be centered, you can go to the Display Settings menu and change the desired position by choosing the desired Content Alignment.

hbox-img-5 hbox-img-6

VBox

The V Box can be found within the containers menu:

The V Box arranges its objects in a single horizontal row. If the H Box has a frame and/or padding, then the contents are arranged within these inserts.

Since the V Box is a container, you can drag and drop all the controls into it. The individual elements are automatically placed in a horizontal direction.

For example, with the V Box you can design a text section for a landing area.

vbox-img-2

In the Anchor Pane Constraints Menu at the bottom right you will find options for positioning. Using that function you can affix the exact position of an object on the website.

vbox-img-3

In the V Box menu, you can set the distance that all objects in the H Box have in relation to each other. The distance here, for example, is 5 pixels.

If you want the elements in the V Box to be arranged in the center, for example. you go to the Display Setting menu and change the desired position in Content Alignment.

vbox-img-4 vbox-img-5

GridPane Doc

The grid pane can be found with the containers

GridPane places its elements (controls/layouts) within a flexible grid of rows and columns. When a border and/or padding is set, the content is placed within these insets.

An element can be placed anywhere within the grid and can span multiple rows/columns.

With the grid pane, it is possible, for example, to create scroll bare image galleries or to place images in a landing area in different arrangements, sizes, and angles. But also, when you create a login screen, you can also use a Grid Pane to specify exactly in which column/row and in which distance the elements should be.

Example projects

Mobile Image gallery

grid-img

Formula example in a grid pane

grid-img

Gridpane menu

H Gap: Specifies the horizontal distance between the elements

V Gap: Specifies the vertical distance between elements

grid-img

Grid pane Constraints menu

grid-img

- Row Index: column where the child's layout part starts.

- Column Index: row where the child's layout part begins.

- Row Span: the number of columns over which the child's layout area spans horizontally.

- Column Span: the number of rows over which the child's layout area extends vertically.

- Halignment: the horizontal alignment of the elements within its layout area.

- Valignment: the vertical alignment of the elements within its layout area.

- Hgrow: The horizontal growth has priority for the element.

- Vgrow: The vertical growth has priority for the element.

- Margin: Margin area around the outside of the elements.

Scroll Pane

The scroll pane can be found in the container menu

A scroll pane that provides a scrolled, clipped viewport of its contents. It allows the user to scroll the content around either directly (panning) or by using scroll bars. The ScrollPane allows specification of the scroll bar policy, which determines when scroll bars are displayed: always, never, or only when they are needed. The scroll bar policy can be specified independently for the horizontal and vertical scroll bars.

scroll-img scroll-img

Fit to Width

If enabled and if the contained node is Resizable, then the node will be kept resized to match the width of the ScrollPane's viewport.

Fit to Height

If enabled and if the contained node is a Resizable, then the node will be kept resized to match the height of the ScrollPane's viewport.

Pannable

Specifies whether the user should be able to pan the viewport by using the mouse.

HBar Policy

Specifies the policy for showing the horizontal scroll bar.

VBar Policy

Specifies the policy for showing the vertical scroll bar.

Hmin

The minimum allowable hvalue for this ScrollPane.

Vmin

The minimum allowable vvalue for this ScrollPane.

Hvalue

The current horizontal scroll position of the ScrollPane.

Vvalue

The current vertical scroll position of the ScrollPane.

Hmax

The maximum allowable hvalue for this ScrollPane.

Vmax

The maximum allowable vvalue for this ScrollPane.

Min Viewport Width

Specify the minimum width of the ScrollPane Viewport.

Min Viewport Height

Specify the minimum height of the ScrollPane Viewport.

Pref Viewport Width

Specify the preferred width of the ScrollPane Viewport

Pref Viewport Height

Specify the preferred height of the ScrollPane Viewport.

Button

You can find the button and all others controls in the control menus.

button-img

First, we drag and drop a Button onto the page.

button-img

In the properties panel, you will find menus that are only available for the button. This is the link menu and the add icon menu.

button-img

In the link menu, it is possible to link other pages that have been created in PixelFree Studio. So it is now possible that the user can create 20 pages in PFS and link them directly.

In the add icon menu it is possible to assign icons to a button.

button-img

- File Path: Location of the icon on the computer.

- Graphic Text Gap: Specifies how big the gap between graphic and text is. Here it is 10 pixels.

- Content Display: Specifies where the graphic should be located.

- Width: Width of the icon

- Icon Height: height of the icon.

Background menu.

With Button it is possible to set a background image in the same way as with all other contols and layouts.

button-img button-img

This can be used for example if you want to have an image as a link or if you want to have a logo in the navigation bar and link it to the home page so that the user always comes back.

Border menu

It is also possible to add a border to the button. For this you have to go to the Border menu.

button-img button-img

You can create a basic border or create your own. You can read about how to do this in the Border documentation.

button-img

In the display settings it is also possible to change the cursor when hovering over it. This way you have the possibility to show the user that he is currently performing a click event on a button, for example.

Display Setting menu

Password Field

With the Password Field element, you can easily create password fields that can be manually filled in. You can use this feature to create login forms. A backend developer can then intercept the values in the fields.

The Password field can be found in the Control menu.

vbox-img-1

The Password Field behaves like a text input field. The only difference is that you can't see the text, which is hidden with dots.

Text input field

Radio Button and Checkbox

You can use the Radio Button and the Checkbox for various features on your website, such as creating an option for your user to accept Terms of Service.

Both the Radio Button and Checkbox can be found in the control menu.

Both elements behave in the exact same way. The only difference is the design.

PixelFree Studio allows you to design Radio Buttons and Checkboxes for individual use.

vbox-img-1

SVG

PixelFree Studio also supports the importing of SVGs into your project. When exporting your project, the SVGs get converted into the respective programming language you choose, providing both the image and native code fort he SVG in that particular computer language (i.e. HTML, CSS, Java, etc.)

PixelFree Studio allows you to design Radio Buttons and Checkboxes for individual use.

Preserve Ratio:

Allows you to preserve the media’s aspect ratio (width/height) when scaling it to fit the element.

Path: Here you select the image you want to have in your project.
Viewport X/Y: Specifies a rectangular viewport into the media frame.
Fit Width/Hight: Sets the size of the video with the width and hight values.

Text Input

Using Text Input feature, you can create text fields that can be filled in. This feature is highly useful for creating forms. A backend developer can then intercept the values input into the text field.

The Text Input option can be found in the Control menu.

vbox-img-1

vbox-img-1

vbox-img-1

The Text Input field can be edited just like all other elements with the basic settings from the properties panel. The Text Input field also has its own panel on the right hand side oft he screen.

vbox-img-1

Prompt Text:

Sets the prompt text.

Font Style:

Sets the font you desire

Editable:

When this field is checked, the user can enter text directly into your form

Paragraph Function:

You will find the paragraph in the control menu.

Paragraphs are for projects requiring adding much text to a website section.

button-img

It is possible to change the paragraph's background in the properties panel's background menu.

button-img button-img

When the paragraph has been selected with a double click, you can see in the top bar that the text editor options are activated. With these options, you can edit the paragraph as you like.

Image

In PixelFree Studio it is also possible to add images as a control element.

The image component can be found in the control menu. By default, images are always loaded with their full size.

button-img

Preserve Ratio:

Whether to preserve the media’s aspect ratio (width/height) when scaling it to fit the Element.

Path: Here you select the image you want to have in your project.
Viewport X/Y: Specifies a rectangular viewport into the media frame.
Fit Width/Hight: Sets the size of the video with the width and hight values.

Video

PixelFree allows you to simply add videos directly into your project.

The Video component can be found in the Control Menu.

vbox-img-1

vbox-img-1

Preserve Ratio:

Allows you to preserve the media’s aspect ratio (width/height) when scaling it to fit the Element.

Smooth:

When set to activated, a better quality filtering algorithm will within the bounding box provided by fit width and fit heigh
Path: Here you select the image you want to have in your project.
Viewport X/Y: Specifies a rectangular viewport into the media frame.
Fit Width/Hight: Sets the size of the video with the width and hight values.

Prompt Text:

SVG

PixelFree Studio also supports the use of SVG. When exporting, these are generated in the respective programming language.

button-img

Preserve Ratio:

Whether to preserve the media’s aspect ratio (width/height) when scaling it to fit the Element.

Path: Here you select the image you want to have in your project.
Viewport X/Y: Specifies a rectangular viewport into the media frame.
Fit Width/Hight: Sets the size of the video with the width and hight values.

Smart Divisons

divison-img

We will convert this landing page using smart divisons for mobile applications.

Basic structure

There is a combo box hidden in the navigation bar.

divison-img

To make them visible, we need to select them and in the display settings put the hook in visible.

divison-img

So we can see the combo box. We need the combo box so that we later have a menu guide on a mobile screen.

divison-img
divison-img

When the dropdown is selected we can add more list elements in the properties panel and also link them to other pages. These pages can be created in our software or be links to other websites.

divison-img

But on the regular screen, we don't need a dropdown as a menu guide so that we can hide the dropdown again in the Display Setting Menu.

This is the basic structure we have.

Enable Smart Divisons

The Smart divisions can be found at the top of the Properties panel.

divison-img

With add we add another smart division.

divison-img

You can change the name of the Smart division as you wish. Here we keep the default name.

In the field next to the W we can specify from which width the smart division should take effect. Here in our example it is from the width of 350px.

divison-img

In the design phototyper, we now see a dashed line indicating where the Smart Division is located.

divison-img

Now we select the created Smart Division in the Smart Division menu. We now also see that the line is no longer dashed but drawn through. This indicates which Smart Division you are currently in.

divison-img
divison-img

After that we go to the property panel and change the visibility of the buttons in the display menu.

divison-img

In the Smart Division menu, the Auto Snap checkbox is now set. This ensures that you also see how the selected Smart Division looks on smart phones.

divison-img

Library feature

It is now possible to build your components of individual websites in our Design Prototyper and then use them at any time in the current project or another.

To add a group to the library, select the group. In our example, it is the navbar.

library-img

There are two ways to add a new group to the library.

- With control + g on windows or command + g on mac

- right-click in the group and use the context menu.

library-img

In both cases, the following window opens:

library-img

Here it is possible to select what should be in the group and change the name.

The group appears in the Library menu if you press the Save button.

library-img

Now it is possible to drag and drop the navbar onto the canvas on another page with the same settings.

library-img

All groups in the library are stored in the Library folder above the actual project.

library-img
library-img

You can now use them for other projects or send them to someone else to use.

The only thing he has to do is put the library folder over the project folder.

Properties Panel

The Properties Panel is located on the right side of the screen. The Properties Panel is one of the core elements of PixelFree Studio. It is used to design all controls and layouts.

The Properties Panel constantly adapts automatically to the corresponding control/layout element because each element has unique design flexibility.

Text Settings

You can use this feature to adjust the text of all elements by making adjustments in the text properties within the text settings (as noted below).

vbox-img-1

Display Text: Sets the text that will be displayed.

Font Family: Sets the font family. PixelFree Studio recognizes which fonts are installed on your computer and displays them in the selection folder. So, if you want a specific font that is not one of the suggested ones, you can install the corresponding font from your computer.

Text Color: Sets the text color.

Font Weight: Sets the font weight to Bold, Extra Bold, Extra Light, Light, Medium, Normal, Semi-Bold, and Thin.

Font Size: Sets the font size.

Text Alignment: Defines the orientation of the text. If you want a single word to be aligned to the left, for example, you must go to the Display Settings and select "Center-Left" for Content Alignment. But for a Label, for example, Wrap Text must be enabled to generate multiple lines.

Styling: Offers the possibility of defining if the text should be italic or underlined.

Overflow

The text-overflow CSS property sets how hidden overflow content is signaled to users. It can be clipped, display an ellipsis ('…'), or display as a custom string.

vbox-img-1

Clip:

The default for this property. This keyword value will truncate the text at the limit of the content area. Therefore, truncation can happen in the middle of a character. To clip at the transition between characters, you can specify text-overflow as an empty string if that is supported in your target browsers: text-overflow.

Ellipse:

This keyword value will display an ellipsis ('…', U+2026 HORIZONTAL ELLIPSIS) to represent clipped text. The ellipsis is displayed inside the content area, decreasing the amount of text displayed. It gets cut if there is not enough space to display the ellipsis.

Ellipsis String: Specifies how the overflow should appear. The default value is always `...` but can also be changed to `***.`

Wrap Text:

This property breaks the long words and wraps them onto the following line. This property prevents overflow when an unbreakable string is too long to fit in the containing box. This property defines the breaks in the word to avoid overflow when a term is too long to do display in the container.

Size Settings:

vbox-img-1

Using the Size Settings menu, you both set the size of each element and its constraints.

Min Width/Min Height: Sets an element’s minimum width and height. An element can never be smaller than the entered values.

Width/Pref Height: Sets an element’s preferred height and width.

Max Width/Max Height: Sets the main element’s maximum height and width. An element can never be larger than the entered values.

Constraints

Padding:

The default setting fort he Padding feature sets the padding area on all four sides of an element at once. This ensures that all four sides (top, bottom, left, and right) always change in sync. You can also manually apply different padding on each side. For this, you have to click on the padlock, to begin. When this is deactivated the value changes on one side at a time.

Margin:

The Margin default setting sets the margin area on all four sides of an element at once. This ensures that all four sides (top, bottom, left, and right) are changed proportionately.

The Margin con only be activated in the HBox and VBox containers.

You can manually set different margins for each side. For this, you have to click on the padlock. Once this is deactivated the value changes on one side at a time.

Transform settings

vbox-img-1

In the Transform menu, you have the option of activating additional sizing options.

Scale:

The default value is always 1. If you set the value to 2, then the size of the element at the x and y coordinates is doubled. With the value 3, the initial size is tripled, and so on.

Translate:

With Translate option, you can move the element very precisely at the x and y coordinates.

Rotate:

The Rotate option allows you to rotate your element with specificity.

Rotation Axis:

With the Rotation Axis, you define the axis at which the element should be rotated. The default value is always set to 1 on the Z axis. You have the ability to rotate all three axes at the same time.

Display Settings:

vbox-img-1

SVG String:

PixelFree enables you to create an element in the form of an SVG. For this, you only have to select the corresponding SVG and add it tot he stage.

Content Alignment:

With the Content Alignment options, you can define how elements are displayed in an HBox and VBox. Or, you can locate where the text should be placed within a button. The PixelFree design tool offers the following options:

- Baseline Center

- Baseline Left

- Baseline Right

- Bottom Center

- Bottom Left

- Bottom Right

- Center

- Center Left

- Center Right

- Top Center

- Top Left

- Top Right

Visible:

Allows you to make an element visible or invisible

Disabled:

Allows you to disable a button if it is not needed yet

Managed:

This function defines whether or not this element layout will be managed by its parent.

Pick On Bounds:

This feature defines how the picking computation is done for this element when triggered by a MouseEvent.

Focus Traversal:

Specifies whether this node should be a part of the focus traversal cycle.

Mouse Transparent:

When enabled, this element (with all its children) is entirely transparent to mouse events.

Opacity:

This feature provides the flexiblity to enable every level of opacity from full color to complete clarity.

Blend Modes:

This function enables blending of your content.

Cursor:

Allows you to select the shape of the mouse icon from a varied array of when hovering over the element.

Border Menu:

Using the Border Menu, you can create an individual border for each element. You can choose between a Base Border, a Custom Border, and an Image Border.

vbox-img-1

vbox-img-1

The rectangle above demonstrates which border the Broder options you can choose from. By default, the padlock is always activated, ensuring that all four borders are processed simultaneously. If you deactivate this feature, you can process each border individually

Base Borderstyle:

vbox-img-1

Border style:

This provides the option to choose which border you want to use. You can choose between Hidden, Solid, Dotted, and Dashed.

vbox-img-1

The icon pictured above sets the border color.

vbox-img-1

vbox-img-1

In the images above, you can see an example of how a border might look.

Utlizing Width, you set the width of the border. The higher you set the Width, the larger the Border will be.

Utilizing Radius, you define how strong the curves of a border will be.

Utilizing Insets, you define how far the border should be from the edge of the element.

vbox-img-1

vbox-img-1

With the Custom Border option, you can create your own individualized borders.

Stroke Type:

The Stroke Type defines where the border is located. You have the following options: Centered, Inside, and Outside. The position of the border changes based on the values you use..

Line Join:

Line Join determines how the corners will appear, e.g., rounded or squared.

Dash Offset:

If the stroke used is a dashing pattern. The Stroke Dash Offset property specifies the offset into a dashing pattern. i.e., the dash phase defines the point in the dashing pattern that will correspond to the beginning of the stroke.

Line Cape:

Defines the shape of the border elements, whether they should abut, be rounded or squared.

Dash Array:

Sets the distance between each border element.

Image Border:

You can also add images as borders to the individual elements.

vbox-img-1

vbox-img-1

Image Path:

Select the image you want to have as a border

Image Repeat:

Specifies whether the image should be repeated and, if so, whether it should be repeated on the x or y-axis.

Filled:

Fills the entire element with the image.

Image Border Width:

This value sets the size of the border.

Image Insets:

This value specifies the distance between the image and the element’s border.

Background Settings:

PixelFree enables you to define a background for each element.

vbox-img-1

vbox-img-1

Background Color:

Sets the background color of the element.

Image Path:

Allows you to set an image as the background to an element.

Image Repeat:

Determines if the background image should be repeated. If yes, you can repeat the image on the x and y axis.

Image Fit:

You can define how the image will behave in the element utilizing Image Fit, using the image to fill the entire container.

Image Size:

Here, you can set the size of the background image. You can choose between pixel and resolution options for setting percentage values.

Radius:

This feature enables you to specify whether the background of an element should have rounded corners.

Insets:

Sets the distance of the background from the border of the element.