Task 12: Figma Design

[yogeshtakeo]

Task 12 : Figma UI/UX Design - Basic Component Design

Objective:

The objective of this task is to design basic components for a user interface (UI) using Figma. These components will serve as the foundation for the overall UI design of a project.

Requirements:

Access to Figma:

Ensure you have access to Figma or sign up for a free account at www.figma.com.

Understanding of UI/UX Design Principles:

Familiarize yourself with UI/UX design principles, such as consistency, hierarchy, and usability.

Design Guidelines:

Follow any existing design guidelines provided for the project, such as color schemes, typography, and brand elements.

Component List:

Design the following basic components:-

• Buttons: Primary, secondary, and tertiary styles

• Input Fields: Text inputs, checkboxes, radio buttons

• Cards: Displaying information in a card format

• Navigation Menu: Horizontal or vertical menu options

• Alerts: Success, error, and warning messages

• Typography Styles: Heading, subheading, paragraph, etc.

Instructions:

1. Begin by creating a new Figma project specifically for this task.
2. Set up a new Figma page for each component, organizing your work for easy reference.
3. Start with the buttons and design the primary, secondary, and tertiary styles. Ensure consistency in size, shape, color, and hover/focus states.
4. Move on to the input fields, designing various types such as text inputs, checkboxes, and radio buttons. Pay attention to their states, including active, disabled, and error states.
5. Design cards that can be used to display information. Consider different sizes, variations, and the visual hierarchy of content within the cards.
6. Create a navigation menu, either horizontally or vertically, depending on the project requirements. Design both active and inactive states for menu items.
7. Design alert messages to indicate success, error, and warning states. Ensure they are visually distinct and easily noticeable.
8. Design modals that can be used for additional information or actions. Consider the layout, typography, and any specific requirements related to the project.
9. Lastly, define typography styles for headings, subheadings, paragraphs, and any other required text elements.

[KabinaThapa]

Kabina Thapa https://github.com/yogeshtakeo/task_BFD30/tree/kabinathapa/Figma

[babisha]

[dinakc]

Deena KC

[Jharanatmg]

Jharana Github url- https://github.com/yogeshtakeo/task_BFD30.git

[Namsla]

Namkhang Tsamchoe git url:https://github.com/yogeshtakeo/task_BFD30.git

[sandessth]

Name: Sandesh Shrestha Git: https://github.com/yogeshtakeo/task_BFD30/tree/1f9e65a3825cfe194f380a33fe06c50e0a47f600/component-design

[ashmaupret100]

Name: Ashma Upreti GithubURL:https://github.com/yogeshtakeo/task_BFD30.git

[junuthapa011]

Name: Junu Thapa GitUrl: https://github.com/yogeshtakeo/task_BFD30/tree/junu/FigmaDesign

[sdhital12]

Name: Sita Dhital GitUrl: https://github.com/sdhital12/task-12.git