# Design Steps

Follow the **Design Steps** below to learn how to use ![](https://175138337-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fvxlh3prlGsBGF30oqbYW%2Fuploads%2FMrGmjBMvNWDKwMKe2Afq%2Fhmi_file.png?alt=media\&token=241bf936-463c-4cbf-ae33-0c067a7f611c) [**HMI Designer**](https://docs.robpod.cloud/hmi-designer) to develop custom panels for the robot teach pendant.

{% content-ref url="design-steps/create-new-hmi-panel" %}
[create-new-hmi-panel](https://docs.robpod.cloud/hmi-designer/design-steps/create-new-hmi-panel)
{% endcontent-ref %}

{% content-ref url="design-steps/add-hmi-components" %}
[add-hmi-components](https://docs.robpod.cloud/hmi-designer/design-steps/add-hmi-components)
{% endcontent-ref %}

{% content-ref url="design-steps/edit-hmi-components" %}
[edit-hmi-components](https://docs.robpod.cloud/hmi-designer/design-steps/edit-hmi-components)
{% endcontent-ref %}

{% content-ref url="design-steps/synchronize-hmi-panel" %}
[synchronize-hmi-panel](https://docs.robpod.cloud/hmi-designer/design-steps/synchronize-hmi-panel)
{% endcontent-ref %}

{% content-ref url="design-steps/preview-hmi-panel" %}
[preview-hmi-panel](https://docs.robpod.cloud/hmi-designer/design-steps/preview-hmi-panel)
{% endcontent-ref %}

{% content-ref url="design-steps/run-hmi-program" %}
[run-hmi-program](https://docs.robpod.cloud/hmi-designer/design-steps/run-hmi-program)
{% endcontent-ref %}