# How to Integrate Retool with Adobe XD

- Tool: Retool
- Difficulty: Beginner
- Time required: 15 minutes
- Last updated: April 2026

## TL;DR

Use Adobe XD with Retool by exporting design specs from XD's Design Specs feature and mapping components to Retool's component library. Adobe XD serves as the wireframing and handoff tool; Retool builders use the exported specs to replicate layouts, color tokens, and interaction patterns. No API integration is required for the core workflow — it's a design-to-build bridge.

## Why Use Adobe XD with Retool?

Internal tools built in Retool are often constructed by developers or operations analysts who are not professional designers. When a design team produces wireframes and interaction specs in Adobe XD for a new internal dashboard, there is frequently a gap between what was designed and what gets built — because the builder does not have a clear, accessible reference for colors, spacing, component layouts, and interaction flows. Adobe XD's Design Specs feature closes this gap by generating a shareable, browser-accessible specification that non-designers can read and reference while configuring Retool components.

XD's specs provide pixel-accurate measurements, hex color values, font sizes and weights, component names, and spacing values — all of which map directly to the fields in Retool's component Inspector panel. A designer who specifies a Button with background color #2563EB, 8px border radius, and 14px font can communicate that precisely to a Retool builder, who sets those exact values in the Button component's style configuration. This is a significant improvement over passing static image mockups or describing designs verbally.

For organizations that use Adobe Creative Cloud extensively, the XD-to-Retool workflow also creates alignment between the design system used in XD (colors, typography, spacing scales) and the visual configuration of Retool internal tools. This is particularly valuable when internal tools are visible to customers or partners — a consistently styled Retool app that matches the design language of customer-facing products reinforces brand professionalism.

## Before you start

- Adobe XD installed and a Creative Cloud account with the design file you want to use as a reference
- A Retool account (Cloud or self-hosted) with permission to build apps
- The Adobe XD design file with completed wireframes or component specifications for the Retool app to be built
- Optional: Adobe Developer Console application credentials if you want to use XD's REST API for programmatic asset access

## Step-by-step guide

### 1. Export XD design specs for Retool builder reference

In Adobe XD, open the design file containing the wireframes or mockups for the Retool app you are building. In the top menu, go to File → Share → Share for Development. Alternatively, click the Share icon in the top-right toolbar and select the 'Development' sharing option.

In the Share for Development dialog, configure the export settings:
- Title: Give the spec a clear name, such as 'Customer Support Dashboard — Retool Spec'
- Access: Set to 'Anyone with the link' if the Retool builder is outside your organization, or 'Only invited people' for restricted access within Creative Cloud
- Include images: Enable this so the spec page shows design assets alongside measurements
- Offline: Optionally enable for sharing without requiring an Adobe account

Click Publish Link. Adobe XD generates a cloud-hosted URL (starting with xd.adobe.com/view/...) that opens a browser-based specification viewer. Share this URL with the Retool app builder.

The spec viewer shows all artboards from the design file. Clicking on any element reveals its exact properties in a right-side panel: position (x/y), dimensions (width/height), colors (hex values), typography (font family, size, weight, line height), opacity, and border radius. These values are what the Retool builder will reference when configuring components in Retool's Inspector panel. For components like buttons, the spec shows all interactive states (default, hover, pressed) which inform Retool's component configuration.

**Expected result:** A shareable xd.adobe.com/view/... URL is generated that opens a browser-based design specification. The Retool builder can access it without an Adobe account (if set to public) and click any element to see its exact CSS-equivalent property values.

### 2. Map XD color palette to Retool theme configuration

With the XD spec open, extract the color palette defined for the design system. In the XD spec viewer, look for the Assets panel which shows the defined colors, text styles, and components. Click each color swatch to see its hex value.

In your Retool app, access the app theme settings by clicking the theme icon in the top toolbar of the app editor (the paint palette icon), or through Settings → App Appearance. Retool's theme configuration allows setting:
- Primary color: Used for buttons, links, and focus states
- Background color: App background
- Border radius: Applied to buttons and components
- Font family: If XD uses a specific web-safe or Google font

Set the Primary color field to the primary brand hex color from the XD spec. For border radius, match the value specified in XD for buttons and cards (common values are 4px, 6px, or 8px).

For individual components that need specific colors not covered by the theme, open that component's Inspector panel in Retool and navigate to the Style section. Enter the hex value from the XD spec directly. For text colors, background fills, and border colors, Retool accepts standard hex codes (#RRGGBB or #RRGGBBAA for transparency).

Document the color mapping in a comment or description in the Retool app — something like 'Colors from XD spec: Primary #2563EB, Secondary #0891B2, Error #DC2626' — so future builders can maintain consistency without reopening the XD spec.

**Expected result:** The Retool app's theme colors match the XD design system. Primary buttons, selected states, and interactive elements use the same brand colors specified in the XD spec.

### 3. Translate XD layout and component specs to Retool components

With the XD spec URL open in a browser tab alongside the Retool app editor, systematically translate the XD design into Retool components. Start with the overall page layout, then work into specific components.

For each major section in the XD design:
1. Create a Container component in Retool and set its padding values to match the XD spec. XD specs show padding as a space between the container edge and its contents — use the same values in Retool's Container padding fields (top, right, bottom, left).
2. Check the XD spec for the section's background color and set it in the Container's Style section.
3. For sections arranged horizontally, enable horizontal layout in the Container's configuration.

For data tables, the most important XD-to-Retool mappings are:
- Column widths specified in XD → set as fixed pixel widths in the Retool Table's column configuration
- Column headers in XD → set as column header labels in Retool
- Row height in XD → configure in Retool's Table Inspector under Appearance
- Conditional cell colors (e.g., red for error status, green for active) → configure as conditional column styling in Retool

For form inputs, buttons, and select dropdowns, the XD component names should match Retool's component type names closely. XD 'Input Field' → Retool 'Text Input'. XD 'Dropdown' → Retool 'Select'. XD 'Primary Button' → Retool 'Button' with the Primary style. Reference the XD spec for each component's specific size and style, and configure Retool's Inspector fields accordingly.

**Expected result:** The Retool app's layout visually approximates the XD wireframe — section structure, spacing, column arrangement, and component types match the design specification. Color values and typography are consistent with the XD design system.

### 4. Map XD prototype interactions to Retool event handlers

Adobe XD prototypes define interaction flows: a user clicks a button and navigates to a different artboard, or a dropdown selection reveals a panel. These interactions need to be translated into Retool's event handler system.

Open the XD spec in prototype mode (the play button icon in XD shows the interactive prototype; the spec view shows the static properties). Review the interaction flows defined in the prototype to understand what happens when users click each interactive element.

For each interaction in XD, create the equivalent in Retool:
- XD: Click button → Navigate to artboard → Retool: Button click event handler → Show/hide a Container component or navigate to a different page using Retool's multi-page app configuration
- XD: Form submit → Show success state → Retool: Button click → Trigger query → On success → Show notification or toggle visibility of a success Container
- XD: Dropdown change → Show/hide conditional content → Retool: Select component → On change → Set a state variable → Add a visibility condition to the dependent Container using {{ stateVar.value === 'expected_value' }}
- XD: Hover state → Show tooltip → Retool: Use a Tooltip component wrapper around interactive elements

For navigation between major sections, if the XD design shows distinct 'pages' or 'screens', use Retool's multi-page app feature to create separate pages. Add a navigation component (Button group or custom navigation Container) that triggers page navigation using Retool's Navigate action in event handlers.

**Expected result:** User interactions in the Retool app follow the same logical flow as the XD prototype — clicking a button navigates to the expected section, form submissions show appropriate success states, and conditional content shows and hides based on selections.

### 5. Optionally connect to the XD REST API for programmatic asset access

If your organization uses Adobe XD's cloud services extensively and needs to programmatically pull XD project metadata into Retool (for example, building a design asset registry or tracking which XD files are associated with which Retool apps), you can connect Retool to Adobe's Creative Cloud APIs using a REST API Resource.

This requires creating an Adobe Developer Console application as described in the Adobe Creative Cloud integration guide. The XD project data is accessible through Adobe's Creative Cloud Content API — XD files (.xd) are stored in Creative Cloud storage like any other Creative Cloud file.

Navigate to Resources tab → Add Resource → REST API. Configure:
- Name: Adobe CC API
- Base URL: https://cc-api-storage.adobe.io
- Headers: Authorization: Bearer {{ adobeAccessToken.value }}, x-api-key: {{ retoolContext.configVars.ADOBE_CLIENT_ID }}

Create a query: GET /files with a filter for .xd files. The response includes file names, paths, sizes, and modification dates. Add a JavaScript transformer to extract just the XD files from the response:

Drag a Table component onto a dedicated 'Design Assets' panel in your app. Bind it to the XD files query data. Add a column with a clickable link that opens the XD spec URL (if stored in your internal database alongside the XD file path).

For teams managing many Retool apps with corresponding XD specs, this creates a centralized design-to-app registry: a single Retool panel where you can see all XD design files, their associated Retool app, and when the design was last updated.

```
// JavaScript transformer to filter and format XD files from CC storage listing
const allFiles = Array.isArray(data.children) ? data.children : [];

// Filter for XD files only
return allFiles
  .filter(file => file.name && file.name.endsWith('.xd'))
  .map(file => ({
    name: file.name.replace('.xd', ''),
    path: file.path,
    size_kb: file.size ? Math.round(file.size / 1024) + ' KB' : '—',
    modified: file.modified ? new Date(file.modified).toLocaleDateString() : '—',
    cc_url: `https://assets.adobe.com/files${file.path}`
  }));
```

**Expected result:** The Design Assets panel in Retool shows all XD files stored in Creative Cloud with names, sizes, and modification dates. Clicking a row opens the associated XD spec URL or provides the Creative Cloud path for reference.

## Best practices

- Always use XD's 'Share for Development' spec export (not 'Share for Review' or 'Share Prototype') when sharing with Retool builders — the Development spec shows the exact numerical values needed for component configuration.
- Establish a naming convention in XD that maps to Retool component types — name XD components 'Table', 'Select', 'Button', 'TextInput' rather than creative names, so builders can directly identify which Retool component to use.
- Extract the full color palette and typography scale from XD's Assets panel before starting Retool construction, and apply them via Retool's app-level theme settings rather than overriding individual components — this ensures consistency and makes future design updates easier to propagate.
- Use XD's component states (hover, pressed, disabled) to design all interactive states of buttons and inputs, then configure the equivalent states in Retool's component Inspector rather than leaving interactive states unstyled.
- Keep the XD spec URL in a visible, shared location (pinned in the Retool app's description field, or in team documentation) so builders can reference it without asking designers, reducing design-to-build friction.
- When XD designs include data visualization (charts, graphs), note the chart type, axis labels, and color series from the XD spec and configure Retool's Chart component (Plotly.js-powered) to match using the same color palette and chart type.
- Review the XD prototype interactions during the Retool build process — prototype flows often reveal UX requirements (confirmation steps, error states, empty states) that are not visible in static wireframes but must be implemented in Retool.
- After building the Retool app, share a screenshot or screencast back with the designer for visual review against the XD spec before launching to users — minor discrepancies are easiest to fix before the app goes live.

## Use cases

### Translate XD wireframes into Retool dashboard layouts

A designer creates a wireframe for a new customer support dashboard in Adobe XD, specifying the header, sidebar navigation, main table panel, and filter controls. Using XD's Design Specs share link, the Retool builder accesses exact dimensions, column widths, and component placement. They recreate the layout in Retool using Container components for sections, configuring padding and spacing values from the XD spec to match the intended design.

Prompt example:

```
Build a customer support dashboard in Retool that matches the XD wireframe: a top header bar with logo and user menu, a left sidebar with navigation links, a main Table component for tickets with column widths specified in the spec, and a filter panel on the right using Select and DateRange components. Use the hex colors from the XD color palette in component style configurations.
```

### Apply XD design tokens to Retool's theme system

A brand designer has defined a color palette, typography scale, and spacing system in Adobe XD for all internal tools. Using the XD Design Specs export, a Retool administrator extracts the hex color values, font families, and spacing measurements. They configure Retool's app-level theme settings to match — setting primary color, border radius, font family, and font sizes — so all components in the Retool app automatically reflect the approved brand standards.

Prompt example:

```
Configure a Retool app theme using design tokens from an Adobe XD design system: set the primary color to the brand blue (#2563EB), secondary color to the accent teal, font family to Inter, default border radius to 6px, and button text to 14px bold. Apply these settings through Retool's app-level theme configuration panel rather than overriding individual components.
```

### Build an XD asset metadata browser using the XD API

For organizations that use Adobe XD's cloud features extensively, connect Retool to XD's API to build an asset management dashboard. Pull project metadata, artboard names, and sharing links from XD cloud documents. Combine this with an internal database that tracks which XD projects are associated with which Retool apps, creating a design-to-tool registry that helps teams find the design specs for any internal tool quickly.

Prompt example:

```
Build an XD project browser that queries the Adobe XD API for all projects in the organization's Creative Cloud account. Show project name, artboard count, last modified date, and sharing link in a Table. Add an internal database query that joins XD project IDs with a Retool apps registry table, showing which XD project was used to design each Retool app.
```

## Troubleshooting

### XD spec link shows a blank page or 'This project is no longer available' error

Cause: The XD spec sharing link has expired (XD specs can be configured with expiry dates) or the designer has republished the spec, invalidating the old URL. Adobe XD generates a new URL each time a spec is published.

Solution: Ask the designer to republish the spec in XD (File → Share → Share for Development → Publish Link) and share the new URL. When the spec is republished, any changes in the XD file are included. Consider storing the current spec URL in a shared team location (Notion, Confluence, or a Retool database) so builders always have the latest link.

### Colors in Retool look different from the XD design even though the same hex code was used

Cause: Adobe XD files may use a non-sRGB color profile (P3, Display P3) for wider color gamut display. Hex values from XD in a P3 color space will display differently on standard sRGB screens when used in Retool, which renders in sRGB.

Solution: In Adobe XD, check the document color profile under File → Document Properties. If the document uses P3 or a non-sRGB profile, ask the designer to provide sRGB equivalents of the hex values, or export the color palette from XD in sRGB mode. The visual difference is typically subtle but noticeable for saturated blues and greens.

### Component spacing in Retool does not match the XD spec measurements

Cause: XD measures spacing between elements as the gap between their bounding boxes, while Retool uses padding (space inside a container) and margin concepts. Translating XD gap measurements to Retool Container padding requires understanding which element is the container and which is its child.

Solution: In XD spec view, click the space between two elements to see the gap measurement. In Retool, apply this value as padding to the parent Container component, not as a margin on the child component. For gaps between sibling components (e.g., two side-by-side buttons), use Retool's horizontal Container layout and set the gap value in the Container's spacing configuration.

## Frequently asked questions

### Do Retool builders need an Adobe account to view XD design specs?

No. When designers share an XD spec using the 'Anyone with the link' access setting, the spec viewer is accessible in any browser without an Adobe account. The viewer shows all artboard measurements, colors, typography, and component details. If the spec is set to 'Only invited people', viewers need an Adobe account to log in and access it.

### Does Adobe XD have a REST API that Retool can query for design data?

Adobe XD files are stored in Creative Cloud storage and accessible via the Creative Cloud Content API. You can retrieve XD file metadata (name, size, modification date, path) programmatically. However, artboard-level content (component data, design tokens, interaction specs) is not directly exposed through a public REST API — that data is visible only through the XD spec viewer in the browser. For programmatic design token access, consider tools like Figma or Zeplin which have more comprehensive developer APIs.

### How do I keep the Retool app updated when the XD design changes?

When a designer updates and republishes the XD spec, share the new spec URL with the Retool builder. The builder reviews the changes (XD spec viewer can show a diff between versions if the designer uses XD's version history) and updates the affected Retool components. For systematic design updates — like a brand color change — update the Retool app's theme settings (which propagates to all components using theme colors) rather than changing individual components one by one.

### Can I embed an XD prototype view inside a Retool app for reference during development?

Yes. Retool supports iFrame components that can embed external web pages. During the development phase, you can add an iFrame component that loads the XD spec or prototype URL. This gives builders a split-screen reference without switching browser tabs. Remove or hide the iFrame before sharing the app with end users — it is a development tool, not a production UI element.

### What is the difference between using XD versus Figma for designing Retool apps?

Both tools produce design specs that Retool builders can reference, but Figma has broader adoption among web and internal tool design teams and a more comprehensive REST API for programmatic spec access. Adobe XD is stronger for teams already in the Adobe Creative Cloud ecosystem (Photoshop, Illustrator, InDesign) who want design file consistency. For purely new Retool projects without existing tool preferences, Figma is the more common choice due to its browser-based access and Retool community familiarity.

---

Source: https://www.rapidevelopers.com/retool-integrations/adobe-xd
© RapidDev — https://www.rapidevelopers.com/retool-integrations/adobe-xd