Adding style props for dynamic styles

Learn how to easily create components with dynamic styles by using Style props

Make components

Style props can be added after you have created a component. In the Settings Panel on the right is where you can easily make and reuse components to achieve better code.

Making a component

To turn a part of your design into a component:

1. Select the item by clicking it on your canvas or in the layers panel.

2. Click the ‘Create +' icon in the Settings panel.

3. Enter a name for the component. An automatically generated name is suggested based on your layer name.

4. Click 'Create'.

5. Your component is now created. You can view the code for your new component in the code tab.

Adding Style props for dynamic styles

You can add style props to components which have been defined. Style props allows you to edit styles dynamically. This is usually used when you want to have differently styled variations of the same component. To add style props:

1. Select a layer which has been turned into a component.

2. Select the ‘Add Props’ plus icon.

3. Choose the layer that you want to Style dynamically.

4. Select 'Style Prop' to be added to the selected layer.

5. Select the style that you want to edit dynamically. You can search for a specific styling property using the search box.

6. Edit the settings for your prop, such as its name and value.

7. Press 'Save'

8. You have now added a style prop to your component. You can now populate this style value dynamically and programmatically.

Automatic prop generation

If you have multiple variations of your component, Locofy automatically detects content and style differences to create both value and style props.

Locofy automatically detected a different background-color, text value and icon for the above CategoryCard