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

Layout Styles#

Type Styles#

Inheritance#

Web defaults#

Layout Styles

Type Styles

Inheritance

Web defaults