FigMayo Logo

LIBRARIES

🎨 Styles Slim (0)

core

Fills & Effects
Typography

components

Buttons
Documentation Tests
Alerts
Test page
New page
Atomize 3.0

core

Fills & Effects

components

✦ Cover ✦
🔲 Artboards
💜 Icons
🏞 Project Thumbnail (Use this for cover)
↪ Logos
↪ Buttons
↪ Avatars
↪ Radio Buttons
↪ Checkboxes
↪ Toggle
↪ Chips
↪ Tags
↪ Input fields
↪ Dropdown
↪ Date Picker
↪ Tooltips
↪ Toasts
↪ Alerts
↪ Links
↪ Switcher
↪ Tab Navigation
↪ Lists
↪ Sidebar Navigation
↪ Misc Components
↪ Header
↪ Modals
↪ Tables
↪ Web3 Components
🔲 Sheets
🎨 Foundations

core

Fills & Effects
Variables
Typography

components

✅ Avatars
Illustrations
🪧 Local components
🐙 Organisms

core

Variables

components

Card
Site map
Larder
Navigation
Notes
Blocks
Table
Footer
🎨 Styles Slim (1)

pages

Content Page

core

Fills & Effects
Variables
Typography

components

Buttons
New Knicks
Page 11
New page
Test page
Tooltips
Alerts
Inspector test
Icon tests
Icon tests - no frame
FigMayo Library Template

core

Variables

components

Introduction
Page structure
Adding components
🎨 Styles

pages

📙 Library overview

core

Fills & Effects
Variables
Typography

components

🔄 Icons
☑️ Buttons
✏️ Forms
🍟 Chips & badges
🔻 Dropdowns
🚨 Notifications
☢️ Test page
😎 Avatars
🛍 Brand assets
🧰 Tooltips
🛟 Helpers
🕹️ Variables
🗺 Navigation
🐙 Organisms
🩻 Overlays
⚙️ Settings
🦶Footer
Ctrl-K
🎨 Styles/🗺 Navigation
Updated 24 August 2024
🗺 Navigation

Users rely on the global header to navigate and orient themselves in your UI. This pattern outlines some of the qualities that make a global header consistent, familiar, and usable.

nav-items

These objects sit in our side panel. They come in two flavours.

Storybook link

View Storybook

The anchor links shouldn’t show when there is only one link available.

nav-item (old)(13 variants)
View Figma
    PlaygroundFigmaLink
sidebar

This is the main navigation source in FigMayo. It is flexible and can have a scrolling state to accommodate many items.

Storybook link

sidebar(old)(3 variants)
View Figma
sidepanel-dark

This is the main navigation source in FigMayo. It is flexible and can have a scrolling state to accommodate many items.

Storybook link

Storybook link

View Storybook

The anchor links shouldn’t show when there is only one link available.

nav-item-dark(10 variants)
View Figma
header-sub-section(6 variants)
View Figma