Simplified Github Navigation

Create a simplified navigation header based on Github’s user interface, using Frames and Auto Layout.

It’s time to put what you’ve learned into practice by building out a user interface in Figma. For this exercise, you’ll create a simplified navigation header based on the user interface of Github. This is an opportunity to practice using Frames and Auto Layout.

Let’s take a look at what you’ll be creating. Github is a platform for managing and sharing codebases. This is a simplified version of part of their user interface, which users see when browsing any particular codebase, or repository.

On the top left, visitors have access to a breadcrumb-style navigation, which shows a link to the user or organization which owns this project, followed by a link to the root (or top-level) folder of the project. These are separated by a light forward slash.

On the top right are a series of buttons for actions a visitor can take on this project.

Below these is a set of tabbed navigation for the project.

As the designer for this project, each of these interface areas is a good opportunity to use Auto Layout: the buttons, the tabs, and the breadcrumbs.

As you work to create this interface, keep the following points in mind:

If you’d like an extra challenge when you’re finished, try making a new version of the completed UI, this time in dark mode.

See Also