Managing Content

Figma to design the UI

Figma to design the UI

Moxly excels in bridging the gap between Figma design and backend development, enabling the creation of complete mobile apps.

Do you prefer to build initial app designs in Figma, then use those designs as a guideline for your Moxly app build? Now you can paste your Figma designs straight into Moxly without having to recreate each design, element by element.

Design in Figma, Launch in Moxly 


The Figma to Moxly lets you turn your static designs into clean, production-ready Moxly HTML and CSS. Add Moxly Interactions, wire up content using our powerful CMS, and one-click publish.

What is supported:

  • Auto layout
  • Typography styles
  • Border styles
  • Shadow styles
  • Background images and linear gradients
  • Vector and shape conversion to SVGs
  • Images 
  • Opacity
  • Absolute position

Design from scratch in Figma

You can create designs from scratch in Figma (i.e., design without the plugin’s prebuilt layouts or structures) — just make sure you use auto layout. Then, you can make your designs responsive by setting wrap and min/max width on parent frames. Learn more about how to create responsive designs in Figma.

Make sure all frames (including nested frames) use auto layout. And, if necessary, detach component instances to ensure you can edit the design in Moxly. You can quickly detach instances by pressing Option + Command + B (on Mac) or Control + B (on Windows).

After you create your design using auto layout, you can transfer your design to Moxly.

Demo file Figma

Start with our demo, you will find several ready-made components, screens and icons for a quick start: Go to the DEMO and create a duplicate of the project

Tags: adding functionality to the UI elements

Tag is a text string that you place in the component names of your design file. After you import the design file into Moxly, the layer with the Tag will turn into a mobile component or action in your final app.

Page Tags:

  • #ion-page is a tag of a separate page. If it is not there, the page will not be available for import
  • #start-page - this tag indicates that this screen is the main one in the application and will be shown to the user when the application is launched
  • #start-page-unauthorized - this tag indicates that this screen will be shown to an UNAUTHORIZED user when the application is launched
  • #ion-modal - this tag indicates that this screen is a modal window
  • #ion-popover - this tag has pages that will be shown as popover
  • #ion-menu-left is the side menu tag on the left side
  • #ion-menu-right is the side menu tag on the left side

Page structure:
Each page should consist of the following blocks:

  • #ion-header - optional block (auto layout) - is responsible for the page header. Maybe not, then the page will not have a header
  • #ion-content - obligatory block (auto layout) for full width and height (between #ion-header and #ion-footer)
  • #ion-footer - optional block (auto layout) - is responsible for the page footer of the page. Maybe not, then the page will not have a footer.

Example:

 

Element tags:

  • #ion-button - this tag on the element says that it is a button and animation will be applied to it when clicked
  • #ion-header and #ion-footer - these tags are applied to the elements on the page, which are the header and the footer of the page. Everything inside these areas will be shown either at the top of the screen or at the bottom
  • #ion-toolbar is a special tag for #ion-header and #ion-footer. It fits inside the #ion-header and #in-footer, occupies its entire width - elements and text can be placed inside this tag. This tag can be repeated one after another, then there will be a footer or header from several sections on the screen.

Tags of actions and components:

  • #action - this tag opens a dialog for selecting actions by clicking on this component
  • #text - this tag opens a string text editing dialog (for labels, labels, and so on)
  • #multitext - this tag opens a text editing dialog (text can be formatted in this block, HTML tags can be used). It is most suitable for using a large text insert. 
  • #image - this tag opens a dialog for selecting an image that will open in this container.
  • #frame - this tag opens the URL dialog for the frame, the frame will be displayed in this container. If there is something inside the container, it will be deleted during import, but it will be present on the page preview.
  • #youtube - this tag opens a dialog for specifying the video ID. The video player will be displayed inside the container. If there is something inside the container, it will be deleted during import, but it will be present on the page preview. In the title, using the | sign, you can specify the address for the video, for example #youtube|https://www.youtube.com/watch?v=K7ghUiXLef8
  • #vimeo - this tag opens a dialog for specifying a link to a vimeo video. The video player will be displayed inside the container. If there is something inside the container, it will be deleted during import, but it will be present on the page preview. In the title, through the | sign, you can specify the address for the video, for example #vimeo|https://vimeo.com/860216948
  • #lottie - this tag opens a dialog for specifying a link to a file with a Lottie animation. Animation will be displayed inside the container. If there is something inside the container, it will be deleted during import, but it will be present on the page preview.
  • #video - this tag opens a dialog for specifying a link to an MP4 (or other format) video. The video player will be displayed inside the container. If there is something inside the container, it will be deleted during import, but it will be present on the page preview. In the title, through the | sign, you can specify the address for the video, for example #video|https://sample lib.com/lib/preview/mp4/sample-20s.mp4
  • #yourcode - this tag opens the HTML component dialog. There are 3 items in the dialog - editing HTML code, editing SCSS styles and editing Angular code to interact with this block. Angular editing is only for advanced users familiar with programming in Javascrtipt and Angular. Otherwise, it is better to leave the default value there.
  • #hidden - elements with this tag will be invisible on the screen.
  • #timer - this tag adds a timer (or interval). Just add this this tag to any element. An element in such a tag can be any number. You can add a regular frame, add another #hidden tag to it so that this element is not visible on the screen. If you move the arrow from the element to another screen, menu, modal window or popover, then the action will be automatically applied when importing from the figure. Using the “|” symbol, you can specify the interval value in milliseconds in advance, for example #timer|3500 - will set the timer for 3.5 seconds.
  • #slider - this tag adds a slider. Inside this tag, each slide should have a #slide tag. By default, one slide per screen is calculated, but these settings can then be changed in the constructor. You can immediately specify the number of slides on the screen, and the number can be fractional, for example #slider|1.5 - in this case, the whole and another half will be shown
  • #link - if you put this tag on an element, then clicking on this element will open the link specified in the settings. Using the “|” symbol, you can specify the url of the link in advance (including emailto and tel). Cannot be combined with the #action tag! Macros from the database can be used in the url component settings.
  • #aspect-ratio - this tag has no functionality, but all elements with such a tag will be rendered with the original proportions preserved, despite the size of the device screen.
  • #share - this tag on the element will open the standard "Share" dialog. Using the “|” symbol, you can specify the url of the link in advance. Macros from the database can be used in the url, text, title component settings.

Containers for database search


#list-filter To filter the list output from the database by text value (search engine), there is a separate container #list-filter. By default, the search is bound to the first list on the screen, but the binding can be changed in the component settings.
There must be a #search-field tag inside this container - it will be output as an input string.

 

Containers for working with databases and lists
The container inside which the list is displayed must have the #list tag
Inside this container, at any nesting level, there must be one or more containers of a list item with the tag #list-item. There can be many #list-item elements, but only the first one is taken for the template.

Each element of the list #list-item must have an element with field tags inside it, in which fields from the database will be output. Two types of fields are supported:

  • Text #field-text-......
  • Image #field-image-.....

All these fields will be available for assignment in the database connection dialog by their name. The field name will be taken from the third part of the tag:

  • #field-text-name -> name
  • #field-text-news_title->news_title news
  • #field-image-logo ->logo
  • #field-image-avatar - >avatar
  • #field-image-news image -> news image

For the first time, until a database is assigned to the list, all the elements of the list are transferred to the template.
The list items are displayed sequentially, in the order defined in the Figma layout.

To display elements in tabular form together with the #list tag, you must additionally use the tags #grid-2, #grid-3, #grid-4, #grid-6. In this case, each #list-item will be displayed in a column (or several columns -2, 3, 4 or 6, and the width of the columns will be calculated automatically from the width of the screen).

 

Animation Support:
Full support for the ANIMATE CSS library. To add animation from there, go to the website https://animate.style/, in the right column, copy any animation you like (there is a copy button to the right of the animation style), go to the layout on the figure and add the copied class with the hashtag to the desired element, for example #animate__zoomIn #animate__flipInX and so on

Modal windows

The screen can be used as a modal window. In this case, the entire screen should have the #ion-modal tag. The block of the window itself must have the tag #modal or #modal-full or #modal-0.75 - it is its contents that will be shown as a modal window. The height of the modal window will be determined automatically. Instead of #modal-0.75, you can use any value with two decimal places from 0 to 1 - this is the height of the modal window (relative to the total height of the screen). Inside the tag, you can use other markup tags #ion-content, #ion-footer, #ion-header.

 

Popover windows (pop-up windows)

The screen can be used as a pop-up window. To do this, the screen must necessarily have the tag #ion-popover. The popup window itself should have the #popover tag. Everything inside this tag will be displayed in a pop-up window.
Inside the tag, you can use other markup tags #ion-content, #ion-footer, #ion-header.

Side menu (left and right)

The screen can be used as a menu. The menu goes either to the right or to the left. You can combine them. The screen must have the tag #ion-menu. There must be a container with the tag #menu-left or #menu-right inside the screen. The contents of this container will be displayed as a menu. If you need to use both types of menus, then you need to add two screens with the tags #ion-menu and place the container #menu-left or #menu-right in each of them.

Containers for working with users

Containers must have the tags #login-form, #restore-form, #registration-form and #profile-form. With these containers, you can use the prototype of the action, in this case, after a successful action, a transition to the next screen will be performed.

There should be a #submit-button element inside each container. This is a button that will be pressed to perform an authorization, registration, update or reset password action. 

There may also be (but not necessarily) a container with the #error-message tag inside the container - this container will be shown in case of an error.

There may also be (but not necessarily) a container inside the container with the tag #notvalid-message - this container will be shown in case of incorrect email input

The #login-form container must contain two fields:
 #email-field and #password-field - they will be converted to input fields.
An example with the structure in the figure:

The password reset form (the #restore-form container) should contain only the #email-field and the #submit-button.

The profile registration and editing forms (registration-form and #profile-form containers), in addition to the main fields #email-field and #password-field, must contain the fields #name-field, #lastname-field. 

If additional custom fields are specified in the settings, then for them you need to use a universal wrapper container #custom-field-wrapper, inside which there should be an input field #custom-field. This field will be selected from the form and used as a template for all custom fields. 
An example:

The profile form can also have an element with the tag #clear-avatar - clicking on this element clears the avatar.

Containers for working with Wordpress

If the application works with a user base running CMS wordpress, you need to use separate forms for authorization, registration, and profile editing. They are located in the Wordpress section.
Password reset works like this in normal forms.

Navigation for authorized and unauthorized users:


If you need to perform different actions for an authorized or unauthorized user on the same #action element, then the direction of action should be directed to a special element (container) Action switch #actionrouter:

Inside this container there are two blocks, #authorized-action and #unauthorized-action - from them you can direct the appropriate actions for different scenarios.

Containers for displaying Google Maps maps


If the container has the #googlemap tag, then a Google Map will be displayed inside this container in the constructor. All map and point settings are made in the constructor. The template inside this container can contain any information, during the assembly it will be replaced with a map.

Containers for displaying the calendar of record selection for the booking module.


If the container has the tag #appointment_calendar, then inside this container in the constructor there will be a calendar for selecting an entry for the Appointment module. The template inside this container can contain any information, during the build it will be replaced with a calendar. Important - before showing the calendar in the logic of the program, the service and provider must already be selected beforehand, otherwise the calendar will not be shown.

Containers for fixed content linked to screen coordinates

If you need to place an element on the screen that will be attached to the coordinates regardless of scrolling, add any container with the #static tag inside the #ion-content, any element or several elements can be placed inside this container. For this container, you must specify the binding angles (Constraints), by default, this container will be bound to the upper left corner of the screen

Hide/Show container for authorized/unauthorized user

If you add the tag #if-authorized or #if-not-authorized to any element, then this element will be shown only if the user is authorized, or vice versa, unauthorized.