@figma-export/output-styles-as-css (英语)

样式输出器 @figma-导出 向CSS输出样式.

通过这个输出器,您可以将所有样式导出为内置变量 .css 文档.

这是输出的样本 :

$ tree output/
# output/
# └── _variables.css

.figmaexportrc.js (中文(简体) )

您可以轻松地将此输出器添加到您的 .figmaexportrc.js数字 :

import asCss from '@figma-export/output-styles-as-css'

export default {
    commands: [
        ['styles', {
            fileId: 'fzYhvQpqwhZDUImRz431Qo',
            outputters: [
                asCss({
                    output: './output'
                })
            ]
        }],
    ]
}

output 实值 强制。 。 。 .

getFilename 财务报告和审定财务报表 getVariableName 为: 选项。 。 。 .

import asCss from '@figma-export/output-styles-as-css'
import { kebabCase } from '@figma-export/utils'

...

asCss({
    output: './output',
    getFilename: () => '_variables',
    getVariableName = (style, descriptor) => `${kebabCase(style.name).toLowerCase()}${descriptor != null ? `-${descriptor}` : ''}`,
})

默认值可能改变,请参考 ./src/index.ts

安装

使用 npm :

npm install --save-dev @figma-export/output-styles-as-css

或使用线条 :

yarn add @figma-export/output-styles-as-css --dev