Create a Figma Prototype

README.md

Create a Figma Prototype

The outcome of this achievement is make interactive prototypes from our components and design system. There are 2 main tasks that this will focus on:

1. Make buttons interactable so they emulate what using the actual site would feel like
2. Make the buttons clickable so they emulate what the actual site will function like

Instructions

Step 1

1. Import your design system and add your components and static mockup from your mockups file
2. Duplicate the mockup and in the new version set one of the buttons to have an active button shadow
3. Switch to the prototype menu (right hand side)
4. Link the button that is to be hovered to the frame with the active button shadow
5. set it to activate with mouse enter
6. select the button in the second frame and link it to the first frame
7. activate it with mouse leave
8. Now you should be able to test your prototype with a functioning hover button

Step 2

1. Create a new frame and add another button onto it
2. Connect the button on the second frame to the third frame and set it to trigger with click
3. Configure this new button just like you did with the card button for a hover state
4. add a click to the new button and connect it to the second frame

Extras

• Use the other 3 cards to make it so you can navigate to other pages (use your heading text component and buttons as signifiers to show where you are when you land there)
• You can also use the outline buttons to experiment with more of the interactive features of figma's prototyping
• Only 1 functioning flow is necessary for the achievement

Submission

• Submit a link to the team

Rubric

• Hover state in and out both work 2pts
• Click state on and off both work 2pts
• File, page, and component organization 1pt