Figma Design System & Standardized Component Library Creation - Contract to Hire

Upwork

Description

Our agency is looking for a talented UX/UI Designer to create a foundational Design System and a standardized Component Library in Figma for an existing web application project.

We have a series of designed screens in Figma, but they currently lack a formal design system and exhibit inconsistencies in component sizing and spacing. Your task is to analyze these existing screens and build the core elements of a design system and a components library.

Project Scope

  • Review and analyze existing application screens provided in Figma.
  • Define and document foundational styles:
  • - Color Palette
  • - Typography styles (defining hierarchy, font sizes, weights based on current usage)
  • - Basic spacing guidelines/rules.
  • Identify all unique UI components currently used across the existing screens (buttons, inputs, cards, modals, etc.).
  • Standardize these existing components: Address inconsistencies in their sizing, spacing, and internal structure. - Determine the appropriate structure and hierarchy based on the current designs.
  • Build a reusable Component Library in Figma based on these standardized components (using auto-layout, variants where appropriate).
  • Organize the styles and components clearly within the Figma file.

What you DON'T need to do

  • You do not need to redesign or refactor all the existing application screens. Your focus is purely on creating the design system and the standardized component library based on what exists. Someone else will apply your library to update the screens later.
  • You do not need to create new components, only standardize existing ones.

Budget

This is a fixed-price project with a budget of $250.

Deliverables

1) A single, well-organized Figma file containing:

  • Documented core styles (colors, typography, spacing).

2) The standardized, reusable component library based on the existing screen components.

How to Apply

Please include the following in your proposal

1) A brief introduction about yourself and your relevant experience.

2) A link to your portfolio, specifically highlighting projects involving design systems or Figma component libraries.

3) Confirmation that you understand the scope – particularly that you are creating the system/library based on existing screens and are not recreating the screens themselves.

4) Include the word "Design Systems" at the top to ensure you read the whole proposal. Generic proposals will be disqualified.

Last but not least, we are always open to finding new freelancers/design agencies and giving them white-label work if they prove themselves good. This is a small job, but it can lead to bigger work if the relationship works.

Qualifications

  • A link to your portfolio, specifically highlighting projects involving design systems or Figma component libraries

Benefits

  • This is a fixed-price project with a budget of $250

Responsibilities

  • Your task is to analyze these existing screens and build the core elements of a design system and a components library
  • Review and analyze existing application screens provided in Figma
  • Define and document foundational styles:
  • - Color Palette
  • - Typography styles (defining hierarchy, font sizes, weights based on current usage)
  • - Basic spacing guidelines/rules
  • Identify all unique UI components currently used across the existing screens (buttons, inputs, cards, modals, etc.)
  • Standardize these existing components: Address inconsistencies in their sizing, spacing, and internal structure
  • Determine the appropriate structure and hierarchy based on the current designs
  • Build a reusable Component Library in Figma based on these standardized components (using auto-layout, variants where appropriate)
  • Organize the styles and components clearly within the Figma file
  • You do not need to redesign or refactor all the existing application screens
  • Your focus is purely on creating the design system and the standardized component library based on what exists
  • Someone else will apply your library to update the screens later
  • You do not need to create new components, only standardize existing ones
  • A single, well-organized Figma file containing:
  • Documented core styles (colors, typography, spacing)
  • The standardized, reusable component library based on the existing screen components
  • Confirmation that you understand the scope – particularly that you are creating the system/library based on existing screens and are not recreating the screens themselves
  • Include the word "Design Systems" at the top to ensure you read the whole proposal

Job Alerts

Get notified when new positions matching your interests become available at Figma Job.

Need Help?

Questions about our hiring process or want to learn more about working with us?