Figmock Design System

Tools

Figma, Notion

Duration

Less then 1 Month

Overview

Figmock is Starter Kit Design System fo multi-Purpose, figmock is a design system that I created based on the Base Component using the Atomics Design method. started from my anxiety that often change project. I made figmock as universal as possible for various project purposes. U can try for free my design system in link

Problem Statement

Work as Freelancer, You will meet many products that have many types. this makes it necessary to continue to make design systems and style guides repeatedly, and of course spent a lot of my time, especially if the project is short term. so i think i need a system to provide all components for my work. With Figmock, i can duplicate the file and change the style like what i want. or i can take a component via my library system. it is effective to save a lot of my time

Design Process

Challenges

1️⃣ Competitive Analysis

Comparing the most component using by Giant tech. At this point mapping all base component and curated naming and component there i need.

2️⃣ Create documentations with Notion

Create tables database in Notion. And give a checked mark when the component is done.

Prepare for the tree structure foldering.

Mapping the all component base on Competitor.

Research and curate the icon library to complete a Cions set for my own design system.

Style Guide and Basic patterns

3️⃣ Create specs for Components

The first thing i think about base component is State and Condition

State variant:

And the second one about the component base is Variant. Make variant for component according to types of component. Let say i need a Button. So, prepare about

Including about a types of size.

4️⃣ Mapping Process

Example for my Checkbox.

1

Wrap Component

2

Properties Setup

3

Master.Component

4

Structure Naming Layer

				
					.button/size/variant (Master Component as always starting with dots as Mark.)
				
			

Tools

Notion

Comparing the most component using by Giant tech. At this point mapping all base component and curated naming and component there i need.

Figma

Comparing the most component using by Giant tech. At this point mapping all base component and curated naming and component there i need.

Tally So

Comparing the most component using by Giant tech. At this point mapping all base component and curated naming and component there i need.

Lesson learned

Try Figmock!

U can also try my figmock right now for BETA Version.