Skip to main content

​
Design Studio

Design Studio allows you to quickly design, test and deploy DO application. It gives you a lot of capabilities without the need to code.

​
Requirements to DO target

  • Target should have conventional folders and files structure
  • CSS variables listed in src/styles/studio-variables.less should meet available branding/components variables:
body {
  --base-body-background: #f6f6f6;
  --base-border-color: #dde0ec;
  --base-brand-color: #017aff;
  --base-brand-color-contrast: #ffffff;
  --base-color: #465a6a;
  --base-disabled-color: #d6e5f8;
  --base-error-color: #e44343;
  --base-focused-color: #017aff;
  --base-label-color: #8893aa;
  --base-success-color: #1ea03f;

  --base-font-family: 'Inter UI', sans-serif;
  --base-font-size: 16px;
  --base-font-weight: 400;
  --base-letter-spacing: normal;
  --base-line-height: 19px;

  --base-logo: url('/assets/logo-desktop.svg');
  --base-header-logo: url('/assets/logo-mobile.svg');

  --base-form-background: #ffffff;
  --base-form-color: var(--base-color);
  --base-form-border-radius: 7px;
  --base-form-box-shadow: 0 11px 14px -10px #aec1f7;
}
  • Layout components should have property isLayout set to true in order to properly propagate changes in component properties
src/layouts/main.yml 
components:
  footer: !include ../components/footer.yml
!component as: LayoutWithSidebar
isLayout: true # Required for DS to understand how to change properties in nested layout items
items:
  !property name: items
footer:
  - !ref components: footer
  • Application localization should be done using nested translation keys for more convinient work with translation tools in Design Studio
  • For all page to properly work in preview mode, use flowExport studio settings key and describe export data for each route, e.g.:
{
  "calculator": {
    "loanPurposeList": {
      "Business": "Business",
      "Personal": "Personal"
    }
  },
  "employment-info": {
    "employmentTypeList": {
      "Employed": "Employed",
      "Self-Employed": "Self-Employed"
    }
  }
}

​
Design Studio settings available in application configuration

ParameterDescription
countryUsed to define global formats (currency, date format, phone number mask etc.)
flowExportMocked flow export to display pages in DesignStudio correctly
logoLogo to be displayed in projects list
nameProject name to be displayed in DesignStudio, title will be used as a default value
previewUrlLink to preview environment

​
Example configuration

title: "Zenoo Demo Project"
...
studioSettings:
  country: "Mexico"
  flowExport: !include ./flowExport.json
  logo: "/assets/logo.png"
  name: "ZenooBank"
  previewUrl: "https://onboarding.zenoo.com/"