Overview Transform hooks allow you to customize how TemPad Dev generates code from Figma designs. Each hook receives specific parameters and returns transformed output.
transform Transform the generated CSS code and parsed style properties.
Signature transform ?: ( params : TransformParams ) => string
Parameters Show TransformParams Properties
The generated CSS code 'background-color: red; color: blue;'
style
Record<string, string>
required
The parsed CSS properties { 'background-color' : 'red' , 'color' : 'blue' }
True when pixel values should be converted to rem units
Root font size used when converting pixels to rem units
Returns Transformed CSS code string
Example transform : ({ code , style , options }) => { // Add vendor prefixes if ( style . display === 'flex' ) { return code + ' -webkit-box-orient: vertical;' } return code }
transformVariable Transform CSS variable references to match your theming system.
Signature transformVariable ?: ( params : TransformVariableParams ) => string
Parameters params
TransformVariableParams
required
Show TransformVariableParams Properties
The generated CSS variable code 'var(--color-primary, #6699cc)'
The variable name without the var() wrapper The variable fallback value, if defined True when pixel values should be converted to rem units
Root font size used when converting pixels to rem units
Returns Transformed variable reference
Example // CSS variables to SCSS variables transformVariable : ({ name }) => { return `$ ${ name . replace ( / ^ --/ , '' ) } ` } // Input: 'var(--color-primary, #6699cc)' // Output: '$color-primary' // CSS variables to design tokens transformVariable : ({ name , value }) => { const tokenPath = name . replace ( / ^ --/ , '' ). replace ( /-/ g , '.' ) return `theme. ${ tokenPath } ` } // Input: 'var(--color-text-primary)' // Output: 'theme.color.text.primary'
transformPx Transform pixel values to your desired unit system.
Signature transformPx ?: ( params : TransformPxParams ) => string
Parameters params
TransformPxParams
required
Show TransformPxParams Properties
True when pixel values should be converted to rem units
Root font size used when converting pixels to rem units (typically 16)
Returns Transformed value with unit
Example // Convert to rem transformPx : ({ value , options }) => { if ( options . useRem ) { return ` ${ value / options . rootFontSize } rem` } return ` ${ value } px` } // Input: 16 // Output: '1rem' (when useRem is true) // Custom scaling transformPx : ({ value }) => { return ` ${ value * 0.75 } px` } // Input: 16 // Output: '12px'
transformComponent Transform Figma component instances into custom dev components.
Signature transformComponent ?: ( params : TransformComponentParams ) => DevComponent | string
Parameters params
TransformComponentParams
required
Show TransformComponentParams Properties
The design component with properties and children. See Types Reference for full structure. Returns A DevComponent object or raw string markup
Example import { h } from '@tempad-dev/plugins' transformComponent : ({ component }) => { // Map Figma Button to your design system if ( component . mainComponent ?. name === 'Button' ) { const variant = component . properties . variant || 'primary' const label = component . properties . label || 'Button' return h ( 'Button' , { variant }, [ label ]) } // Return null to use default rendering return null }
Using the h() Helper The h() function creates DevComponent trees with a clean syntax:
import { h } from '@tempad-dev/plugins' // Simple element const text = h ( 'Text' , 'Hello world' ) // With props const button = h ( 'Button' , { variant: 'primary' }, [ 'Submit' ]) // Nested children const container = h ( 'Container' , { size: 'lg' }, [ h ( 'Heading' , { level: 2 }, [ 'Title' ]), h ( 'Button' , { variant: 'primary' }, [ 'Submit' ]) ])
Common Patterns Combining Hooks export default definePlugin ({ name: 'Custom Theme' , code: { scss: { title: 'SCSS' , lang: 'scss' , transformVariable : ({ name }) => `$ ${ name . replace ( / ^ --/ , '' ) } ` , transformPx : ({ value , options }) => options . useRem ? ` ${ value / options . rootFontSize } rem` : ` ${ value } px` , transform : ({ code , style }) => { // Post-process the entire CSS block return code . replace ( /px/ g , 'rem' ) } } } })
Component Mapping transformComponent : ({ component }) => { const componentMap = { 'Button' : ( props ) => h ( 'UIButton' , { ... props }), 'Input' : ( props ) => h ( 'TextField' , { ... props }), 'Card' : ( props ) => h ( 'Surface' , { elevation: 1 , ... props }) } const transform = componentMap [ component . mainComponent ?. name ] return transform ? transform ( component . properties ) : null }
See Also
definePlugin Create a plugin configuration
Types Reference Full type definitions
