Lightning
Responsiveness

Responsiveness

LocoAI scans through your design files and applies styling & layout to your elements based on media queries so that these elements can adjust to different screen sizes.

Note: You don't need to design your app for different screen sizes, rather you can apply custom styling and layout for each breakpoint so it can adapt to different screen sizes.

What are Media Queries?

Media queries allow you to change the styling of your design based on rules such as screen width.

An example of that would be to change your design from being arranged horizontally to stacking vertically on the <428px Media Query - this means this setting is only applied when the screen width is less than 428px

By using Media Queries, you can control your design for various devices such as desktops, tablets, mobile and more.

Reviewing responsiveness & styling

After the Locofy.ai wizard has scanned & added styling properties, you can review and edit them.

  1. Click on the "Review" button next to "Responsiveness"

  2. From the list of layers, you can select the one that you need to the styling for.

  3. Click on the edit button present on the right side to edit the styling properties.

Select and Edit in Preview

You can select the element you wish to edit directly from the preview.

  1. Click the 'Edit' tab on top of the preview window.
  1. You can now click the element in preview that you wish to edit. You can also hover over the element to see their name.

Once the item is selected, you can review & edit the decisions LocoAI made, present on the right panel, with regards to the selected element.

Editing responsiveness & styling

Working with media queries in Locofy.ai is easy:

  1. Click on the desired Media Query tab or select from the dropdown.

    You can also select the state for which you want to apply the styling by clicking on the dropdown next to State. For example you can change the background color for the hover state.

  1. Edit the styling of the layer in the styling sections below. All the changes made will apply to the selected media query.

  2. Preview to see how your element behaves in your selected screen size

Note: If you have added more custom media queries, you can find all the Media Queries you created by clicking on the three dots next to the breakpoint tabs.

Creating beautiful interactions with states

Elements on your page are not just static. As users interact with the elements, you may want have a different styling for your element based on its state.

You can do so inside Figma with the Locofy plugin. Commonly used states which are supported by Locofy are:

  • Normal
  • Hover
  • Pressed
  • Disabled
  • Focused
  • Checked
  • Empty

Editing element style in its different states

To edit the styling for an element in different states such as hover and disabled:

  1. Select the state you want to edit for. You can click ont the dropdown next to State.

  1. Edit the styling of your layer. All changes made will apply only to the selected state.

  2. Preview to see how your layer looks in the newly styled state by clicking "Done".

Edit styling properties for your layers

Locofy supports styling options for:

  • Prebuilt Effects
  • Display, Size & Position
  • Spacing
  • Fill
  • Border
  • Shadow
  • Typography
  • Cursor
  • Layout

Advanced CSS properties

Advanced users can use any CSS property they need by entering key-value pairs in this section.

TaggingActions / Interactions