Skip to content
Developers Guide Lucky Media Developer Guide

Web UI Starter

Section titled “Web UI Starter”

The majority of our projects leap headfirst into our custom-built Figma Web UI Starter. Crafted with precision and designed specifically with our technological choices in mind, it will ensure your design journey takes flight.

Prior to designing, duplicate the Web UI Starter to your drafts or team.

Inside our Web UI Starter, you will uncover:

Our Web UI Starter is organized into pages based on project and client requirements, but the usual suspects include:

  • Thumbnail Page
  • Components Page
  • Design Page
  • And more.

Each section of the Web UI Starter comes with in-depth explanations on the components, their properties, and how to effectively use them within the design process. This ensures a seamless experience for the designer while maintaining the high standards of Lucky Media’s creations.

Thumbnail Page

Section titled “Thumbnail Page”

The Thumbnail Page is your treasure map, guiding you with these markers:

  • Layout Grid

  • Company logo

  • Status Structure

  • Status Types

  • Project Name

  • Layout Grid Step into the Safe Zone, where you can place content without fear of it being clipped or cut off.

  • Company Logo A 64x64 Frame showcases your company logo, easily pliable to your liking.

  • Status Structure The Status Structure component serves as the backbone for Status Types. Modify its properties, and all Status Type Components will update accordingly.

  • Status Types Showcase the project’s status through the thumbnail with Status Types. Feel free to mix and match as needed, staying true to the Status / <yourname> renaming structure.

  • Project Name Scribe the project’s title to display on the thumbnail.

  • Final Touch With your masterful updates complete, right-click the Cover / Master Frame and select Set as Thumbnail. Once you restart Figma, the magic happens.

Components Page

Section titled “Components Page”

Components and variants work hand-in-hand, paving the way for efficient and effortless updates. With your global components and variants key in hand, unlock limitless design possibilities:

  • Alerts
  • Buttons
  • Checkbox
  • Cookie Notice Modal
  • Dropdowns
  • Footers
  • Icons
  • Input Fields
  • Menu Selector
  • Modals
  • Navigation Bars
  • Paginators
  • Pills/Badges
  • Radio Buttons
  • User Dropdown

For a deeper dive into the enchanted realm of these components and their properties, refer to the initial text above.

404 Frame

Section titled “404 Frame”

Our default screen includes a 12 Column Layout Grid, perfect for crafting 404 Pages complete with Navigation Bar, Title, Description, and a CTA Button.

Alerts

Section titled “Alerts”

A set of three alert component variants at your disposal, each containing an Icon, Title, Description, and CTA Buttons.

Buttons

Section titled “Buttons”

Transform buttons with ease, importing from the Components panel and selecting properties from the Instance panel. Variants include:

  • 3 Sizes
  • Button with Icon variants
  • Text Only Variants
  • All components armed with State instances

Checkbox

Section titled “Checkbox”

This component set includes 3 instances:

  • Checked
  • Unchecked
  • Multiple
  • All components equipped with State instances

Color Styles

Section titled “Color Styles”

Our Web UI Starter showcases the default TailwindCSS colors, easily accessible via the Style Icon.

Section titled “Cookie Notice Modal”

This component set is designed with fully width-adjustable, Autolayout properties and button components that adapt accordingly.

Section titled “Dropdowns”

Two main types of dropdown component sets grace your designs:

  • Closed
  • Open
  • All components fitted with State instances

Favicon

Section titled “Favicon”

Find solace in a square-shaped Frame complete with Safe zone markers and containers for your favicon.

Footers

Section titled “Footers”

These components grant you two Footer variants, replete with All Rights Reserved Text, Description, Logo, Menu links, and Social Media Icons.

Icons

Section titled “Icons”

Enter the realm of Icons by creating a rectangular Frame (24px width and height) and inserting the icon within. Maintain the Icon/ folder-like naming structure for seamless switching.

Input Fields

Section titled “Input Fields”

Multiple instances abound with Input Field components, all boasting State instances.

Section titled “Menu Selectors”

This set of components includes Active, Hover, and Disabled types.

Modals

Section titled “Modals”

Equip your designs with two Alert variants, each home to an Icon, Title, Description, and CTA Buttons.

Section titled “Navigation Bars”

Choose from two Navigation variants, each furnished with a Logo, Menu Content, Notification Icon, User Icon, CTA Button, and a Mobile Variant.

OG/Meta Image

Section titled “OG/Meta Image”

In the Web UI Starter, bask in a default screen with a 4x2,1 aspect ratio, Safe zone markers, and containers.

Paginators

Section titled “Paginators”

This set offers 4 Component types: Hover, Active, Selected, and Disabled.

Text Styles

Section titled “Text Styles”

Typography rules the day with ‘Heading’ and ‘Paragraph’ Styles. Import and adapt properties via the Styler app and Batch Styler.

Pills (Badges)

Section titled “Pills (Badges)”

Two components for Pills are at your fingertips: Dots, X Icons, and Color Variants.

Radio Button

Section titled “Radio Button”

Harness the power of 2 Radio Button instances:

  • Checked
  • Unchecked
  • All components bolstered by State instances

User Dropdown

Section titled “User Dropdown”

These Dropdown components feature User Avatars and Text Only instances.

Tailwind Shadows

Section titled “Tailwind Shadows”

Discover default TailwindCSS Shadows, ready to be summoned through the Style Icon and the search input field.

By following these guidelines and leveraging the tools provided in the Web UI Starter, any designer will be well-equipped to create game-changing digital solutions that fit like a glove for any business.