How Did I Design a Customizable Button in Figma?

Overview

This a part of my UI Kit is designed to create customizable buttons with various parameters for different use cases. It allows for flexibility and adaptability in design.

Design Components

1. Small Button:

   • Use Case: Compact spaces, minimal design.

2. Medium Button:

   • Use Case: Standard use, balanced design.

3. Large Button:

   • Use Case: Prominent calls to action, high visibility.

Button Features

1. Sizes: Three available sizes - Small, Medium, Large.

2. Auto Layout: Can fill the entire container within an auto layout frame.

3. Customizable Parameters:

   • Border: Option to add or remove border.

   • Border Radius: Option to add or corner radius.

   • Drop Shadow: Option to add or remove shadow.

   • Fill State: Can be filled or outlined.

     • Colors: Customizable for both fill and stroke.

   • Content: Options for text, icon, or both.

     • Icon Position: Adjustable when both text and icon are present (left, right, top and bottom).

     • Icon Type: Customizable icon.

Customization Examples

1. Border Customization:

   • Example: Button with/without border.

   • Impact: Affects visual emphasis and separation.

2. Drop Shadow:

   • Example: Button with/without shadow.

   • Impact: Adds depth and prominence.

3. Fill and Outline:

   • Example: Filled vs. outlined button.

   • Impact: Differentiates primary and secondary actions.

4. Content Variations:

   • Example: Text, only-icon, text and icon.

   • Impact: Provides clear and flexible communication of actions.

Please send message for details and buy 😊

#UI Kit #Button #UIUX #userexperience #userinterface #designthinking #componentdesign #figma #uix101 #ui083