Yorkie UI PoC

[hackerwins]

Current Yorkie UI Overview

The current Yorkie UI, a collaborative effort between KAIST NIL and Hivelab, is good for existing pages but encounters challenges in component reusability. Key issues include difficulty expanding to new pages and outdated technology stack hindering maintenance.

• Design Reference: Figma Design
• Yorkie UI Repository: GitHub
• Current Result: Yorkie Dev

Current Challenges:

1. Difficulty in expanding to new pages and lack of component reusability.
   a. Lack of abstraction in CSS and Figma.
   b. Poor workflow from Figma to Yorkie UI.
2. Outdated technology stack (e.g., Node 14) posing maintenance challenges

Goals for Yorkie UI 2nd Iteration

The primary goal of the 2nd iteration is to enhance Yorkie UI by addressing existing challenges and expanding functionality seamlessly to the Dashboard and Homepage.

Requirements for the Goal

A. Managing design tokens directly in Figma: SSOT(single source of truth)

We can consider managing design tokens directly in Figma to preserve design intent and structure and be able to extract them as data(JSON). For this, we need to research Figma plugins and features for managing and extracting Design Tokens in Figma.

B. Employ headless UI components and layout system

We need to be able to extract design tokens from Figma and get implementations of the layout system and components we will use. For this, a headless UI Framework is needed.

Candidate solution: Park UI

We need to research Park UI Design System for those requirements: https://park-ui.com/

Workflow

We need to investigate ParkUI to see if it can be used in the workflow below.

Step 1. Park UI(Arc) Components to Figma

Initializing Existing Components (Approximately 35) from Park UI to Figma.
https://park-ui.com/docs/panda/overview/figma

Step 2. Preparing tokens directly in Figma and Extracting them to PandaCSS

After modifying tokens such as themes in Figma, we need to be able to extract them as style files(PandaCSS).

Step 3. Convert them into StoryBook

We need to be able to run StoryBook from style files extracted using the Headless UI framework.

References

• Park UI: https://park-ui.com/
• Ark: https://github.com/chakra-ui/ark
• PandaCSS: https://panda-css.com/
• Figma Variables: https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma

[vitran12]

hi @hackerwins

We have a problem with duplication Park UI Figma

We can't get a local variable on Figma Community and We won't know how they've configured the system because Figma duplication shows name variables (spacing & radii/10). When we can edit the file we can get permission to look at it.

I think we need sync the design system Yoirke with Park UI so we are able to extract them into style files for Step 2.