Styling

Components use CSS styles + flexbox layout.

Layout Styles

property	type	supported?
shadowColor	Color	✅
shadowOffset	{ width: number, height: number }	✅
shadowOpacity	number	✅
shadowSpread	number	⛔
shadowRadius	number	✅
width	number | percentage	✅
height	number | percentage	✅
top	number | percentage	✅
left	number | percentage	✅
right	number | percentage	✅
bottom	number | percentage	✅
minWidth	number | percentage	✅
maxWidth	number | percentage	✅
minHeight	number | percentage	✅
maxHeight	number | percentage	✅
margin	number | percentage	✅
marginVertical	number | percentage	✅
marginHorizontal	number | percentage	✅
marginTop	number | percentage	✅
marginBottom	number | percentage	✅
marginLeft	number | percentage	✅
marginRight	number | percentage	✅
padding	number | percentage	✅
paddingVertical	number | percentage	✅
paddingHorizontal	number | percentage	✅
paddingTop	number | percentage	✅
paddingBottom	number | percentage	✅
paddingLeft	number | percentage	✅
paddingRight	number | percentage	✅
position	absolute | relative	✅
flexDirection	row | row-reverse | column | column-reverse	✅
flexWrap	wrap | nowrap	✅
justifyContent	flex-start | flex-end | center | space-between | space-around	✅
alignItems	flex-start | flex-end | center | stretch	✅
alignSelf	auto | flex-start | flex-end | center | stretch	✅
overflow	visible | hidden | scroll	✅
flex	number	✅
flexGrow	number	✅
flexShrink	number	✅
flexBasis	number | percentage	✅
aspectRatio	number	✅
zIndex	number	⛔
backfaceVisibility	visible | hidden	⛔️
backgroundImage	string | {uri: string}	✅
backgroundColor	Color	✅
borderColor	Color	✅
borderTopColor	Color	⛔
borderRightColor	Color	⛔
borderBottomColor	Color	⛔
borderLeftColor	Color	⛔
borderRadius	number | percentage	✅
borderTopLeftRadius	number | percentage	✅
borderTopRightRadius	number | percentage	✅
borderBottomLeftRadius	number | percentage	✅
borderBottomRightRadius	number | percentage	✅
borderStyle	solid | dotted | dashed	⛔
borderWidth	number | percentage	✅
borderTopWidth	number | percentage	⛔
borderRightWidth	number | percentage	⛔
borderBottomWidth	number | percentage	⛔
borderLeftWidth	number | percentage	⛔
opacity	number	✅

Type Styles

property	type	supported?
Color	Color	✅
fontFamily	string	✅
fontSize	number	✅
fontStyle	normal | italic | solid	✅
fontWeight	'normal' | 'bold' | '100' | '200' | ... | '900'	✅
textDecorationLine	none | underline | line-through	✅
textShadowOffset	{ width: number, height: number }	✅
textShadowRadius	number	✅
textShadowColor	Color	✅
letterSpacing	number | percentage	✅
lineHeight	auto | number | percentage	✅
textAlign	auto | left | right | center | justify	✅
writingDirection	auto | ltr | rtl	⛔️
opacity	number	✅
percentage	points | 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>;

Inheritance

It's possible to enable a CSS-like inheritance.

Available under the flag process.env.REACT_FIGMA_STYLE_INHERITANCE_ENABLED.

An example:

<View style={{ fontSize: 50, fontWeight: 'bold', fontFamily: 'Roboto' }}>

<View style={{ fontSize: 48 }}>

<View style={{ width: 200, height: 100, backgroundColor: '#dd55aa' }} />

<Text style={{ color: '#ffffff' }}>text</Text>

</View>

</View>

The text got a combined style:

({fontWeight: 'bold', fontFamily: 'Roboto', fontSize: 48, color: '#ffffff' })

Inherited styles props:

• color
• fontFamily
• fontSize
• fontStyle
• fontVariant
• fontWeight
• textAlign
• lineHeight
• letterSpacing

Supported components:

• Frame (and View)
• Page
• Text (as a recipient)

Warning! Inheritance is not compatible with React Native.

Web defaults

Available under the flag process.env.REACT_FIGMA_WEB_DEFAULTS_ENABLED.

On the Web defaults mode, react-figma will try to simulate Web default behavior:

• A text with display: block should get full width (width: 100%)
• A container with display: flex should get flexDirection: row
• alignItems: stretch for containers by default