В этом руководстве мы хотим объяснить шаги, которые мы использовали для автоматизации процесса токенов дизайна, от Figma, используемого дизайнерами, до Styled-Components, используемых разработчиками.
Важность независимой структуры
Выбор в пользу использования файла JSON обусловлен тем, что нам нужна независимая центральная структура, которая не ограничивает работу и автоматизм между технологией проектирования и технологией разработки. У нас также есть наша платформа, разделенная на микрофронтенды, этот выбор, по нашему мнению, был лучшим способом не ограничивать в конечном итоге и будущие различные интерфейсные фреймворки.
Наше полуавтоматическое решение
Исходя из этих требований, мы решили использовать плагин Figma-tokens, чтобы полуавтоматизировать нашу систему дизайнерских токенов.
Плагин Figma-tokens позволяет сохранять токены, созданные на Figma, в файле JSON и синхронизировать их с третьим сервисом JSONbin или с GitHub.
Наша система управления версиями — Bitbucket, что позволяет нам выбирать JSONbin для простой и быстрой реализации.
Как это работает
В первую очередь дизайнер выталкивает из плагина Figma-tokens токены, созданные с помощью Figma, на JsonBin.
В коде, в нашем случае в исходниках библиотеки компонентов-микрофронтенда, мы создаем скрипт для запуска с помощью npm, который загружает JSON и преобразует его в объект для использования затем с Styled-Components.
Дизайнер выталкивает из токенов Figma токены дизайна.
Разработчик запускает npm design-tokens, единую команду для загрузки, синхронизации и преобразования дизайн-токенов.
Что происходит при запуске дизайнерских токенов npm run:
- Вытащить дизайн-токены из jsonBIN и сохранить в файл
- Преобразует переменные в значения
- Оптимизировать структуру JSON
- Добавить дополнительные токены
- Импортировать токены из источников
Давайте посмотрим на структуру, которая у нас есть внутри папки с дизайном, а затем мы можем начать видеть, что содержит каждый файл.
Приступаем к кодированию
1. Вытащите дизайн-токены из jsonBIN и сохраните их в файл
Прежде всего, следуя официальному руководству (https://jsonbin.io/api-reference), нам нужно сделать вызов ajax, чтобы получить токены дизайна из jsonBIN и сохранить их в файле, который мы назовем figma. -токены.json.
Давайте создадим файл design-tokens.js.
require('dotenv').config()
const axios = require('axios')
const fs = require('fs')
// Get design-tokens from jsonBIN
const options = {
url: 'https://api.jsonbin.io/v3/b/XXXXXXXXXXXXXX',
method: 'GET',
responseType: 'json',
headers: {
'X-Master-Key': XXXXXXXXXXXXXX
}
}
// Save design-tokens in figma-tokens.json
const getTokens = async () => await axios(options)
getTokens().then(res => {
const file = 'src/design/design-tokens/figma-tokens.json'
const figmaTokens = JSON.stringify(res.data.record.values)
fs.writeFileSync(file, figmaTokens)
})
В package.json мы создаем новый скрипт с именем design-tokens.
"scripts": {
"design-tokens": "node ./src/design/design-tokens/utils/design-tokens.js"
}
2. Преобразует переменные в значения
Установите и используйте плагин tokens-transformer (от six7, того же создателя Figma-токенов), чтобы преобразовать все переменные дизайн-токенов в значения.
Откройте терминал и установите его:
npm install tokens-transformer — -save-dev
Позже мы увидим, как его использовать.
3. Оптимизация структуры JSON
Теперь мы хотим оптимизировать структуру JSON, удалив свойство «значение», так как это постоянно повторяющийся ключ. Таким образом, разработчикам становится доступнее использовать токены в источниках.
4. Добавьте дополнительные токены
Если нам нужны дополнительные токены и мы хотим добавить их непосредственно в наше приложение, мы можем создать новый файл, содержащий их, с именем Additional-tokens.json.
Теперь в сценарии нам нужно объединить файлы figma-tokens.json и additional-tokens.json в один файл с именем tokens.json.
Давайте создадим файл design-tokens-transformer.js.
const fs = require('fs')
const filterValues = obj => {
for (const i in obj) {
if (!obj.hasOwnProperty(i)) continue
if (obj[i].hasOwnProperty('value')) {
if (typeof obj[i].value === 'object') {
const { value, ...rest } = obj[i]
obj[i] = { ...value, ...rest }
} else {
obj[i] = obj[i].value
}
}
if (typeof obj[i] === 'object') {
filterValues(obj[i], 'value')
}
}
return obj
}
// Load tokens.json and figma-tokens-transformed.json files
const additionalTokens = JSON.parse(
fs.readFileSync('src/design/design-tokens/additional-tokens.json')
)
const figmaTokens = JSON.parse(
fs.readFileSync('src/design/design-tokens/figma-tokens-transformed.json')
)
// Filters json structure removing the properties "value"
const smartFigmaTokens = filterValues(figmaTokens)
// Delete useless figma.tokens-transformed file
fs.unlinkSync('src/design/design-tokens/figma-tokens-transformed.json')
// Merge of figma-tokens and additional-tokens in tokens.json
const file = 'src/design/design-tokens/tokens.json'
const mergedTokens = JSON.stringify({
...smartFigmaTokens,
...additionalTokens
})
fs.writeFileSync(file, mergedTokens)
Мы почти закончили, нам просто нужно настроить в package.json нашу команду design-tokens для запуска всех новых скриптов.
"scripts": {
"design-tokens": "node ./src/design/design-tokens/utils/design-tokens.js &&
node node_modules/token-transformer
./src/design/design-tokens/figma-tokens.json
./src/design/design-tokens/figma-tokens-transformed.json &&
node ./src/design/design-tokens/utils/design-tokens-transformer.js"
}
Теперь можно запустить команду:
npm run design-tokens.
5. Импортируйте токены из источников
Наконец, мы можем импортировать токены в наши источники javascript и использовать их.
Создадим файл tokens.js.
import tokens from './tokens.json' export default tokens
Теперь можно импортировать токены в любой компонент, чтобы определить его значения стилей. создание, например, Button.js
import tokens from './design/design-tokens/tokens'
const StyledButton = styled.button`
color: ${tokens.button.primary.textColor};
background-color: ${tokens.button.primary.backgroundColor};
`
Наслаждаться!
