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>;