Design
For Developers

Introduction

Here at Lucky Media (opens in a new tab), we cleverly craft our websites and apps with an array of distinctive tools. Curious developers, fear not – this guideline serves as your trusty reference point, illuminating our unique structure for Figma Starter Projects, the Web UI Starter (opens in a new tab).

Web UI Starter

We custom-make the majority of our projects with our ingenious Project Starter. Tailored specifically for our development techniques, our Web UI Starter (opens in a new tab) is a Figma project brimming with innovation.

As a developer, prepare to encounter these remarkable components and frames:

Our Web UI Starter (opens in a new tab) is deftly divided into pages, which may vary according to project requirements and client desires. Fear not, as you'll typically find pages such as:

  • Thumbnail
  • Components
  • Page
  • And more.

Thumbnail

The thumbnail page presents an Open Graph Image highlighting the Project Name and status. Though not explicitly for developers, it enhances our Figma Dashboard's view and boosts overall organization.

Components

On the enthralling Components page, you'll discover:

404 Page

Behold a Frame for a 404 Page, primed for Desktop and Mobile Screen sizes.

Color Styles

Crafted to suit client needs, our design team generates dazzling color palettes with shading and tints. A Branding&Guideline booklet may be provided, in which case, we'll import colors as styles. Additionally, each color is presented on a Frame with a name and HEX value, often accompanied by a JSON file for seamless Tailwind integration.

Components and Variants

We toil tirelessly over components and variants, ensuring effortless changes and time efficiency. In the Web UI Starter (opens in a new tab), prepare to find global components and variants such as:

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

For clarity, Components are labeled, and Figma utilizes layer naming construction and properties.

And so much more…

From Alerts to User Dropdowns, the Web UI Starter (opens in a new tab) is packed with an assortment of components intricately crafted for maximum efficiency and ease of use.

Favicon, Footers, Navigation Bars, & OG/Meta Image

Our Web UI Starter (opens in a new tab) also contains Favicons with safe zone markers and containers, Footer and Navigation Bar variants for both desktop and mobile screens, and a default frame screen for OG/Meta Image.

Text Styles & Tailwind Goodness

The Components page integrates a sleek typography structure for 'Heading' and 'Paragraph' Styles. Additionally, you'll find the default TailwindCSS Color Palette and Shadows, eliminating the need for config file tweaks.

Get ready to embark on an exhilarating adventure through the wondrous world of Lucky Media's Web UI Starter (opens in a new tab) – a unique, game-changing approach to web and app development.

For DesignersTailwind