I specialize in highly crafted UI, dynamic interactions and ambiguous problems.

Currently Lead Product Designer at Mars Markets.

I’ve designed and shipped mobile and web products from 0-1, built and led cross-functional teams, and utilized design to achieve high-level objectives and create measurable impact.


My work has been dedicated to transforming ambiguous problems into simple, user-friendly solutions that are inclusive and accessible to all.


Graduated Art Center College of Design with Honors. Passionate about digital products from a young age, I started coding and designing at age 10. At 14, I was invited to Microsoft’s campus for my work exploring web-based animation.


Take a peek into my studio.

I specialize in highly crafted UI, dynamic interactions and ambiguous problems.

Currently Lead Product Designer at Mars Markets.

I’ve designed and shipped mobile and web products from 0-1, built and led cross-functional teams, and utilized design to achieve high-level objectives and create measurable impact.


My work has been dedicated to transforming ambiguous problems into simple, user-friendly solutions that are inclusive and accessible to all.


Graduated Art Center College of Design with Honors. Passionate about digital products from a young age, I started coding and designing at age 10. At 14, I was invited to Microsoft’s campus for my work exploring web-based animation.


Take a peek into my studio.

Bottom Navigation to Footer Animation in Framer

August 15, 2023

4 min read

Tutorials

After the incredible response to my Tweet on this, I decided to create a tutorial for how to transform a bottom navigation into a footer using Framer.

Remix File

Step 1

Start with a navigation component, set Position to Fixed with a Bottom value of 0.

Step 2

Let's make sure the navigation component is set up correctly. Edit the component and recreate your navigation Fill as a Frame within the variant. I’m creating this one at 1200px wide, but it can be whatever size works best for your design.

While holding Command, drag the bottom of your frame down. This amount will be the distance that your bottom navigation sits above the bottom of the page.

Go back and set your Component to Fit Contents.

Step 3

Now create your footer design as a secondary variant within your navigation component.

Add some additional footer content.

Tip: Make sure your bottom radiuses are set to zero so the footer is flush with bottom of page.

Step 4

Make sure the navigation is centered and still Fixed to the bottom at 0.

Add a Scroll Section somewhere at the end of your site. You may have to customize where this trigger is so the footer transforms at the appropriate time.

Add a Scroll Variant to the navigation, set Viewport to Bottom, Replay to Yes, add the Section and Variant.

You’re done!
Sign up below to be notified about more Framer tutorials.

Bottom Navigation to Footer Animation in Framer

August 15, 2023

4 min read

Tutorials

After the incredible response to my Tweet on this, I decided to create a tutorial for how to transform a bottom navigation into a footer using Framer.

Remix File

Step 1

Start with a navigation component, set Position to Fixed with a Bottom value of 0.

Step 2

Let's make sure the navigation component is set up correctly. Edit the component and recreate your navigation Fill as a Frame within the variant. I’m creating this one at 1200px wide, but it can be whatever size works best for your design.

While holding Command, drag the bottom of your frame down. This amount will be the distance that your bottom navigation sits above the bottom of the page.

Go back and set your Component to Fit Contents.

Step 3

Now create your footer design as a secondary variant within your navigation component.

Add some additional footer content.

Tip: Make sure your bottom radiuses are set to zero so the footer is flush with bottom of page.

Step 4

Make sure the navigation is centered and still Fixed to the bottom at 0.

Add a Scroll Section somewhere at the end of your site. You may have to customize where this trigger is so the footer transforms at the appropriate time.

Add a Scroll Variant to the navigation, set Viewport to Bottom, Replay to Yes, add the Section and Variant.

You’re done!
Sign up below to be notified about more Framer tutorials.

Bottom Navigation to Footer Animation in Framer

August 15, 2023

4 min read

Tutorials

After the incredible response to my Tweet on this, I decided to create a tutorial for how to transform a bottom navigation into a footer using Framer.

Remix File

Step 1

Start with a navigation component, set Position to Fixed with a Bottom value of 0.

Step 2

Let's make sure the navigation component is set up correctly. Edit the component and recreate your navigation Fill as a Frame within the variant. I’m creating this one at 1200px wide, but it can be whatever size works best for your design.

While holding Command, drag the bottom of your frame down. This amount will be the distance that your bottom navigation sits above the bottom of the page.

Go back and set your Component to Fit Contents.

Step 3

Now create your footer design as a secondary variant within your navigation component.

Add some additional footer content.

Tip: Make sure your bottom radiuses are set to zero so the footer is flush with bottom of page.

Step 4

Make sure the navigation is centered and still Fixed to the bottom at 0.

Add a Scroll Section somewhere at the end of your site. You may have to customize where this trigger is so the footer transforms at the appropriate time.

Add a Scroll Variant to the navigation, set Viewport to Bottom, Replay to Yes, add the Section and Variant.

You’re done!
Sign up below to be notified about more Framer tutorials.