How to Integrate Retool with Sketch

Before opening Retool, invest time understanding the Sketch design and creating a systematic mapping from Sketch elements to Retool components. Open your Sketch file (or the Sketch Cloud shared link) and activate the Inspect panel by selecting a layer and looking at the right-side panel, which automatically shows inspection details when you click any element. Work through the artboard systematically, identifying each element and its Retool equivalent: - Sketch Artboard (top-level screen container) → Retool app canvas - Sketch Group with fixed position (sidebar, header, footer) → Retool Container with fixed layout - Sketch Rectangle with content (card component) → Retool Container with background color, border-radius, and shadow from Sketch Inspect - Sketch Table / data grid pattern → Retool Table component (configure columns to match Sketch's column headers) - Sketch Input/Form elements → Retool Form, Text Input, Select, or Date Picker components - Sketch Button (with background fill) → Retool Button component — map Sketch's fill color to Retool's button background color override - Sketch Text layers → Retool Text component — match Sketch's font size, weight, and color from the Inspect panel - Sketch Dropdown/Select → Retool Select component - Sketch Modal/Overlay artboard → Retool Modal component - Sketch Chart/Graph artboard → Retool Chart component (Plotly.js-based) - Sketch Icon layers (SVG) → Retool Icon component (check if the icon name matches Retool's Ant Design icon set) or embedded SVG in a Text component For Sketch Symbols (reusable components in Sketch) that have no direct Retool equivalent — custom data visualizations, branded card patterns, specialized input controls — flag them as Custom Component candidates. Custom Components are React components embedded in an iframe and require significantly more implementation effort than native Retool components. Document this mapping before starting implementation. A simple list in Notion, Confluence, or even a Sketch comment annotation serves as the implementation spec. Share it with the designer so they can validate the planned approach before engineering begins.

Sketch's Inspect panel is your source of truth for all visual styling values. Select any layer in Sketch and the right panel switches to inspection mode, showing the exact CSS-compatible values for that element. For colors: select any shape or text layer and look at the Fill section in Inspect. Colors appear as hex codes (e.g., #1E40AF) or RGBA values. Retool's component color pickers accept hex values directly. For design systems with defined color styles, Sketch shows the style name alongside the hex value — document both the semantic name (primary, secondary, surface) and the hex code. For typography: select any text layer and Inspect shows Font Family (e.g., 'Inter'), Font Weight (Regular, Medium, SemiBold, Bold), Font Size (in points, equivalent to px in web), Line Height, and Letter Spacing. Apply these to Retool Text components in their properties panel. If the font is a non-system font, you'll need to add it as a Custom CSS import in Retool's App Themes settings (Settings → Appearance → Custom CSS). For spacing: select a parent group or frame and Inspect shows the padding values and the gaps between child elements. In Sketch, layout spacing often comes from Auto Layout (Sketch's version of CSS flexbox) — the padding and spacing values from Sketch's Auto Layout panel translate directly to Retool container padding and component spacing settings. For border and border-radius: Inspect shows Border color, Border width, and Corner radius for any rectangle or shape. Apply these to Retool Container components in their Border and Appearance settings. Retool's Container component supports border color, border width, and border radius. For shadows: Sketch's Inspect shows box shadow as 'x: y: blur: spread: color:' values — this is the same CSS box-shadow syntax. Apply these as Custom CSS on specific containers in your Retool app by adding a class name to the component and defining the shadow in the App Themes Custom CSS section. Create a reference document listing your design system's core values: background colors, surface colors, text colors, primary action color, border color, base font family, body and heading sizes, and the standard spacing scale. You'll reference this throughout Retool configuration.

1/* Custom CSS for Retool App — derived from Sketch design system values */
2/* Apply in Retool: Settings → Appearance → Custom CSS */
3
4/* Import custom font used in Sketch design */
5@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
6
7:root {
8  --color-primary: #3B82F6;
9  --color-primary-dark: #1D4ED8;
10  --color-surface: #FFFFFF;
11  --color-background: #F8FAFC;
12  --color-sidebar: #1E293B;
13  --color-sidebar-text: #94A3B8;
14  --color-sidebar-active: #3B82F6;
15  --color-border: #E2E8F0;
16  --color-text-primary: #0F172A;
17  --color-text-secondary: #64748B;
18  --border-radius-card: 8px;
19  --shadow-card: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
20  --font-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
21}
22
23body {
24  font-family: var(--font-base);
25  background-color: var(--color-background);
26}
27
28/* Sidebar navigation items */
29.sidebar-nav-item {
30  padding: 8px 16px;
31  border-radius: 6px;
32  color: var(--color-sidebar-text);
33  font-size: 14px;
34  font-weight: 500;
35}
36
37/* Data card styling */
38.data-card {
39  background: var(--color-surface);
40  border-radius: var(--border-radius-card);
41  box-shadow: var(--shadow-card);
42  border: 1px solid var(--color-border);
43}

Retool's layout system uses a 12-column grid on the app canvas, with Container components grouping elements and Columns components creating horizontal splits. Understanding how to translate Sketch's artboard structure into this system is the key implementation skill. For a typical Sketch admin dashboard layout with a fixed-width sidebar and a main content area: 1. Drag a Columns component onto the Retool canvas. Set the left column to a fixed width matching the Sketch sidebar width (e.g., 240px or the equivalent fraction of the canvas width). The right column takes the remaining space. 2. Inside the left Columns section, drag a Container component. Set its background color to the Sketch sidebar color extracted from the Inspect panel. Fill the container with Text components (menu labels) and Icon components (nav icons), styled to match the Sketch sidebar design. 3. Inside the right Columns section, add your main content — typically a Table component for the data grid, with any action Buttons and Filter components above it. For card-based layouts from Sketch (a grid of metric cards, for example): 1. Add another Columns component inside the main content area, set to equal-width columns matching the number of cards in the Sketch design. 2. Inside each column, add a Container component and configure it as a card — background color, border-radius (from Sketch Inspect corner radius), optional border (from Sketch Inspect border settings), and padding matching the Sketch auto-layout padding. 3. Inside each card Container, add Text components for the metric value and label, styled with the typography values from Sketch Inspect. For Sketch modal screens (separate artboards showing overlay dialogs): 1. Use Retool's Modal component. Right-click the canvas or find Modal in the Component panel. 2. Configure the Modal width to match the Sketch dialog artboard width. 3. Populate the Modal's content with components matching the Sketch dialog layout — form inputs, buttons, text sections. 4. Attach the Modal's open trigger to a button's event handler: Button → On Click → Show modal. For complex Sketch layouts with absolute-positioned elements that don't fit the 12-column grid, switch specific Containers to Freeform layout mode (Container → Layout settings → Freeform). This allows pixel-level positioning similar to Sketch's free-form canvas, at the cost of reduced responsiveness.

With the layout structure in place, apply the specific visual values from your Sketch Inspect reference document to each Retool component. Open a Retool app and click any component to open its Properties inspector on the right side of the canvas. For Container components acting as cards or panels: in the Properties panel, find the Style section. Set Background Color using the hex value from Sketch. Set Border to the color and width from Sketch Inspect. Set Border Radius to the corner radius value from Sketch. For shadows, use the Class Names field and define a shadow class in the Custom CSS (as set up in the previous step). For Button components: set the Button's variant (Primary, Secondary, Danger) and override the background color using the Sketch primary action color. Match the border radius to Sketch's button corner radius. Select the size (small/medium/large) that closest matches the Sketch button height. For Table components: configure column header background color and text style in the Table's Style section. Set row height to match the Sketch table row height. Configure alternating row colors if the Sketch design shows them. Apply border style to match Sketch's table border design. For Text components: in the Properties panel, find the text formatting options — Font Size, Font Weight, Text Color. Apply the values from your Sketch typography reference. For multiple text styles, use Retool's built-in heading, body, and label presets as starting points and override the specific values. For the app-wide theme: navigate to Settings → App Themes in the top menu of your Retool app. Here you can set base font family (paste the font name from Sketch, e.g., 'Inter'), default text size, and theme colors. These apply globally to all components and reduce the number of individual overrides needed.

1/* Targeted component style overrides */
2/* Add class names to components via Properties panel,
3   then define styles in Settings → Appearance → Custom CSS */
4
5/* Navigation sidebar item - active state */
6.nav-item-active {
7  background-color: rgba(59, 130, 246, 0.12);
8  color: #3B82F6;
9  font-weight: 600;
10}
11
12/* KPI metric card */
13.kpi-card {
14  background: #FFFFFF;
15  border-radius: 8px;
16  border: 1px solid #E2E8F0;
17  padding: 20px 24px;
18  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
19}
20
21/* KPI value text */
22.kpi-value {
23  font-size: 28px;
24  font-weight: 700;
25  color: #0F172A;
26  line-height: 1.2;
27  margin-bottom: 4px;
28}
29
30/* Status badge */
31.badge-active {
32  background: #D1FAE5;
33  color: #065F46;
34  border-radius: 9999px;
35  padding: 2px 10px;
36  font-size: 12px;
37  font-weight: 500;
38}

For teams that want programmatic access to their Sketch design files — to build design system tracking dashboards, extract design tokens automatically, or monitor design file activity — Sketch Cloud provides a REST API. This step is optional and applies to teams with Sketch for Teams subscriptions. First, generate a Personal Access Token from the Sketch web app: log into sketch.com, go to your profile settings, then API Tokens, and create a new token. Store this in a Retool configuration variable (Settings → Configuration Variables) marked as secret. In Retool, navigate to the Resources tab and click Add Resource → REST API. Configure: - Name: 'Sketch Cloud API' - Base URL: https://api.sketch.com - Authentication: Bearer Token with {{ environment.variables.SKETCH_CLOUD_TOKEN }} Click Save Changes. With the resource configured, create queries to access Sketch Cloud data: - GET /workspaces — lists all Sketch workspaces your account belongs to - GET /workspace/{workspace_id}/shares — lists all shared documents in the workspace - GET /shares/{share_id}/versions — lists document version history - GET /share/{share_id}/document — retrieves the document's artboard data Bind these queries to Table components in a Retool dashboard. Show all Sketch files in the workspace with their last-updated timestamps, artboard counts, and current version. Add a 'Approved for Dev' status column backed by your own PostgreSQL database — when a designer marks a file as approved, write a record to your database and display the status next to each file. This creates a lightweight design governance workflow where engineering teams can see which Sketch designs are approved for implementation without requiring back-and-forth messages.

1// JavaScript transformer for Sketch Cloud shares response
2// Formats workspace documents for the Retool governance dashboard
3const shares = data.shares || data || [];
4
5return shares.map(share => ({
6  document_name: share.name || 'Unnamed',
7  document_id: share.shortId || share.id,
8  cloud_url: share.webUrl || `https://www.sketch.com/s/${share.shortId}`,
9  last_updated: share.updatedAt
10    ? new Date(share.updatedAt).toLocaleDateString()
11    : 'Unknown',
12  created_by: share.user ? share.user.name : 'Unknown',
13  is_public: share.isPublic ? 'Public' : 'Private',
14  artboard_count: share.artboardCount || 'N/A'
15}));