Styling

Components use CSS styles + flexbox layout.

Layout Styles

propertytypesupported?
shadowColorColorโœ…
shadowOffset{ width: number, height: number }โœ…
shadowOpacitynumberโœ…
shadowSpreadnumberโ›”
shadowRadiusnumberโœ…
widthnumber | percentageโœ…
heightnumber | percentageโœ…
topnumber | percentageโœ…
leftnumber | percentageโœ…
rightnumber | percentageโœ…
bottomnumber | percentageโœ…
minWidthnumber | percentageโœ…
maxWidthnumber | percentageโœ…
minHeightnumber | percentageโœ…
maxHeightnumber | percentageโœ…
marginnumber | percentageโœ…
marginVerticalnumber | percentageโœ…
marginHorizontalnumber | percentageโœ…
marginTopnumber | percentageโœ…
marginBottomnumber | percentageโœ…
marginLeftnumber | percentageโœ…
marginRightnumber | percentageโœ…
paddingnumber | percentageโœ…
paddingVerticalnumber | percentageโœ…
paddingHorizontalnumber | percentageโœ…
paddingTopnumber | percentageโœ…
paddingBottomnumber | percentageโœ…
paddingLeftnumber | percentageโœ…
paddingRightnumber | percentageโœ…
positionabsolute | relativeโœ…
flexDirectionrow | row-reverse | column | column-reverseโœ…
flexWrapwrap | nowrapโœ…
justifyContentflex-start | flex-end | center | space-between | space-aroundโœ…
alignItemsflex-start | flex-end | center | stretchโœ…
alignSelfauto | flex-start | flex-end | center | stretchโœ…
overflowvisible | hidden | scrollโœ…
flexnumberโœ…
flexGrownumberโœ…
flexShrinknumberโœ…
flexBasisnumber | percentageโœ…
aspectRationumberโœ…
zIndexnumberโ›”
backfaceVisibilityvisible | hiddenโ›”๏ธ
backgroundImagestring | {uri: string} โœ…
backgroundColorColorโœ…
borderColorColorโœ…
borderTopColorColorโ›”
borderRightColorColorโ›”
borderBottomColorColorโ›”
borderLeftColorColorโ›”
borderRadiusnumber | percentageโœ…
borderTopLeftRadiusnumber | percentageโœ…
borderTopRightRadiusnumber | percentageโœ…
borderBottomLeftRadiusnumber | percentageโœ…
borderBottomRightRadiusnumber | percentageโœ…
borderStylesolid | dotted | dashedโ›”
borderWidthnumber | percentageโœ…
borderTopWidthnumber | percentageโ›”
borderRightWidthnumber | percentageโ›”
borderBottomWidthnumber | percentageโ›”
borderLeftWidthnumber | percentageโ›”
opacitynumberโœ…

Type Styles

propertytypesupported?
ColorColorโœ…
fontFamilystringโœ…
fontSizenumberโœ…
fontStylenormal | italic | solidโœ…
fontWeight'normal' | 'bold' | '100' | '200' | ... | '900'โœ…
textDecorationLinenone | underline | line-throughโœ…
textShadowOffset{ width: number, height: number }โœ…
textShadowRadiusnumberโœ…
textShadowColorColorโœ…
letterSpacingnumber | percentageโœ…
lineHeightauto | number | percentageโœ…
textAlignauto | left | right | center | justifyโœ…
writingDirectionauto | ltr | rtlโ›”๏ธ
opacitynumberโœ…
percentagepoints | percentagesโœ…

Styles can be passed to components as plain objects.

import { View, StyleSheet } from 'react-figma';
// inline props
<View
style={{
backgroundColor: 'hotPink',
width: 300,
}}
/>
// plain JS object
const style = {
backgroundColor: 'hotPink',
width: 300,
}
<View style={style} />
// StyleSheet
const styles = StyleSheet.create({
foo: {
backgroundColor: 'hotPink',
width: 300,
}
})
<View style={styles.foo} />
<View style={[styles.foo, styles.bar]} />

You can use variables in your styles just like a standard React application:

const colors = {
Haus: '#F3F4F4',
Night: '#333',
Sur: '#96DBE4',
Peach: '#EFADA0',
Pear: '#93DAAB',
};
<View>
{Object.keys(colors).map(name => (
<View
key={name}
style={{
flex: 1,
backgroundColor: colors[name],
}}
/>
))}
</View>;