How to Integrate Retool with Figma

Before touching Retool, spend time in Figma understanding the design structure and planning the component mapping. Open your Figma file and switch to the Inspect panel (right side panel → select the Inspect tab, or use the keyboard shortcut I). The Inspect panel shows the exact dimensions, spacing, colors, typography, and CSS values for any selected element. Work through the design systematically and create a mapping from each Figma element to its Retool equivalent: - Figma Frame (top-level screen container) → Retool app canvas - Figma Frame with auto-layout (horizontal) → Retool Columns component or Container with horizontal layout - Figma Frame with auto-layout (vertical) → Retool Container with vertical layout or stacked components - Figma Table / data grid → Retool Table component - Figma Form with inputs → Retool Form component or individual Input components - Figma Chart / graph → Retool Chart component (Plotly.js-based, supports bar, line, area, scatter, pie) - Figma Modal / popup → Retool Modal component - Figma Dropdown / select → Retool Select component - Figma Button (primary, secondary, danger) → Retool Button component with variants - Figma Card / tile → Retool Container with background color and border radius - Figma Text (heading, body, label) → Retool Text component with style configuration - Figma Icon → Retool Icon component or embedded SVG in Text component For Figma elements that have no direct Retool equivalent (complex custom UI patterns, specialized data visualizations, brand-specific components), flag them as Custom Component candidates. These will require more implementation effort. Document this mapping — even a simple list in a Figma comment, Notion page, or text file. This serves as the implementation spec during Retool development and ensures the engineer building the app doesn't have to re-analyze the Figma file from scratch.

Figma's Inspect panel is your source of truth for all visual styling values you'll apply in Retool. Select any element in Figma and the Inspect panel on the right shows the complete visual specification. For spacing: click any container frame in Figma and check the Auto Layout section in Inspect. It shows padding (top, right, bottom, left) and gap (the spacing between child elements). These translate directly to Retool container padding settings and the spacing between components. For colors: select any element and look at Fill, Stroke, or Effect in Inspect. Colors are shown as hex codes (e.g., #1E40AF). In Retool, apply these to component background colors, text colors, and border colors in the component's styling properties. For systematic color application, note the design system's primary, secondary, and semantic colors (success, warning, error) and apply them consistently across all Retool components. For typography: select any text element and Inspect shows Font Family, Font Weight, Font Size, Line Height, and Letter Spacing. In Retool's Text component properties, you can configure these values. Note that Retool uses the Roboto font by default — if your Figma design uses a custom font, you can add a Custom CSS stylesheet in Retool Settings → App Themes to import and apply it. For border radius and shadows: Inspect shows corner radius values and box shadow definitions in CSS format. Apply corner radius to Retool Container and Button components. Box shadows can be applied via Custom CSS on containers. Create a reference doc listing your design's core values: primary color, background color, surface color, border color, body font, heading font sizes, and spacing scale. You'll reference this throughout Retool component configuration.

1/* Custom CSS for Retool App Theme — derived from Figma design spec */
2/* Apply in Retool: Settings → App Themes → Custom CSS */
3
4:root {
5  --color-primary: #1E40AF;
6  --color-primary-light: #DBEAFE;
7  --color-success: #059669;
8  --color-warning: #D97706;
9  --color-error: #DC2626;
10  --color-surface: #FFFFFF;
11  --color-background: #F1F5F9;
12  --color-border: #E2E8F0;
13  --color-text-primary: #1E293B;
14  --color-text-secondary: #64748B;
15  --font-family-base: 'Inter', -apple-system, sans-serif;
16  --border-radius-sm: 4px;
17  --border-radius-md: 8px;
18  --spacing-sm: 8px;
19  --spacing-md: 16px;
20  --spacing-lg: 24px;
21}
22
23/* Import custom font if used in Figma design */
24@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
25
26body {
27  font-family: var(--font-family-base);
28  background-color: var(--color-background);
29}

Retool's layout system uses a 12-column grid within the app canvas. Components are placed on this grid by dragging from the component panel. Containers group components and can have their own padding, background color, and border. Understanding this system is key to recreating Figma's auto-layout structures. For a typical Figma layout with a header row, content area, and sidebar: 1. Drag a Container onto the canvas to serve as the header section. Set its background color to match the Figma header. Inside, drag Text components for the page title and Button components for header actions. 2. For a two-column layout (main content left, sidebar right): drag a Columns component onto the canvas. Set column widths — for a 70/30 split, set left column to 70% and right to 30%. 3. Inside the left column, add the main Table or content area. Inside the right column, add the detail Panel Container. For Figma card layouts (grid of cards, each with an icon, title, and metric): in Retool, use a Container for each card with a background color, border-radius (set in the container's style properties), and padding. Arrange cards using the Columns component or by placing multiple containers side-by-side on the grid. For Figma modal dialogs: use Retool's Modal component. Configure its width to match the Figma modal dimensions, add the content components inside the modal body, and set the footer buttons to match Figma's primary/secondary button arrangement. Figma's auto-layout gap property (spacing between child elements) translates to Retool's component spacing. If components in Retool appear too close or too far apart compared to the Figma design, adjust the spacing between them by dragging the component boundaries in the Retool editor.

With the layout structure in place, apply visual styling to each Retool component to match the Figma design. In Retool, most component styling is configured in the right-hand properties panel when a component is selected. For Table components: configure column header styles (background color, text color, font weight) in the Table component's Style section. Set row height, alternating row colors, border style, and selected row highlight color. Retool's Table supports these in the Appearance settings panel. For Button components: set the Button variant (Primary, Secondary, Tertiary, Danger) and apply custom background colors via the style overrides in the properties panel. Match the Figma button's padding to Retool's button size options (small, medium, large). For Container components acting as cards: set Background Color to match the Figma card background (usually white #FFFFFF on a gray page background), add Border (color, width, and style matching Figma's card border spec), and set Border Radius in the Appearance section to match Figma's corner radius value. For custom font styling that Retool's component properties don't fully expose: use Retool's Custom CSS feature. Each component has a Class Names field in its properties panel. Add a CSS class name (e.g., custom-heading), then define that class in the app's Custom CSS (accessible via Settings → Appearance → Custom CSS). This lets you apply any CSS property to any component. For the app-wide background color and base font: go to Settings → App Themes. Here you can set the theme colors, font family, and base font size that apply to all components in the app. Apply your design system's base values here first, then override specific components as needed.

1/* Component-level Custom CSS overrides */
2/* Apply class names to components via their properties panel,
3   then define the styles in Settings → Appearance → Custom CSS */
4
5/* Custom card component styling */
6.dashboard-card {
7  border-radius: 8px;
8  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
9  background-color: #FFFFFF;
10  padding: 20px;
11  border: 1px solid #E2E8F0;
12}
13
14/* KPI metric value text */
15.kpi-value {
16  font-size: 28px;
17  font-weight: 700;
18  color: #1E293B;
19  line-height: 1.2;
20}
21
22/* KPI label text */
23.kpi-label {
24  font-size: 13px;
25  color: #64748B;
26  font-weight: 500;
27  text-transform: uppercase;
28  letter-spacing: 0.05em;
29}
30
31/* Status badge styling */
32.status-active {
33  background-color: #D1FAE5;
34  color: #065F46;
35  padding: 2px 8px;
36  border-radius: 9999px;
37  font-size: 12px;
38  font-weight: 500;
39}
40
41.status-inactive {
42  background-color: #FEE2E2;
43  color: #991B1B;
44  padding: 2px 8px;
45  border-radius: 9999px;
46  font-size: 12px;
47  font-weight: 500;
48}

When the Figma design includes UI elements that Retool's native component library cannot implement — a custom progress indicator, a specialized tag input, a brand-specific data visualization, or a complex interactive component — use Retool's Custom Components feature to build them in React. Custom Components in Retool are React components that run inside an iframe, communicate with the parent Retool app via the model prop (receiving data) and Retool's trigger mechanism (sending actions back), and can be styled with any CSS including styled-components or Tailwind. To create a Custom Component: in the Component panel, search for 'Custom' and drag a Custom Component onto the canvas. Click the component on the canvas and select 'Open Code Editor' in the properties panel. This opens Retool's Custom Component editor, which shows a React template. For the Figma-derived implementation: extract exact CSS values from Figma's Inspect panel for the custom component. In the Custom Component code editor, write a React functional component using the same values. The iframeModel.subscribe callback receives data from the parent Retool app as the model prop — use this to pass dynamic data (like a status value or a data series) into the component. To send actions back from the Custom Component to the parent app (e.g., a button click that triggers a Retool query), use window.Retool.triggerQuery() inside the Custom Component. Note that the Custom Component runs in a sandboxed iframe with no access to Retool's internal state except what's passed via the model prop. After implementing the Custom Component, configure the Model in the component's properties panel — define the data fields the component needs (e.g., { currentStatus: 'shipped', stages: ['ordered', 'processing', 'shipped', 'delivered'] }) and bind them to Retool query data or component values.

1// Example Custom Component: Status Timeline
2// Matches Figma spec: horizontal step indicators with icons
3
4const { iframeModel } = Retool;
5
6function StatusTimeline() {
7  const [model, setModel] = React.useState({ currentStage: 0, stages: [] });
8  
9  React.useEffect(() => {
10    iframeModel.subscribe(setModel);
11  }, []);
12  
13  const { stages = [], currentStage = 0 } = model;
14  
15  return (
16    <div style={{ display: 'flex', alignItems: 'center', padding: '16px 0', fontFamily: 'Inter, sans-serif' }}>
17      {stages.map((stage, index) => {
18        const isComplete = index < currentStage;
19        const isActive = index === currentStage;
20        const isFuture = index > currentStage;
21        
22        return (
23          <React.Fragment key={stage}>
24            <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', flex: 1 }}>
25              <div style={{
26                width: 32, height: 32, borderRadius: '50%',
27                backgroundColor: isComplete ? '#059669' : isActive ? '#1E40AF' : '#E2E8F0',
28                display: 'flex', alignItems: 'center', justifyContent: 'center',
29                color: (isComplete || isActive) ? 'white' : '#94A3B8',
30                fontSize: 14, fontWeight: 600
31              }}>
32                {isComplete ? '✓' : index + 1}
33              </div>
34              <span style={{
35                fontSize: 11, marginTop: 6,
36                color: isActive ? '#1E40AF' : isFuture ? '#94A3B8' : '#64748B',
37                fontWeight: isActive ? 600 : 400, textAlign: 'center'
38              }}>
39                {stage}
40              </span>
41            </div>
42            {index < stages.length - 1 && (
43              <div style={{
44                height: 2, flex: 2, marginBottom: 18,
45                backgroundColor: isComplete ? '#059669' : '#E2E8F0'
46              }} />
47            )}
48          </React.Fragment>
49        );
50      })}
51    </div>
52  );
53}
54
55ReactDOM.render(<StatusTimeline />, document.getElementById('root'));