Design
For Designers

Web UI Starter

The majority of our projects leap headfirst into our custom-built Figma Web UI Starter (opens in a new tab). 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 (opens in a new tab) to your drafts or team.

Inside our Web UI Starter (opens in a new tab), you will uncover:

Our Web UI Starter (opens in a new tab) 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 (opens in a new tab) 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

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

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

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

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

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

This component set includes 3 instances:

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

Color Styles

Our Web UI Starter (opens in a new tab) showcases the default TailwindCSS colors, easily accessible via the Style Icon.

Cookie Notice Modal

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

Dropdowns

Two main types of dropdown component sets grace your designs:

  • Closed
  • Open
  • All components fitted with State instances

Favicon

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

Footers

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

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

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

Menu Selectors

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

Modals

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

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

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

Paginators

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

Text Styles

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

Pills (Badges)

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

Radio Button

Harness the power of 2 Radio Button instances:

  • Checked
  • Unchecked
  • All components bolstered by State instances

User Dropdown

These Dropdown components feature User Avatars and Text Only instances.

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 (opens in a new tab), any designer will be well-equipped to create game-changing digital solutions that fit like a glove for any business.

WorkflowFor Developers