Skip to content
← All install options

Add Better Design to a Zap

Connect your account with an API key, then add a Better Design step to any Zap.

  1. 1

    Search for Better Design

  2. 2

    Paste your API key

  3. 3

    Pick a step

  4. 4

    Map the fields

Need more detail? Read Zapier's guide to creating a Zap.

Config
markdown
API key: <YOUR_API_KEY>

Connect your Better Design account

In the Zap editor, add a Better Design step and choose Sign in. Paste the API key shown above. Zapier keeps it and sends it with every step.

Every step except Create Design System is free. Create Design System spends 1 credit, the same as in the app.

Create Design System

Starts a custom design system from a description of your product. It returns at once, and the system is ready a few minutes later.

  • Prompt (required): the product and the feel you want.
  • Start from (optional): a catalog design system ID from Find Design System.
  • Brand CSS (optional): a token sheet from an Extract Design Tokens step.
  • Returns: Project ID, Project URL and Status.

Find Design System Status

Reads where a generation stands. Use a Delay step of a few minutes before it.

  • Project ID (required): from Create Design System.
  • Returns: Status, Name, Preview URL, Install Command and the token sheet once the status is completed.

Find Design System

Searches the Better Design catalog for systems that fit a product or a feel.

  • Query (required): for example, calm fintech dashboard.
  • Returns: the best match first, with ID, Name, Description, Personality and Preview URL.

Extract Design Tokens From Website

Reads the colours, fonts and corner radii of a public web page. Zapier stops a step after 30 seconds, so a very slow page can fail.

  • Website URL (required): usually the homepage.
  • Returns: Primary, Background, Foreground, Font, Radius, Token Count and the whole token sheet in CSS.

Extract Design Tokens From CSS

Reads the same tokens from CSS you paste in, such as a globals.css file.

  • CSS (required): the stylesheet text.
  • Returns: the same fields as Extract Design Tokens From Website.

Check Copy Clarity

Checks whether a person outside your team would understand a screen's words: unexplained acronyms, insider words, vague buttons and long sentences.

  • Screen (required): what the screen is, for example Pricing page.
  • Headline, Body and Buttons (optional): the visible words.
  • Returns: Verdict (pass, revise, or no-copy when no words were given), Finding Count and each finding with its severity, evidence and fix.

Find Icons

Searches one icon library for an icon by name.

  • Query (required): one noun, for example arrow.
  • Library (required): an icon library, such as Phosphor.
  • Returns: each icon's name and a public SVG URL.

Questions

Why does a step fail with a 402 error?

Your account has no credits left for Create Design System. Credits refill every 30 days, or you can upgrade to Pro.

Official Zapier resources

Related