Form Elements
Before we start working with form elements design, you need to know that with the Fireblade plug-in you can define that a specific design element is a graphical representation of a basic browser component or a basic element of a kit of mobile interface such as form items or buttons.
For this to work, the Fireblade plugin needs to be properly marked with a specific notation written in the element's layer name, such as "Send @Button" in the case of a button.
These are the basic elements supported by the Fireblade plugin:
- Button:
- Simple notation: @Button;
- Web href notation: @Button $ href = 'http: //example.com';
- Link:
- Simple notation: @Link;
- Web href notation: @Link $href='http://exemplo.com';
- React Router href notation: @Link $href='/path';
- TextInput - notation: @TextInput;
- Checkbox - notation: @Checkbox;
- Radio - notation: @Radio;
- Radio Group - notation: @RadioGroup;
- List - notation: @List;
- Slot - notation: @Slot;
Button, Link, TextInput, Checkbox, Radio, RadioGroup and Slot must be group elements. List must be a RepeatGrid element.
The work to be done is basically to add the notations in the layer names and a few changes to the design layer structure.
First you will need to transform the Repeat Grid element into two groups because you must have two independent elements that will become the username and password forms.
Repeat Grid transformed into two groups.
Take a closer look at the Username form item.
Username form element.
TextInput's design suggests that the left, top and right edges are not visible and the bottom edge is visible, but transposes the text box to underline the form item's label. So we assume that all TextInput borders will be transparent and the visible bottom border will be the purely decorative line element that was already in the original design.
The new layer arrangement has a group that will serve as a container for the username element, where we find the decorative elements: Caminho 297 (a line element that simulates the bottom edge of TextInput) and Username (a text element that is the label of TextInput), inside the group with the @TextInput notation that will be transformed into a TextInput with transparent borders.
Initial arranje of the username form.
In order for the Fireblade plugin to understand that a group element of your design will be transformed into a TextInput on export, you must add the notation @TextInput to the group layer name and have elements of that group identified as #placeholder, #value and #container.
TextInput group with notation.
The element marked with #placeholder: corresponds to the placeholder attribute present in the input HTML element. An attribute that specifies a short hint that describes the expected value of an input field. It is suggested to use soft colors.
The Fireblade plugin will capture some visual attributes of the design element and make them CSS for the placeholder attribute of the HTML TextInput element at export time.
The element marked with #value: corresponds to the text box of the HTML element TextInput. This element must be invisible when performing the Preview and Export actions.
The Fireblade plugin captures some visual attributes of the text element and turns them into text style CSS for the HTML TextInput element.
The element marked with #container: matches the container and sets the background color and borders of the HTML element TextInput.
The Fireblade plugin captures some visual attributes of the element that should always be a rectangle and turns them into CSS for the TextInput HTML element.
The text element on your design marked with #value represents the text style of the HTML element TextInput's value attribute.
To style it, hide the #placeholder element and make the #value element visible. Remember that when you finish styling, hide the #value element and make the #placeholder element visible.
The #value element.
Note that the text element in your design marked with #value has the following text written: @value.
The Fireblade plugin at export takes any text written in the text element of your design and makes it the initial value of the HTML TextInput element.
In cases where we do not want any initial value set on the HTML element TextInput we need to have some text written in the text element in its design so that we can see the result of styling.
If you do not want any initial value in the HTML TextInput element, use @value. So the Fireblade plugin will understand that this sentence "@value" was used only for you can see the result of your styling and will ignore that text at export time, leaving its HTML TextInput element with initial value empty.
Now perform the preview action and check the result.
Username TextInput result.
The Fireblade plugin has converted graphics marked with notations (@ and #s) into a usable HTML TextInput by applying the style that has been set.
When you set the type of code to export to React, React Native, or LitElement, your design is exported as a component that can be imported and instantiated. In this case, TextInput HTML element can dispatch the onEnter and onChange events when used.
Just follow the same steps as the Username form element and verify the result.
Password form element result.
Note that the password text is being displayed. To prevent this from happening, the exported HTML TextInput element must be of type "password", so just change the text element notation of your design tagged #value to #password and the Fireblade plugin will understand that it is an element HTML TextInput of type "password".
The #password tag result.
Take a closer look at the Remember me form item.
Remember me form element.
The design suggests an HTML element of type Checkbox. In the Fireblade plugin this element type has three states: #default, #hover and #checked. The three elements should be represented as groups marked with their respective tag.
The first thing to do is to add the @Checkbox notation to the layer name of the "RememberMe" element. Then select your elements and group them. Tag this group with the #default tag.
Once you have created the #default group, duplicate this group, change the copy tag to #hover and make this group invisible. Then duplicate the #hover group, change the copy tag to #checked and make this group invisible as well.
Now we have the RememberMe group with the @Checkbox notation added in its layer name, and within three groups tagged with: #default (visible), #hover (invisible) and #checked (invisible).
"RememberMe" group layer arrangement.
The group tagged with #default represents the design / style of the unchecked state. The group marked with the #hover tag represents the design / style of the mouse hover state when the element is unchecked. The group marked with the #checked tag represents the design / style of the state when the element is checked.
The next step is to style groups marked as #hover and #checked.
To be able to style the design element that represents the hover state of the HTML Checkbox element, Make the group marked with the #hover tag visible and make the other groups (#default and #checked) invisible.
Now feel free to modify the visual attributes of the internal elements of the group that represents the hover state of the HTML Checkbox element.
"RememberMe" form element with the #hover state style.
Be sure to return the visibility setting for groups that present the Checkbox HTML element states, within the "RememberMe @Checkbox" element, to: #default (visible), #hover (invisible), and #checked (invisible) before to trigger view or export actions.
Now perform the preview action and check the result. To see the result of the hover state style, hover over the "Remember me" checkbox.
"RememberMe" #hover state.
To be able to style the design element that represents the checked state of the HTML Checkbox element, make the group marked with the #checked tag visible and make the other groups (#default and #hover) invisible.
Now feel free to modify the visual attributes of the internal elements of the group that represents the checked state of the HTML Checkbox element.
For the #checked state you will need to add a visual element that displays the Checkbox HTML element as checked.
"RememberMe" form element with the #checked state style.
Be sure to return the visibility setting for groups that present the Checkbox HTML element states, within the "RememberMe @Checkbox" element, to: #default (visible), #hover (invisible), and #checked (invisible) before to trigger view or export actions.
Now perform the preview action and check the result. To see the result of the checked state style, just select the "Remember me" checkbox.
"RememberMe" #checked state.
Take a closer look at the Login button item.
Login button.
The design suggests an HTML element of type Button. In the Fireblade plugin this element type has three states: #default, #hover and #active. The three elements should be represented as groups marked with their respective tag.
In the case of the Button element, it is not required to have three states. Possible state settings for the Fireblade plugin are: [ #default ] only, [ #default / #hover ] or [ #default / #hover / #active ].
If you choose to have only the #default state set, you do not need to group the elements within the "btn_login" element, as the Fireblade plugin will understand that these elements visually set the #default state.
The first thing to do is to add the @Button notation to the layer name of the "btn_login" element. Then select your elements and group them. Tag this group with the #default tag.
Once you have created the #default group, duplicate this group, change the copy tag to #hover and make this group invisible. Then duplicate the #hover group, change the copy tag to #active and make this group invisible as well.
Now we have the "btn_login" group with the @Button notation added in its layer name, and within three groups tagged with: #default (visible), #hover (invisible) and #active (invisible).
"btn_login" group layer arrangement.
The group tagged with #default represents the design / style of the default state. The group marked with the #hover tag represents the design / style of the mouse hover state. The group marked with the #active tag represents the design / style of the state when the element is pressed.
The next step is to style groups marked as #hover and #active.
To be able to style the design element that represents the hover state of the HTML Button element, make the group marked with the #hover tag visible and make the other groups (#default and #active) invisible.
Now feel free to modify the visual attributes of the internal elements of the group that represents the hover state of the HTML Button element.
"btn_login" button element with the #hover state style.
Be sure to return the visibility setting for groups that present the Button HTML element states, within the "btn_login @Button" element, to: #default (visible), #hover (invisible), and #active (invisible) before to trigger view or export actions.
Now perform the preview action and check the result. To see the result of the hover state style, hover over the login button.
"btn_login" #hover state.
To be able to style the design element that represents the active state of the HTML Button element, make the group marked with the #active tag visible and make the other groups (#default and #hover) invisible.
Now feel free to modify the visual attributes of the internal elements of the group that represents the active state of the HTML Button element.
"btn_login" button element with the #active state style.
Be sure to return the visibility setting for groups that present the Button HTML element states, within the "btn_login @Button" element, to: #default (visible), #hover (invisible), and #active (invisible) before to trigger view or export actions.
Now perform the preview action and check the result. To see the result of the active state style, press over the login button.
"btn_login" #active state.
We are working on this tutorial right now so with must be updated soon.
Last modified 3yr ago