We are building a tool that converts figma design to code. To achieve this, we convert all figma groups and elements into our own Design System Language(I hope you know about DSL right? if not, learn it).

export interface Coords {
 x: number;
 y: number;
 height: number;
 width: number;
}

export interface DhiwiseJson {
 isSplashScreen: boolean; // if this is root screen or not
 categorySequence: string; //ignore
 isContainScroll: boolean; //ignore
 screen: ScreenJson; // This contains whole heirarchy of page with DSL, it is object and every element will have children key which will contain data if it has nested elements. It's same as DOM heirarchy
 screenName: string; // Screen name, we use it for page name and route name
 isVisible: boolean; //ignore
 categoryName: string; //ignore
 screenId: string; //unique id of that page
 path: string; //ignore
 assets: string[]; //all images or fonts path
 thumbnailPath: string; // ignore
 screenTag: screenTag; //ignore
 categoryId: string; //ignore
 height: string; //element height defined in figma
 width: string; //element width defined in figma
}

type DirectionTopBottom = {
 bottomLeft: number;
 bottomRight: number;
 topLeft: number;
 topRight: number;
};

export interface Background {
 color: string;
 cornerRadius?: DirectionTopBottom;
 [key: string]: any;
}

interface TopLeftBottomRight {
 top: number;
 bottom: number;
 left: number;
 right: number;
}
type viewTag = "PreviousSliderControl" | "NextSliderControl" | "TabContent" | "header" | "Tab" | "Chart" | "ExpandIcon" | "CollapseIcon" | "ExpandItem" | "ExpandHeader" | "TableHeader" | "TableData" | "Sidebar" | "ImageMagnifier"

export interface BaseScreenJson {
 styleReference?: string; // it includes mapping to other file where all styles like color, background color, shadow and many more of current elemnt
 tempZIndex?: number; // it includes z-index of this element as compared to another elements
 mainAxisSize?: string; // ignore
 mainAxisAlignment: string; // it includes start,center or end. If "type" is "Row" then alignment will be for horizontal direction, if "type" is "Column" then alignment will be for vertical direction
 crossAxisAlignment: string;// it includes start,center or end. If "type" is "Column" then alignment will be for horizontal direction, if "type" is "Row" then alignment will be for vertical direction
 flutterMargin?: TopLeftBottomRight; //it includes margin of that element from all 4 direction
 padding?: TopLeftBottomRight; // it includes padding of that element that needs to be applied from all 4 direction
 viewTag?: viewTag; // it includes element type in terms of HTML element view such as previous slider button, tabs, tab content, table's header, table's data(body), Sidebar in admin apps, header, footer etc
 isNewGroup?: boolean; // if this group was custom created while generating DSL or from figma
 layoutGravity?: number; // layoutGravity indicates where should current element be placed with respect to its parent. 1= top left, 3= top center, 2=top right, 4= center left, 9= center center, 5= center right, 6=bottom left, 8= bottom center, 7= bottom bottom
 gravity?: number; // gravity indicates where should current element be placed. 1= top left, 3= top center, 2=top right, 4= center left, 9= center center, 5= center right, 6=bottom left, 8= bottom center, 7= bottom bottom. We only use this gravity when element is having "type"="Text"
 isCustomGroup?: boolean; //ignore
 originalWidth?: number;//ignore
 type: string; //type includes element type, you can check exported interface below which extends BaseScreenJson
 old\_name: string;
 background: Background; // this includes Background style object which includes color or image or shadow etc
 children: ScreenJson[]; // it's nested structure that represents this element's structure
 name: string; //name of this element 
 id: string; //unique id of this element
 zIndex: number;// z-index of this element respective to other elements in DSL
 isListChild: string; // This key holds the "id" of element whose "type" is "List". If this key is present then it means this element is direct or indirect children of that List 
 rotation: number; //rotation angle value
 [key: string]: any;
 styles?: {
 shape: string & { [key: string]: any }[];
 size: string & { [key: string]: any }[];
 variant: string & { [key: string]: any }[];
 fontStyle: string & { [key: string]: any }[];
 };
}

type TextStyle = {
 textAutoResize: string; // should text be resized or not
 paragraphSpacing: number; // by how much spacing we need to apply in paragraph
 textAlignVertical: string; // how to vertically align text, top, bottom or center
 lineHeightPx: number; // line height in "px"
 letterSpacing: number; // letter spacing in "px"
 fontPostScriptName: string; // font family name, most probably it will be from google fonts
 lineHeightPercent: number; // line height in "%"
 path: string; //ignore
 displayStyle: string; //ignore
 fontFamily: string; //font family that's applied in figma
 textAlignHorizontal: string;//how to horizontally align text, top, bottom or center
 lineHeightUnit: string;//unit that needs to be applied in line height
 fontSize: number; // font-size in "px"
 fontWeight: number; //font-weight in number value
};

type TextBound = {
 endX: number;
 bottomY: number;
} & Coords;

interface SharedRowColumn {
 divideColumn: string | boolean;
 imaginaryList: boolean;
 listSpace: number;
}
export interface Row extends BaseScreenJson, SharedRowColumn {
 type: "Row";
 isFixWidth: boolean;
 isDividedRow: boolean;
}

export interface Column extends BaseScreenJson, SharedRowColumn {
 type: "Column";
 isInfinite: boolean;
}

export interface Stack extends BaseScreenJson {
 isNewStack?: boolean;
 isNotScroll?: boolean;
 type: "Stack";
}

export interface Grid extends BaseScreenJson {
 gridSpace: number;
 spanCount: number;
}

type ImageProperties = {
 isSvg: boolean;
 scale: string;
 vector: string;
};
type UseColorsProperties = {
 color: string;
 count: number;
};
export interface Image extends BaseScreenJson {
 type: "Image";
 image: ImageProperties;
 useColors: UseColorsProperties[];
}

export interface CircleImage extends BaseScreenJson {
 type: "CircleImage";
 image: ImageProperties;
 useColors: UseColorsProperties[];
 cornerRadius: DirectionTopBottom;
}

type TextProperties = {
 textSize: number;
 color: string;
 text: string;
 textStyle: TextStyle;
 textBound: TextBound;
};

export interface Text extends BaseScreenJson, TextProperties {
 type: "Text";
 isMultiline: boolean;
 spanText: Omit;
}

export interface View extends BaseScreenJson {
 radius?: DirectionTopBottom;
}

export interface Button extends BaseScreenJson, TextProperties {
 type: "Button";
}

export interface Line extends BaseScreenJson {
 type: "Line";
}

export interface List extends BaseScreenJson {
 type: "List";
 orientation: string;
 listSpace: number;
}

export interface Header extends BaseScreenJson {
 type: "Header";
 viewTag: "Header";
}

export interface Footer extends BaseScreenJson {
 type: "Footer";
 viewTag: "Footer";
}

export interface EditTextBase extends BaseScreenJson {
 type: "EditText";
 editTextStyle: string;
 hintText: {
 styleReference?: string;
 } & TextProperties;
 isTextArea: boolean;
}
type EditText = EditTextBase & Omit;
export interface Table extends BaseScreenJson {
 type: "Table"
 libraryType: string
}
export type MergedScreenJson =
 | Row
 | Column
 | Stack
 | Grid
 | Image
 | CircleImage
 | Text
 | View
 | Button
 | Line
 | List
 | Header
 | Footer
 | EditText
 | Table;
export type ScreenJson = MergedScreenJson & Coords;

Can you learn the structure? I have added basic explanation in comments where possible. Any key not having comment, you can guess from its name. I have kept all names relevant to its use case.
우리는 피그마 디자인을 코드로 변환하는 도구를 만들고 있습니다. 이를 위해 모든 피그마 그룹과 요소를 자체 디자인 시스템 언어로 변환합니다(DSL에 대해 알고 계시겠죠? 모르신다면 배우세요).인터페이스 내보내기 Coords { x: 숫자 y: 숫자 높이: 숫자 width: 숫자}수출 인터페이스 DhiwiseJson { isSplashScreen: boolean; // 루트 화면인지 여부 categorySequence: 문자열; // 무시 isContainScroll: boolean; //무시 화면: ScreenJson; // 여기에는 DSL이 있는 페이지의 전체 계층 구조가 포함되어 있으며, 객체이며 모든 요소는 중첩된 요소가 있는 경우 데이터를 포함하는 자식 키를 갖습니다. DOM 계층구조와 동일합니다. screenName: 문자열; // 화면 이름, 페이지 이름과 경로 이름에 사용합니다. isVisible: boolean; //무시함 카테고리 이름: 문자열; //무시 screenId: 문자열; //해당 페이지의 고유 ID 경로: 문자열; //무시 자산: 문자열[]; //모든 이미지 또는 폰트 경로 썸네일 경로: 문자열; // 무시 screenTag: 스크린태그; //무시 categoryId: 문자열; //무시 높이: 문자열; //피그마에 정의된 엘리먼트 높이 width: 문자열; //피그마에 정의된 요소 너비}유형 DirectionTopBottom = { bottomLeft: 숫자 bottomRight: 숫자 topLeft: 숫자 topRight: 숫자};내보내기 인터페이스 Background { 색상: 문자열; cornerRadius? 방향상하; [키: 문자열]: any;}인터페이스 TopLeftBottomRight { top: 숫자 bottom: number; 왼쪽: 숫자 오른쪽: 숫자}type viewTag = "PreviousSliderControl" | "NextSliderControl" | "TabContent" | "header" | "Tab" | "Chart" | "ExpandIcon" | "CollapseIcon" | "ExpandItem" | "ExpandHeader" | "TableHeader" | "TableData" | "Sidebar" | "ImageMagnifier"export interface BaseScreenJson { styleReference?: string; // 색상, 배경색, 그림자 등 모든 스타일과 현재 엘리먼트가 있는 다른 파일에 대한 매핑을 포함합니다. tempZIndex?: number; // 다른 요소와 비교하여 이 요소의 z-인덱스를 포함합니다. mainAxisSize?: 문자열; // 무시 mainAxisAlignment: 문자열; // 시작, 가운데 또는 끝을 포함합니다. "유형"이 "행"이면 가로 방향, "유형"이 "열"이면 세로 방향에 맞게 정렬됩니다. crossAxisAlignment: string;// 시작, 가운데 또는 끝을 포함합니다. "유형"이 "열"이면 가로 방향, "유형"이 "행"이면 세로 방향에 맞게 정렬됩니다. flutterMargin?: TopLeftBottomRight; //4방향 모두에서 해당 요소의 여백을 포함합니다. padding?: TopLeftBottomRight; // 4방향 모두에서 적용해야 하는 해당 요소의 패딩을 포함합니다. viewTag?: 뷰태그; // 이전 슬라이더 버튼, 탭, 탭 콘텐츠, 테이블의 헤더, 테이블의 데이터(본문), 관리자 앱의 사이드바, 헤더, 푸터 등과 같은 HTML 요소 보기 측면에서 요소 유형을 포함합니다. isNewGroup?: boolean; // 이 그룹이 DSL을 생성하는 동안 또는 피그마에서 사용자 정의 생성된 경우 layoutGravity?: number; // 레이아웃 중력은 현재 요소가 부모를 기준으로 어디에 배치되어야 하는지를 나타냅니다. 1=좌측 상단, 3=중앙 상단, 2=중앙 상단, 4=중앙 좌측, 9=중앙 중앙, 5=중앙 우측, 6=좌측 하단, 8=중앙 하단, 7=하단 하단 중력?: 숫자; // 중력은 현재 요소를 어디에 배치해야 하는지를 나타냅니다. 1=좌상단, 3=중앙 상단, 2=중앙 상단, 4=중앙 좌측, 9=중앙 중앙, 5=중앙 우측, 6=중앙 좌측, 8=중앙 하단, 7=중앙 하단. 이 중력은 요소의 "type"="Text"인 경우에만 사용합니다. isCustomGroup?: boolean; //ignore originalWidth?: 숫자;//무시 type: 문자열; //유형에는 요소 유형이 포함되며, 아래에서 내보낸 인터페이스를 확인하여 BaseScreenJson을 확장할 수 있습니다. old\_name: 문자열; background: 배경; // 여기에는 색상이나 이미지 또는 그림자 등을 포함하는 배경 스타일 객체가 포함됩니다. children: ScreenJson[]; // 이 엘리먼트의 구조를 나타내는 중첩된 구조입니다. name: 문자열; //이 요소의 이름  id: 문자열; //이 엘리먼트의 고유 ID zIndex: 숫자;// DSL에서 다른 엘리먼트에 대한 이 엘리먼트의 z-인덱스 isListChild: 문자열; // 이 키는 "유형"이 "목록"인 요소의 "id"를 보유합니다. 이 키가 존재하면 이 요소가 해당 List의 직접 또는 간접 자식임을 의미합니다.  rotation: 숫자; //회전 각도 값 [키: 문자열]: any; styles? { 모양: 문자열 & { [키: 문자열]: any }[]; 크기: 문자열 & { [키: 문자열]: any }[]; 변형: 문자열 & { [키: 문자열]: any }[]; fontStyle: 문자열 & { [키: 문자열]: any }[]; };}type TextStyle = { textAutoResize: 문자열; // 텍스트 크기를 조정할지 여부 parraphSpacing: 숫자; // 단락에 얼마나 많은 간격을 적용해야 하는가 textAlignVertical: 문자열; // 텍스트를 세로로 정렬하는 방법, 상단, 하단 또는 중앙 lineHeightPx: 숫자; // 줄 높이 "px" 단위 letterSpacing: 숫자; // 글자 간격 "픽셀" 단위 fontPostScriptName: 문자열; // 폰트 패밀리 이름, 대부분 구글 폰트에서 가져옵니다. lineHeightPercent: 숫자; // "%"단위의 줄 높이 경로: 문자열; // 무시 displayStyle: 문자열; //무시함 fontFamily: 문자열; //앱의 폰트 패밀리