Sync your Figma designs to your Dyspatch design system without touching code.
What You Need from Figma
Sign in to Figma in your browser, then copy the URL of the Figma file you'd like to import. The URL can be your main design system file, a component library, or any file where your brand styles live.
Add Figma Account Integration
Select Add Integration from the Admin > Integrations > Imports menu.
Add an optional integration description then verify with Figma that you'd like to grant Dyspatch read access to your Figma account.
Click Allow Access to continue.
Create New Theme from Figma URL
Enter Figma URL
Select Import from Figma from the Themes page.
Paste the URL of your Figma file into the input field and select Next to begin analysis.
Dyspatch will analyze the Figma file and organize the styles it finds by type. This may take a few moments, depending on the size of the file.
Analyze Figma Styles
Once analysis is complete, Dyspatch displays all discovered style candidates grouped by category. Review each group and check the styles you want to bring into your theme. For elements with multiple styles selected, one will become the default and the others will become variants, which you set on the next page.
Once all styles to import are selected, click Next.
Import Theme Styles
Adjust and confirm default theme settings and imported styles for each element.
Summary Tab
Adjust template default settings and block permissions that pertain to all templates using this theme.
Email Colors -
Set branding colors for your whole team to use; keep templates on brand for a seamless, design compliant email workflow. Your team can choose from the color palette when styling elements in the Email Builder.
Layouts and Editables -
Enable editable styles for blocks: Enable editability of all available block styling options for all blocks assigned to this theme.
Enable custom layouts: Give Editors the power to build unique blocks for their email. Editors can drag in multi-column block layouts into an email, and fill them with the elements of their choosing.
Theme logo (preview):
Choose which uploaded image candidate supplies theme logo URL and href for block previews (DYS.theme.logo). The logo you picked when selecting components is the default; choose "No logo selected" to omit logo data from the preview context.
Email Settings -
Max Email Width: Set a default maximum width for emails using this theme to ensure optimal viewing across devices.
Background Type: Choose between a solid color or image background.
Background Color: Select the background color for your templates.
Link Typography -
Color: Define the color for links in your emails to match your brand identity.
Font Weight: Set the font weight for link text (regular, bold, etc.).
Text Decoration: Choose text decoration options for links such as underline, none, or other styling.
Images Pending Upload -
A preview of images that will be added from Figma to your Dyspatch image library when you create the theme.
Components
Fine-tune your DML elements. The starred components will be the theme defaults while others will be variants.
Click into an element to adjust its attributes individually.
Fonts
Fonts used in your Figma design that are available via Google Fonts will be automatically imported here. You can also rename fonts, set fallbacks, or point fonts to a different hosting URL.
Default Styles
Set default padding for Rows and Columns, as well as components that do not have a style defined.
Give your theme a unique name and select Create theme.
Select Blocks
Select blocks to make them available to editors when building or editing templates using this theme.
What's next
We're actively working on Figma to Block and Figma to Template features.
Reach out to your account manager or support to share what your team would love to see in the Figma to Dyspatch process.
