Web UI Starter
Section titled “Web UI Starter”Most of our projects start with our custom Figma Web UI Starter. It was built around our tech stack, so everything in it is ready to use without modification.
Before you start designing, duplicate the Web UI Starter to your drafts or team.
The Web UI Starter includes:
- 404 Page
- Alerts
- Buttons
- Checkbox
- Color Styles
- Cookie Notice Modal
- Dropdown
- Favicon
- Footers
- Icons
- Input Fields
- Modals
- Navigation Bars
- OG/Meta Image
- Paginators
- Pills/Badges
- Radio Buttons
- Text Styles
- Thumbnail Page
- 12/4 Column Grid system · Bootstrap 4
- V3 TailwindCSS Color Palette
- V3 TailwindCSS Shadows
The Web UI Starter is organized into pages based on project and client requirements. The typical pages are:
- Thumbnail Page
- Components Page
- Design Page
- And more.
Each section of the Web UI Starter includes notes on the components, their properties, and how to use them in the design process.
Thumbnail Page
Section titled “Thumbnail Page”The Thumbnail Page includes:
-
Layout Grid
-
Company Logo
-
Status Structure
-
Status Types
-
Project Name
-
Layout Grid Defines the safe zone. Place your content here to avoid it being clipped.
-
Company Logo A 64x64 frame for the company logo. Resize as needed.
-
Status Structure The base component for Status Types. Change its properties and all Status Type components update automatically.
-
Status Types Shows the project’s current status on the thumbnail. Mix and match as needed. Follow the
Status / <yourname>naming structure when renaming. -
Project Name The project title shown on the thumbnail.
-
Final Step When everything is updated, right-click the Cover / Master frame and select Set as Thumbnail. Restart Figma for the change to take effect.
Components Page
Section titled “Components Page”Global components and variants are the key to fast, consistent updates. The Components Page includes:
- Alerts
- Buttons
- Checkbox
- Cookie Notice Modal
- Dropdowns
- Footers
- Icons
- Input Fields
- Menu Selector
- Modals
- Navigation Bars
- Paginators
- Pills/Badges
- Radio Buttons
- User Dropdown
For details on each component and its properties, refer to the sections below.
404 Frame
Section titled “404 Frame”A default screen with a 12 Column Layout Grid. Use it to build 404 pages with a Navigation Bar, Title, Description, and a CTA Button.
Alerts
Section titled “Alerts”Three alert component variants, each with an Icon, Title, Description, and CTA Buttons.
Buttons
Section titled “Buttons”Import buttons from the Components panel and set properties in the Instance panel. Variants include:
- 3 Sizes
- Button with Icon variants
- Text Only variants
- State instances for all components
Checkbox
Section titled “Checkbox”This component set includes 3 instances:
- Checked
- Unchecked
- Multiple
- State instances for all components
Color Styles
Section titled “Color Styles”The Web UI Starter uses the default TailwindCSS color palette. Access colors through the Style Icon.
Cookie Notice Modal
Section titled “Cookie Notice Modal”Built with Autolayout. The width is fully adjustable, and button components scale accordingly.
Dropdowns
Section titled “Dropdowns”Two dropdown component sets:
- Closed
- Open
- State instances for all components
Favicon
Section titled “Favicon”A square frame with safe zone markers and containers for your favicon.
Footers
Section titled “Footers”Two Footer variants, each with All Rights Reserved text, a description, logo, menu links, and social media icons.
Create a rectangular frame (24x24px) and place the icon inside it. Use the Icon/ folder naming structure to keep switching between icons clean.
Input Fields
Section titled “Input Fields”Multiple Input Field instances, all with State instances.
Menu Selectors
Section titled “Menu Selectors”Includes Active, Hover, and Disabled types.
Modals
Section titled “Modals”Two Alert variants, each with an Icon, Title, Description, and CTA Buttons.
Navigation Bars
Section titled “Navigation Bars”Two Navigation variants, each with a Logo, Menu Content, Notification Icon, User Icon, CTA Button, and a Mobile variant.
OG/Meta Image
Section titled “OG/Meta Image”A default screen with a 4x2.1 aspect ratio, safe zone markers, and containers.
Paginators
Section titled “Paginators”Four component types: Hover, Active, Selected, and Disabled.
Text Styles
Section titled “Text Styles”Heading and Paragraph styles are available. Import and update properties using the Styler app and Batch Styler.
Pills (Badges)
Section titled “Pills (Badges)”Two pill components: Dot icons, X icons, and color variants.
Radio Button
Section titled “Radio Button”Two Radio Button instances:
- Checked
- Unchecked
- State instances for all components
User Dropdown
Section titled “User Dropdown”Dropdown components with User Avatar and Text Only instances.
Tailwind Shadows
Section titled “Tailwind Shadows”Default TailwindCSS shadows are available through the Style Icon and the search input field.