Как создать мультиплатформенную дизайн-систему на React

Доклад на HolyJS 2020 Moscow

Материалы

Transcript

1. Илья Лесик
   Как создать
   мультиплатформенную
   дизайн-систему на React
   1
   3FBDU
   EFTJHOTZTUFN
   

   View Slide

2. 2
   Software Engineer & Co-founder
   github.com/lessmess-dev
   @lessmessdev
   MFTTNFTTBHFODZ
   dev.to/lessmess
   

   View Slide

3. 3
   tver.io
   Community Leader
   _tverio
   TverIO
   

   View Slide

4. React Figma
   react-figma.dev
   github.com/react-figma
   PO & Main contributor
   4
   

   View Slide

5. 5
   5-%3
   5-%3
   

   View Slide

6. View Slide

7. Веб Мобайл
   7
   

   View Slide

8. 8
   Проблема
   Написали кучу кода на React под веб
   Понадобилось мобильное приложение
   

   View Slide

9. 9
   Сделали кучу экранов и компонентов на дизайне
   Трудно обеспечить консистентность
   Проблема
   

   View Slide

10. 10
    План доклада
    • Кроссплатформенность
    • Пример
    • Дизайн-системы
    • Процесс + Рекомендации
    • Будущие планы
    

    View Slide

11. 11
    Инструменты
    • Figma
    • React
    • React Native / react-native-web
    • React Figma
    • Storybook
    

    View Slide

12. 12
    Кроссплатформенность
    $SPTTQMBUGPSN
    

    View Slide

13. View Slide

14. 14
    Можем использовать JS-код
    для хранения элементов дизайн-системы
    +4DPEF
    %FTJHO4ZTUFN
    

    View Slide

15. 15
    const designSystem = {
    fontSizes: [
    12, 14, 16, 20, 24, 32
    ],
    colors: {
    blue: '#07c',
    green:'#0fa',
    }
    }
    

    View Slide

16. 16
    Неплохо, но хотим
    переиспользовать элементы
    более высокого уровня
    IJHIMFWFM
    

    View Slide

17. Кросс-платформенный React
    17
    3FBDU
    

    View Slide

18. 18
    Веб
    8FC
    

    View Slide

19. React DOM
    const Component = () => {
    return Hello
    }
    19
    

    View Slide

20. 20
    Все остальное
    

    View Slide

21. 21
    • react-native
    

    View Slide

22. • react-360
    • react-tree-fiber
    22
    • Ink
    • react-hardware
    

    View Slide

23. 23
    • react-sketchapp
    • react-figma
    • react-xd
    • …
    

    View Slide

24. 24
    Почему React хорош для кросс-платформы?
    Правильные абстракции!
    

    View Slide

25. const Reconciler = require('react-reconciler');
    const HostConfig = {
    // You'll need to implement some methods here.
    // See below for more information and examples.
    };
    const MyRenderer = Reconciler(HostConfig);
    const RendererPublicAPI = {
    render(element, container, callback) {
    // Call MyRenderer.updateContainer() to schedule changes on the roots.
    // See ReactDOM, React Native, or React ART for practical examples.
    }
    };
    module.exports = RendererPublicAPI;
    react-reconciler
    25
    

    View Slide

26. View Slide

27. View Slide

28. 28
    Кроссплатформенность возможна за счет:
    • JavaScript (почти везде есть интерпретатор)
    • React (react-reconciler)
    $SPTTQMBUGPSN
    

    View Slide

29. Дизайн-системы
    29
    %FTJHO4ZTUFN
    

    View Slide

30. Atomic Design
    by Brad Frost
    30
    От простого к сложному
    

    View Slide

31. 31
    Стайл-гайд + Визуальные элементы
    

    View Slide

32. 32
    Стайл-гайд
    4UZMFHVJEF
    

    View Slide

33. 33
    Стайл-гайд — это набор базовых значений
    • Цвета
    • Типографика
    • Размеры/отступы
    4UZMFHVJEF
    

    View Slide

34. 34
    gambit.gg - стайл-гайд
    

    View Slide

35. 35
    UI-кит
    6*LJU
    

    View Slide

36. 36
    UI-кит — это набор визуальных элементов
    • Иконки
    • Кнопки
    • Инпуты
    • Тултипы
    • …
    6*LJU
    

    View Slide

37. 37
    UI-кит использует стайл-гайд
    gambit.gg - UI-kit
    

    View Slide

38. 38
    UI-кит содержит разные состояния элементов
    

    View Slide

39. 39
    Setproduct Design System 2.0 - UI kit - Buttons
    

    View Slide

40. 40
    Setproduct Design System 2.0 - UI kit - Checkboxes
    

    View Slide

41. 41
    Картина целиком
    

    View Slide

42. Каталог компонентов
    Шаблоны для Figma
    UI-кит
    Базовые компоненты
    42
    Стайл-гайд
    

    View Slide

43. 43
    Все это может быть в коде!
    $PEF
    По аналогии с Infrastructure as Code (IaC)
    Design System as Code
    

    View Slide

44. 44
    Но как отобразить дизайн-систему в Figma?
    'JHNB
    

    View Slide

45. Источник: figma.com/developers
    45
    Только
    
    на чтение
    Встраивание
    
    в iframe
    Обертки над
    REST API и
    
    Эмбедами
    

    View Slide

46. 46
    Figma Plugins API
    

    View Slide

47. View Slide

48. {
    "name": “Our design-system",
    "id": “…”,
    "api": "1.0.0",
    "main": "code.js",
    "ui": "ui.html"
    }
    48
    {
    "name": “Our design-system",
    "id": “…”,
    "api": "1.0.0",
    "main": "code.js",
    "ui": "ui.html"
    }
    manifest.json
    "name": “Our design-system"
    

    View Slide

49. 49
    Две точки входа
    

    View Slide

50. 50
    main
    Управление содержимым документа
    ui
    Интерфейс плагина
    Сообщения
    

    View Slide

51. 51
    В main-треде доступно Figma Plugins API
    Код можно писать на ES6
    'JHNB1MVHJOT
    "1*
    

    View Slide

52. 52
    const page = figma.createPage();
    const rect = figma.createRectangle();
    rect.x = 10;
    rect.y = 10;
    rect.resize(50, 50);
    page.appendChild(rect);
    

    View Slide

53. 53
    Код можно бандлить — Webpack
    8FCQBDL
    И использовать react-figma вместо чистого API
    

    View Slide

54. 54
    
    
    
    Тот же самый код, только на react-figma:
    

    View Slide

55. 55
    Преимущества react-figma перед Figma Plugins API
    • Декларативный подход
    • Кроссплатформенность + Yoga Layout
    • Все фичи React: хуки, стейт
    • DX: Гидратация, HMR, React DevTools
    • Интегрируется с множеством других инструментов
    

    View Slide

56. 56
    Примитивы react-figma
    SFBDUpHNB
    

    View Slide

57. 57
    
    figma.createPage()
    

    View Slide

58. 58
    
    figma.createFrame()
    Основной блок Figma
    

    View Slide

59. 59
    
    figma.createRectangle()
    

    View Slide

60. 60
    
    …
    
    figma.createComponent()
    

    View Slide

61. 61
    
    figma.createStar()
    

    View Slide

62. 62
    UI примитивы
    Совместимы с react-native / react-native-web / …
    

    View Slide

63. 63
    View — фундаментальный компонент для построения UI
    import React from "react";
    import { View } from "react-native";
    const ViewBoxesWithColor = () => {
    return (
    style={{
    flexDirection: "row",
    height: 100,
    padding: 20
    }}
    >
    
    
    
    );
    };
    export default ViewBoxesWithColor;
    

    View Slide

64. 64
    Text — отображение текста
    import React from "react";
    import { Text } from "react-native";
    const SomeText = () => {
    return (
    
    Hello, World!
    
    );
    };
    export default SomeText;
    Hello, World!
    

    View Slide

65. 65
    const App = () => (
    
    React Native
    
    );
    const styles = StyleSheet.create({
    container: {
    flex: 1,
    padding: 24,
    backgroundColor: "#eaeaea"
    },
    title: {
    marginTop: 16,
    paddingVertical: 8,
    borderWidth: 4,
    borderColor: "#20232a",
    borderRadius: 6,
    backgroundColor: "#61dafb",
    color: "#20232a",
    textAlign: "center",
    fontSize: 30,
    fontWeight: "bold"
    }
    });
    StyleSheet — абстракция, похожая на CSS StyleSheets
    

    View Slide

66. 66
    Почему не Веб-based?
    Хотим писать
    

    View Slide

67. 67
    Проблемы:
    CSS ::after, ::before
    CSS ::hover, ::focus
    CSS Grid, etc.
    Обработка CSS
    

    View Slide

68. 68
    const SwatchTile = styled.View`
    height: 250px;
    width: 250px;
    border-radius: 4px;
    margin: 4px;
    background-color: ${props => props.hex};
    justify-content: center;
    align-items: center;
    ${props => (props.hex === '#ffffff' ? `border-width: 2px;\nborder-color: black;\nborder-style: solid;` : '')}
    `;
    Поддерживается styled-components
    github.com/react-figma/react-figma/blob/master/examples/styled-components/
    

    View Slide

69. 69
    • Стайлгайд — JS-конфиг
    • Базовые элементы — React (в react-native стиле)
    • Шаблоны для Figma и каталог - тоже в коде!
    

    View Slide

70. 70
    Пример?
    Primer!
    1SJNFS
    

    View Slide

71. View Slide

72. 72
    Интерфейс GitHub — на Primer
    

    View Slide

73. 73
    • UI-kit под Веб
    • Шаблоны Sketch/Figma
    • Octicons
    В Primer есть:
    

    View Slide

74. 74
    • UI-kit на react-native
    • Консистентности*
    Нет:
    

    View Slide

75. 75
    Нет задачи повторить полностью
    Сделаем кросс-платфороменный вариант
    

    View Slide

76. 76
    Создадим react-native проект
    + react-figma-boilerplate
    

    View Slide

77. 77
    ├── android - gradle project for React Native app
    ├── assets - React Native app assets
    ├── ios - iOS project for React Native app
    ├── src
    │ ├── components
    │ ├── App.tsx - React Figma app
    │ ├── code.tsx - entty point for Figma plugin Main-thead
    │ ├── ui.html - entty point for Figma plugin UI-thead
    │ └── ui.tsx
    ├── app.json - react-native config file
    ├── babel.config.js - babel config for react-native
    ├── figma.d.ts - figma plugin typings
    ├── figma.webpack.confgi.js - Webpack config for react-figma
    ├── manifest.json - Figma plugin manifest
    ├── metro.config.js - config for Metro bundler
    ├── package.json
    ├── tsconfig.json
    └── yarn.lock
    После генерации
    

    View Slide

78. 78
    Цвета
    $PMPST
    

    View Slide

79. View Slide

80. 80
    export const colors = {
    gray: "#6a737d",
    blue: "#0366d6",
    green: "#28a745",
    purple: "#6f42c1",
    yellow: "#ffd33d",
    orange: "#f66a0a",
    red: "#d73a49",
    pink: "#ea4aaa",
    black: "#24292e",
    white: "#ffffff"
    };
    

    View Slide

81. 81
    Отобразим цвета в Figma
    

    View Slide

82. import * as React from "react";
    import {StyleSheet, Text, View} from "react-figma";
    const styles = StyleSheet.create({
    container: {
    alignItems: "center"
    },
    rect: {
    width: 100,
    height: 100
    },
    text: {
    marginTop: 10
    }
    });
    import * as React from "react";
    import {StyleSheet, Text, View} from "react-figma";
    const styles = StyleSheet.create({
    container: {
    alignItems: "center"
    },
    rect: {
    width: 100,
    height: 100
    },
    text: {
    marginTop: 10
    }
    });
    82
    Стили
    rect: {
    width: 100,
    height: 100
    },
    

    View Slide

83. …
    export const StyleguideColor = (props) => {
    const {color, withBorder, name} = props;
    return
    styles.rect,
    {backgroundColor: color},
    withBorder && {borderColor: "#c8c8c8", borderWidth: 1}
    ]} />
    
    };
    83
    Компонент
    …
    export const StyleguideColor = (props) => {
    const {color, withBorder, name} = props;
    return
    styles.rect,
    {backgroundColor: color},
    withBorder && {borderColor: "#c8c8c8", borderWidth: 1}
    ]} />
    
    };
    {backgroundColor: color},
    

    View Slide

84. import * as React from "react";
    import {StyleSheet, Frame, View, Text} from "react-figma";
    import {colors} from "../../tokens/colors";
    import {StyleguideColor} from "../../components/styleguide-color/StyleguideColor";
    export const Styleguide10 = (props) => {
    return
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    }
    84
    import * as React from "react";
    import {StyleSheet, Frame, View, Text} from "react-figma";
    import {colors} from "../../tokens/colors";
    import {StyleguideColor} from "../../components/styleguide-color/StyleguideColor";
    export const Styleguide10 = (props) => {
    return
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    }
    Собираем цвета на одном фрейме
    color={colors.gray}
    color={colors.blue}
    color={colors.green}
    color={colors.purple}
    color={colors.yellow}
    color={colors.orange}
    color={colors.red}
    color={colors.pink}
    color={colors.black}
    color={colors.white}
    

    View Slide

85. 85
    После того как добавим Figma плагин
    

    View Slide

86. 86
    Выбор из меню плагинов
    

    View Slide

87. View Slide

88. View Slide

89. View Slide

90. 90
    export const colors = {
    // Gray
    gray: "#6a737d",
    gray000: "#6a737d",
    gray100: "#f6f8fa",
    gray200: "#e1e4e8",
    gray300: "#d1d5da",
    gray400: "#959da5",
    gray500: "#6a737d",
    gray600: "#586069",
    gray700: "#444d56",
    gray800: "#2f363d",
    gray900: "#24292e",
    ...
    }
    

    View Slide

91. 91
    Стайл-гайд
    Web
    CSS-in-JS
    react-native-web
    Mobile
    react-native
    Figma
    react-figma
    

    View Slide

92. 92
    Код становится single source of truth для
    дизайн-системы
    

    View Slide

93. 93
    0DUJDPOT
    0DUJDPOT
    

    View Slide

94. View Slide

95. 95
    Создадим компонент для иконки
    *DPO
    

    View Slide

96. import * as React from "react";
    import { SvgXml } from 'react-native-svg';
    export const Icon = (props) => {
    const {src: source, height = 16, width, ratio = 1, ...otherProps} = props;
    return ;
    };
    96
    import * as React from "react";
    import { SvgXml } from 'react-native-svg';
    export const Icon = (props) => {
    const {src: source, height = 16, width, ratio = 1, ...otherProps} = props;
    return ;
    };
    iOS + Android
    react-native-svg
    

    View Slide

97. import * as React from "react";
    export const Icon = (props) => {
    const {src, height = 16, width, ratio = 1, ...otherProps} = props;
    return
    };
    97
    Web
    import * as React from "react";
    export const Icon = (props) => {
    const {src, height = 16, width, ratio = 1, ...otherProps} = props;
    return
    };
    

    View Slide

98. import * as React from "react";
    import {Svg} from "react-figma";
    export const Icon = (props) => {
    const {src: source, height = 16, width, ratio = 1, ...otherProps} = props;
    return
    };
    98
    import * as React from "react";
    import {Svg} from "react-figma";
    export const Icon = (props) => {
    const {src: source, height = 16, width, ratio = 1, ...otherProps} = props;
    return
    };
    Figma
    import {Svg} from "react-figma";
    figma.createNodeFromSvg(svg: string)
    

    View Slide

99. 99
    Создадим компонент под каждую иконку
    $PNQPOFOUT
    

    View Slide

100. 100
     icons/logo-github.svg
     

     View Slide

101. import * as React from "react";
     import icon from "./icons/logo-github.svg"
     import {Icon} from "../../wrappers/icon/Icon";
     export const GitHubLogo = (props) => {
     return
     };
     101
     import * as React from "react";
     import icon from "./icons/logo-github.svg"
     import {Icon} from "../../wrappers/icon/Icon";
     export const GitHubLogo = (props) => {
     return
     };
     import icon from "./icons/logo-github.svg"
     src={icon}
     
     

     View Slide

102. 102
     Покажем все иконки на фрейме
     *DPOT
     'SBNF
     

     View Slide

103. View Slide

104. View Slide

105. View Slide

106. 106
     Что-то более сложное?
     Кнопка!
     #VUUPO
     #VUUPO
     

     View Slide

107. View Slide

108. View Slide

109. View Slide

110. 110
     Удобнее всего начать писать код на react-native
     API react-native поддерживается на остальных платформах
     Но не наоборот!
     

     View Slide

111. 111
     Базовые стили для кнопки
     CBTFTUZMFT
     

     View Slide

112. 112
     export const commonButtonStyle = {
     container: {
     justifyContent: "center",
     alignItems: "center",
     height: 32,
     borderRadius: 3,
     borderWidth: 1,
     borderColor: "rgba(27,31,35,0.2)",
     },
     text: {
     fontFamily: "SF Pro Text",
     fontWeight: "bold",
     fontSize: typeScale.size5,
     textAlign: "center",
     zIndex: 1,
     marginLeft: 12 + borderSize,
     marginRight: 12 + borderSize
     }
     };
     

     View Slide

113. 113
     export const commonButtonSmallStyle = StyleSheet.create({
     container: {
     height: 28
     },
     text: {
     fontSize: typeScale.size6,
     lineHeight: 20,
     marginLeft: 10 + borderSize,
     marginRight: 10 + borderSize
     }
     });
     

     View Slide

114. 114
     Default Button
     %FGBVMU
     #VUUPO
     

     View Slide

115. const styles = StyleSheet.create({
     container: {
     backgroundColor: colors.gray100,
     backgroundImage: `linear-gradient(-180deg, ${colors.gray100} 0%, ${colors.gray300} 90%)`,
     },
     text: {
     color: colors.gray900,
     }
     });
     115
     const styles = StyleSheet.create({
     container: {
     backgroundColor: colors.gray100,
     backgroundImage: `linear-gradient(-180deg, ${colors.gray100} 0%, ${colors.gray300} 90%)`,
     },
     text: {
     color: colors.gray900,
     }
     });
     colors.gray100
     colors.gray100 colors.gray300
     colors.gray900
     Пользуемся значениями из стайл-гайда
     

     View Slide

116. export const DefaultButton = (props) => {
     const { style, children, isHover, isFocus, isSmall } = props;
     return (
     style={[
     commonButtonStyle.container,
     styles.container,
     isHover && hoverStyles.container,
     isFocus && focusStyles.container,
     isSmall && commonButtonSmallStyle.container,
     style,
     ]}
     >
     style={[
     commonButtonStyle.text,
     styles.text,
     isSmall && commonButtonSmallStyle.text,
     ]}
     >
     {children}
     
     
     );
     };
     116
     export const DefaultButton = (props) => {
     const { style, children, isHover, isFocus, isSmall } = props;
     return (
     style={[
     commonButtonStyle.container,
     styles.container,
     isHover && hoverStyles.container,
     isFocus && focusStyles.container,
     isSmall && commonButtonSmallStyle.container,
     style,
     ]}
     >
     style={[
     commonButtonStyle.text,
     styles.text,
     isSmall && commonButtonSmallStyle.text,
     ]}
     >
     {children}
     
     
     );
     };
     isHover, isFocus, isSmall
     isHover && hoverStyles.container,
     isFocus && focusStyles.container,
     isSmall && commonButtonSmallStyle.container,
     

     View Slide

117. 117
     Покажем разные состояния кнопки на фрейме
     

     View Slide

118. 
     
     Button
     
     
     Hovered button
     
     
     Focused button
     
     
     Small button
     
     
     118
     
     
     Button
     
     
     Hovered button
     
     
     Focused button
     
     
     Small button
     
     
     isHover
     isFocus
     isSmall
     

     View Slide

119. View Slide

120. View Slide

121. 121
     Можем использовать ту же самую кнопку в вебе!
     И в мобильных приложениях
     

     View Slide

122. 122
     Но:
     • Нужна обработка нажатия - она разная на разных платформах
     • Нужно обеспечить доступность (a11y)
     Для этого сделаем компонент-обертку!
     

     View Slide

123. 123
     const style = {
     background: "none",
     border: "none",
     padding: 0
     };
     export default function Button(props: ButtonProps) {
     const {children, onClick} = props;
     const [isHover, hoverHandlers] = useHover();
     const [isFocus, focusHandlers] = useFocus();
     return
     {children({isHover, isFocus})}
     
     }
     Веб
     

     View Slide

124. 124
     export default function Button(props: ButtonProps) {
     const {children, onClick} = props;
     const [isFocus, focusHandlers] = useFocus();
     return
     {children({isFocus})}
     ;
     }
     iOS
     

     View Slide

125. 125
     export default function Button(props: ButtonProps) {
     const {children, onClick} = props;
     const [isFocus, focusHandlers] = useFocus();
     return
     {children({isFocus})}
     ;
     }
     Android
     

     View Slide

126. 126
     Хотим оборачивать удобно
     

     View Slide

127. View Slide

128. 128
     iOS и Android
     Это работает с коробки!
     

     View Slide

129. 129
     Для всего остального -
     Вебпак-алиасинг!
     

     View Slide

130. 130
     Веб
     module.exports = configure({
     resolve: {
     extensions: ['.web.tsx', ‘.web.ts','.tsx', '.ts', '.jsx', '.js'],
     alias: {
     'react-native$': ‘react-native-web’
     }
     }
     });
     

     View Slide

131. 131
     module.exports = configure({
     resolve: {
     extensions: ['.figma.tsx', '.figma.ts','.tsx', '.ts', '.jsx', '.js'],
     alias: {
     'react-native$': 'react-figma'
     }
     }
     });
     Figma
     

     View Slide

132. import Button from "../../wrappers/button/Button";
     export default (props: { onClick?: () => void }) => (
     
     {({ isHover, isFocus }) => (
     
     )}
     
     );
     132
     import Button from "../../wrappers/button/Button";
     export default (props: { onClick?: () => void }) => (
     
     {({ isHover, isFocus }) => (
     
     )}
     
     );
     import Button from "../../wrappers/button/Button";
     
     
     

     View Slide

133. 133
     Каталог компонентов
     

     View Slide

134. View Slide

135. 135
     • @storybook/react
     • @storybook/react-native
     • @storybook/addons
     

     View Slide

136. 136
     ├── .storybook - @storybook/react configuration
     ├── .storybook-native - @storybook/react-native configuration
     ├── android - gradle project for React Native app
     ├── assets - React Native app assets
     ├── ios - iOS project for React Native app
     ├── src
     │ ├── components
     │ ├── App.tsx - React Figma app
     │ ├── code.tsx - entty point for Figma plugin Main-thead
     │ ├── ui.html - entty point for Figma plugin UI-thead
     │ └── ui.tsx
     ├── app.json - react-native config file
     ├── babel.config.js - babel config for react-native
     ├── figma.d.ts - figma plugin typings
     ├── figma.webpack.confgi.js - Webpack config for react-figma
     ├── manifest.json - Figma plugin manifest
     ├── metro.config.js - config for Metro bundler
     ├── package.json
     ├── tsconfig.json
     └── yarn.lock
     ├── .storybook - @storybook/react configuration
     ├── .storybook-native - @storybook/react-native configuration
     ├── android - gradle project for React Native app
     ├── assets - React Native app assets
     ├── ios - iOS project for React Native app
     ├── src
     │ ├── components
     │ ├── App.tsx - React Figma app
     │ ├── code.tsx - entty point for Figma plugin Main-thead
     │ ├── ui.html - entty point for Figma plugin UI-thead
     │ └── ui.tsx
     ├── app.json - react-native config file
     ├── babel.config.js - babel config for react-native
     ├── figma.d.ts - figma plugin typings
     ├── figma.webpack.confgi.js - Webpack config for react-figma
     ├── manifest.json - Figma plugin manifest
     ├── metro.config.js - config for Metro bundler
     ├── package.json
     ├── tsconfig.json
     └── yarn.lock
     ├── .storybook - @storybook/react configuration
     ├── .storybook-native - @storybook/react-native configuration
     

     View Slide

137. 137
     import * as React from 'react';
     import {storiesOf} from "@storybook/react-native";
     import {boolean, withKnobs, text} from "@storybook/addon-knobs";
     import {defaultBackground} from "../storybook-decorators/DefaultBackground";
     import { action } from '@storybook/addon-actions';
     import DefaultButton from "../default-button/DefaultButton";
     storiesOf('Button', module)
     .addDecorator(withKnobs)
     .addDecorator(defaultBackground)
     .add('Default Button', () =>
     isSmall={boolean("isSmall", false)}>
     {text("children", "Danger Button")}
     
     );
     

     View Slide

138. View Slide

139. View Slide

140. 140
     Тот же самый код будет работать и на react-native
     

     View Slide

141. 141
     iOS-симулятор
     

     View Slide

142. 142
     Композиция элементов
     DPNQPTJUJPO
     FMFNFOUT
     

     View Slide

143. View Slide

144. 144
     export const DefaultButton = (props: IDefaultButton) => {
     const { style, children, isHover, isFocus, isSmall, icon } = props;
     return (
     style={[
     styles.container,
     isHover && hoverStyles.container,
     isFocus && focusStyles.container,
     isSmall && commonButtonSmallStyle.container,
     style,
     ]}
     >
     {icon}
     
     {children}
     
     
     );
     };
     export const DefaultButton = (props: IDefaultButton) => {
     const { style, children, isHover, isFocus, isSmall, icon } = props;
     return (
     style={[
     styles.container,
     isHover && hoverStyles.container,
     isFocus && focusStyles.container,
     isSmall && commonButtonSmallStyle.container,
     style,
     ]}
     >
     {icon}
     
     {children}
     
     
     );
     };
     icon
     {icon}
     

     View Slide

145. 145
     import {DefaultButton} from "./components/default-button/DefaultButton";
     import {RepoForked} from "./components/icons/RepoForked";
     const App = () => {
     return (
     
     }>
     Fork
     
     
     );
     };
     

     View Slide

146. 146
     Отобразим в Figma:
     

     View Slide

147. 147
     Отобразим в Storybook
     .add('Fork Button', () => }>
     Fork
     );
     

     View Slide

148. 148
     Отобразим в Storybook
     

     View Slide

149. 149
     Таким образом можно собирать сколь угодно сложные элементы
     

     View Slide

150. 150
     Полный код примера есть на GitHub:
     
     github.com/react-figma/PrimerDemo
     

     View Slide

151. 151
     Сделали пример мульти-платформенной дизайн системы
     • Стайл-гайд в коде
     • UI-кит в коде
     • Отображение в Figma
     • Каталог компонентов в Storybook
     

     View Slide

152. 152
     Процесс
     QSPDFTT
     

     View Slide

153. 153
     Интуитивный процесс
     JOUVJUJWF
     QSPDFTT
     

     View Slide

154. View Slide

155. 155
     Хочется автоматизировать процесс
     

     View Slide

156. View Slide

157. 157
     Но у нас другой подход
     BQQSPBDI
     

     View Slide

158. View Slide

159. View Slide

160. 160
     Подход кажется контринтуитивным
     Но лишь потому, что разработчикам хочется чуда
     

     View Slide

161. 161
     • Генераторы кода пока слишком не совершенны
     • Лучший код можно написать только вручную
     • Можно положить дизайн-систему в VCS
     • Консистентность
     

     View Slide

162. 162
     Но подход усложняется
     

     View Slide

163. View Slide

164. 164
     А если хотим внести изменения в дизайн-систему?
     

     View Slide

165. 165
     
     Рисует новый вариант
     
     Вносит изменения
     Используют
     
     исправленную
     
     дизайн-систему
     

     View Slide

166. 166
     При этом возможно совмещение роли дизайнера и разработчика
     

     View Slide

167. 167
     Код дизайн-системы понятный
     Дизайнеры могут делать в нее MR
     Дизайнер в продукте должен быть технологистом
     

     View Slide

168. 168
     В большой компании
     

     View Slide

169. 169
     Дизайн-система
     …
     Продукт 1 Продукт 2 Продукт 3 Продукт 4
     

     View Slide

170. 170
     Свои преимущества:
     • Проще управлять процессом внесения изменений в дизайн-систему
     • Безопасность: код находится у вас
     • Проще запускать новые продукты
     

     View Slide

171. 171
     Рекомендации
     SFDPNNFOEBUJPO
     

     View Slide

172. 172
     Для стайл-гайда лучше использовать
     System UI Theme Specification
     system-ui.com/theme
     

     View Slide

173. 173
     Универсальный формат конфига стайл-гайда
     

     View Slide

174. 174
     const theme = {
     breakpoints: ['40em', '52em', '64em'],
     fontSizes: [
     12, 14, 16, 20, 24, 32, 48, 64
     ],
     colors: {
     blue: '#07c',
     lightgray: '#f6f6ff'
     },
     space: [
     0, 4, 8, 16, 32, 64, 128, 256
     ],
     fonts: {
     body: 'system-ui, sans-serif',
     heading: 'inherit',
     monospace: 'Menlo, monospace',
     },
     fontWeights: {
     body: 400,
     heading: 700,
     bold: 700,
     },
     buttons: {
     primary: {
     color: 'white',
     bg: 'primary',
     }
     }
     }
     Определяем тему
     

     View Slide

175. 175
     p={5}
     fontSize={4}
     width={[ 1, 1, 1/2 ]}
     color='white'
     bg='primary'>
     Box
     
     Пользуемся значениями темы
     

     View Slide

176. 176
     Theme Specification совместим со множеством библиотек
     

     View Slide

177. 177
     + Темизация из коробки
     

     View Slide

178. 178
     • react-primitives-box — универсальная реализация
     

     View Slide

179. 179
     const theme = {
     colors: {
     text: "#000",
     background: "#fff",
     primary: "#07c",
     },
     space: [0, 4, 8, 16, 32, 64, 128, 256],
     fonts: {
     roboto: "Roboto",
     },
     fontSizes: [12, 16, 18, 20, 24, 32, 40, 64, 96],
     text: {
     heading1: {
     fontFamily: "roboto",
     fontSize: 5,
     color: "background",
     },
     },
     };
     

     View Slide

180. 
     sx={{
     p: 4,
     bg: "primary",
     }}
     >
     Hello
     
     
     180
     
     sx={{
     p: 4,
     bg: "primary",
     }}
     >
     Hello
     
     
     theme={theme}
     

     View Slide

181. View Slide

182. 182
     $PNQPOFOU7BSJBOUT
     $PNQPOFOU
     7BSJBOUT
     

     View Slide

183. 183
     Разные состояния можно объединять во варианты
     

     View Slide

184. View Slide

185. 185
     .%9
     .%9
     .%9
     

     View Slide

186. View Slide

187. 187
     # Hello, world!
     MDX is an authorable format that lets you seamlessly write JSX in your Markdown documents.
     It allows for displaying something unique from your design system. E.g., colors:
     
     
     
     
     
     
     
     
     
     

     View Slide

188. 188
     В Figma:
     

     View Slide

189. 189
     Дальнейшие планы
     QMBOT
     

     View Slide

190. 190
     Набор универсальных компонентов
     Button
     SVG
     …
     DPNQPOFOUT
     Для стандартных вещей
     

     View Slide

191. 191
     Адаптер react-figma для Storybook
     SFBDUpHNB
     4UPSZCPPL
     

     View Slide

192. storiesOf('Button', module)
     .addDecorator(withKnobs)
     .addDecorator(defaultBackground)
     .add('Default Button', () =>
     isSmall={boolean("isSmall", false)}>
     {text("children", "Danger Button")}
     
     );
     192
     storiesOf('Button', module)
     .addDecorator(withKnobs)
     .addDecorator(defaultBackground)
     .add('Default Button', () =>
     isSmall={boolean("isSmall", false)}>
     {text("children", "Danger Button")}
     
     );
     storiesOf('Button', module)
     .addDecorator(defaultBackground)
     Добавить фрейм
     

     View Slide

193. storiesOf('Button', module)
     .addDecorator(withKnobs)
     .addDecorator(defaultBackground)
     .add('Default Button', () =>
     isSmall={boolean("isSmall", false)}>
     {text("children", "Danger Button")}
     
     );
     193
     storiesOf('Button', module)
     .addDecorator(withKnobs)
     .addDecorator(defaultBackground)
     .add('Default Button', () =>
     isSmall={boolean("isSmall", false)}>
     {text("children", "Danger Button")}
     
     );
     Добавить в UI плагина контролы
     action('click')
     boolean("isSmall", false)
     

     View Slide

194. 194
     Респонсив
     SFTQPOTJWF
     SFTQPOTJWF
     

     View Slide

195. 195
     В react-native есть Dimensions API
     Все тянется за счет Yoga, но
     

     View Slide

196. View Slide

197. View Slide

198. 198
     Кодогенерация
     DPEF
     HFOFSBUJPO
     

     View Slide

199. 199
     github.com/react-figma/code-generator
     

     View Slide

200. View Slide

201. 201
     github.com/bernaferrari/FigmaToCode
     

     View Slide

202. View Slide

203. View Slide

204. 204
     Сложности
     Этап конвертации Figma-дерева в AST
     Как работать с изменениями (например, props у компонентов)
     Все хотят разного
     

     View Slide

205. 205
     0QFO"*(15
     (15
     (15
     

     View Slide

206. View Slide

207. 207
     Мы открыты для:
     Новых контрибуторов
     Для early adopters
     8FMDPNF
     

     View Slide

208. 208
     Выводы
     Пишите кроссплатформенно и процветайте!
     У хранения дизайн-системы в коде есть преимущества
     Принцип от простого - к сложному
     

     View Slide

209. 209
     Спасибо за внимание!
     5IBOLT
     

     View Slide

210. 210
     Особая благодарность
     ,VEPT
     

     View Slide

211. 211
     MFTJLEFW
     @ilialesik
     @ilyalesik
     ilyalesik/multiplatform-design-systems-talk
     

     View Slide