designed/data.xml at master · romochka/designed · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<app version="0.0.1">
   Мы не можем напрямую соединить фигму и vs code, но мы можем вычленить логику и держать ее посередине. Этот xml-подобный файл - первая попытка описать логику ui в формате, читаемом и машиной и человеком. Он должен служить живительным ИСТОЧНИКОМ ПРАВДЫ.
   <components>
      раздел компонентов
      <Component>
         описание
         <link figma="ссылка на файл в фигме на конкретную node" github="ссылка на репо на компонент в .tsx" />
         <props>
            перечисление ну, э... props, это же очевидно
            <prop1 value="a|b|c">this prop has a value!</prop1>
            <prop2>this is a boolean prop</prop2>
         </props>
         <variant prop1="a">инфа по варианту</variant>
         <variant prop1="b" prop2="">
            здесь prop2 = true
         </variant>
         <variant prop1="b">
            все сочетания вариантов не нужно перечислять, нужно только те, где
            есть что рассказать, а остальные очевидны из списка props
         </variant>
      </Component>
      <Button>
         ну кнопка и кнопка, подумаешь
         <link figma="https://www.figma.com/file/vs6xbEX02dAWaktT84/page/node-id=3408" github="" />
         <props>
            <size value="sm|md|lg|xl" />
            <icon name= />
         </props>
         <variant size="md" icon="exclamation mark">
            внимание, эта кнопка всегда желтая
         </variant>
         <variant size="xl" icon="false">
            у кнопки xl иконки не бывает
         </variant>
      </Button>
      <Gallery>
         коллаж из пяти|четырех|трех картинок
         <link figma="https://www.figma.com/file/Pwio7KAGahn0y2LGAKt93R/export?node-id=2%3A11" github="" />
         <props>
            <cols value="5|4|3" />
         </props>
         пропорции в проценты: колонка/сумма * 100
         <variant cols="5">пропорции ширины [9, 6, 4, 2, 1]</variant>
         <variant cols="4">пропорции ширины [7, 6, 4, 2]</variant>
         <variant cols="3">пропорции ширины [7, 5, 2]</variant>
      </Gallery>
   </components>
   <screens>
      раздел экранов (страниц)
      <Story>
         сюжет
         <Gallery>если пришло меньше трех картинок, прячем</Gallery>
         ...
      </Story>
   </screens>
</app>