Studio

Use the plugin to import your Figma designs into Studio.Design.

Figma to Studio

Editor

Learn how to set a box's size and explore the different size units available. Choosing the right unit helps you create responsive, easy-to-maintain layouts.

Box Layout: Size (Width & Height)

Learn how to set spacing on boxes in Studio.Design. Understand the differences between margin, padding, and gap, and how to configure each one.

Box Layout: Margin, Padding, and Gap (Spacing)

In Studio.Design, pages are built by stacking boxes. Adjust box layout by setting the direction on the parent box and the alignment of child boxes. Select a parent box to…

Box Layout: Direction and Alignment

Box position settings let you control placement (relative, fixed, absolute, sticky), stacking order, and overflow behavior. Access these from the Box tab on the right side of the design editor.

Box Position: Placement, Stacking Order & Overflow

Learn about the four position types for boxes — Relative, Fixed, Absolute, and Sticky — and how to configure each one in Studio.Design.

Box Position: Placement (Relative, Fixed, Absolute, Sticky)

Overflow settings control how child boxes that extend beyond a parent box are displayed. Choose from three options: Visible, Hidden, or Scroll.

Box Position: Overflow Settings

Set a negative value for a box's margin to reduce spacing and create overlapping layouts. Since this uses margin (outer spacing), you can combine it with other spacing settings for…

Overlapping Boxes (Negative Margin)

To make side-by-side boxes the same height, group them together and apply the "Stretch" setting to the parent box.

Match the height of multiple boxes

To pin a box to the edge of the screen, specify the distance between the nearest side of the box and the edge of the screen.

Pin a box to the edge of the screen

Apply transformations like move, rotate, scale, and skew to any box. Use transform handles to visually adjust transformations right on the screen.

Transform: Move, Rotate, Scale & Skew

Learn how to configure box layout and position settings. These operations are performed in the Box tab of the right panel.

Box Layout and Position

Learn how to apply filters to boxes. You can configure blend modes, filters, and backdrop filters individually.

Box Appearance: Setting Filters

Learn how to set the background color of a box on your page. Use the color palette to choose solid colors, gradients, RGBA/HEX codes, and more.

Box Appearance: Setting a Background Color

Add borders to boxes and customize their color and style. Borders help clearly separate content and add visual accents to your design.

Box appearance: Setting borders

Learn how to round the corners of a box using the border radius feature. Setting the radius to 50% turns an element into a perfect circle.

Box Appearance: Setting Border Radius

Learn how to add drop shadows and inner shadows to a box, including settings for color, position, blur, spread, and direction.

Box Appearance: Setting Shadows

Learn how and where to adjust the opacity setting for a box.

Box Appearance: Opacity

Learn how to create a diagonal background using the fill feature in Studio.Design.

How to create a diagonal background

Learn how to configure the appearance of boxes. These settings can be accessed from the Box tab in the right panel.

Box Appearance Settings

Learn how to register and centrally manage frequently used colors like brand colors as "color styles." Use labels and hierarchy to keep your color styles organized.

Setting up color styles

View all colors used within a selected box or group at a glance and change them all at once. Learn how to efficiently manage colors, adjust page color schemes, and…

Using Selection Colors

As of March 13, 2025, we ended the ability to add new colors to My Color. Please use Color Styles going forward.

Discontinuation of New Registrations and Feature Retirement for My Color

Text Styles let you manage text settings like font, size, letter spacing, and line height in one place. Learn what you can save and how to register them.

Text Styles

Bulk Design Management (Color Styles & Text Styles)

Learn about the different types of fonts available for your website in Studio.Design. You can use web fonts like FONTPLUS, Google Fonts, TypeSquare, as well as system fonts.

Fonts Available in Studio.Design

Studio offers a wide range of fonts to enhance your site’s visual appeal and readability. Learn how to manage fonts effectively with built-in features.

How to Manage Fonts

Studio lets you use a variety of fonts to make your site more expressive. This article explains how to set up and batch replace for text.

How to Set Up, Replace, and Delete Fonts

You can upload your own font files and use them in Studio.Design. This article explains which file formats are supported and how to upload your fonts step by step.

Custom Fonts

This article explains how to choose fonts when creating websites with Studio, with a focus on system fonts and web fonts

Font Selection Guide: Understanding System Fonts and Web Fonts

One reason fonts set in the editor may not display correctly is the use of system fonts. This article covers how to check your font settings and apply the right…

How to Ensure Fonts Set in the Editor Display Correctly on PCs and Smartphones

Learn about font usage limits in Studio projects. FONTPLUS allows up to 50 font families, while other font services have no limitations.

What is the maximum number of fonts I can use in one project?

The "FONTPLUS" fonts available in Studio.Design will be discontinued on April 7, 2026, due to the end of our contract with Monotype. This article explains the impact after the service…

FONTPLUS End of Service (Ending April 7, 2026)

Fonts

Components

Conditional styles let you change a box's appearance or layout based on visitor interactions or page state. Learn about the available trigger conditions and how to set them up.

Conditional Styles

Create dynamic effects like parallax and scroll-linked animations that move or fade elements based on page scroll position or when elements enter the viewport, using the Scroll Effect conditional style.

Conditional Styles: Setting Up Scroll Effects

In Studio.Design, you can add animations like movement and rotation to boxes. Combine easing, duration, and delay to fine-tune the speed, pacing, and timing of your animations.

Set up animations (easing, duration, and delay)

Use the Hover and (in) Hover conditional styles to create an animation that changes a button's color when a cursor hovers over it.

How to create a color-changing hover animation for buttons

Layer one image on top of another and use the Hover conditional style to change its opacity, creating an image-switching effect.

Switch images on hover

Learn how to create a button where color sweeps in from one edge on hover using "Hover" and "in: Hover" conditional styles with animation settings.

Create a button with a color sweep effect on hover

Create a fade-in animation where images or text rise up from below by combining the "On Appearance" conditional style with animation settings. Use an animation template to quickly set up…

Create a fade-in-from-bottom animation on appearance

Learn how to create an animation where characters appear one by one, like typing. Place each character in a separate text box and set incremental opacity and delay using the…

Create a typing-style text animation

Learn how to use conditional styles to create a splash screen-style animation that overlays the screen on load, including display order, stacking order, and how to preview.

Create a loading-style animation

Learn how to create a parallax effect where an image slowly moves as you scroll. This guide covers using Conditional Styles with Scroll to make an image slide upward within…

Set up a parallax effect (image slides slowly as you scroll)

Learn how to create a progress bar that extends from left to right as you scroll down the page, using conditional style effects.

Create a scroll progress bar

Here's what to check when links or hover animations aren't working. Walk through three key areas: link settings, overlapping boxes, and the stacking order of animation boxes.

How to fix links or hover animations that aren't working

If a box with the "On Appear" conditional style isn't displaying, it's likely because the box is completely outside its parent box or the screen. This often happens at mobile…

Why "On Appear" animations don't show and how to fix it

Animation

Quickly navigate between dashboards, search for pages and projects, and more with ⌘+K / Ctrl+K.

Searching with the Command Palette

How to align the box horizontally

Learn how to create tab navigation in Studio to organize content and make your page clean and easy to navigate.

Creating Tab Navigation

Setting up the download button

Design Tips & Handy Features

I don't know how to change elements in a template.

The warning modal appears as "Design Editor storage getting full."

Studio.Design allows up to 12 nested box levels. This article covers the limit and how to resolve parent-child errors.

Maximum Nesting Levels for Box Structures

How can I manage space around a movie when I place a movie as a background?

I can't copy & paste

What to look for when a blue screen is applied and characters cannot be inserted

Can't put text on the image.

When you set a link for each item in a list and it all applies to the same link

How to set a link for each item in a list / CMS list (ul)

Horizontal scroll does not show scroll bar

Learn what causes vertical text to overlap and how to fix it. Adjusting the width settings of your text box may resolve the issue.

Vertical text overlaps in preview or on your live site

[AUTO_EDIT] Troubleshooting Design Display Issues

Studio.Design

Studio.Blog

Studio.Showcase

What's New

Updates

Official Site

Blog

Case Study

Find answers and get help from Intercom Support and Community Experts

Conversations you've started through the messenger will appear here.

No conversations created by you

Try using different keywords or checking for typos.

No conversations found

Title

This site employs cookies and other technologies that we and our third party vendors use to monitor and record personal information about you and your interactions with the site (including content viewed, cursor movements, screen recordings, and chat contents) for the purposes described in our Cookie Policy. By continuing to visit our site, you agree to our {websiteTermsLink}, {privacyPolicyLink} and {cookiePolicyLink}.

This site uses cookies and similar technologies ("cookies") as strictly necessary for site operation. We and our partners also would like to set additional cookies to enable site performance analytics, functionality, advertising and social media features. See our {cookiePolicyLink} for details. You can change your cookie preferences in our Cookie Settings.

We use cookies to make our site work and also for analytics and advertising purposes. You can enable or disable optional cookies as desired. See our {cookiePolicyLink} for more details.

Advertising cookies are set by our advertising partners to collect information about your use of the site, our communications, and other online services over time and with different browsers and devices. They use this information to show you ads online that they think will interest you and measure the ads' performance. Social media cookies are set by social media platforms to enable you to share content on those platforms, and are capable of tracking information about your activity across other online services for use as described in their privacy policies.

These cookies enable the website to provide enhanced functionality and personalisation. They may be set by us or by third party providers whose services we have added to our pages. If you do not allow these cookies then some or all of these services may not function properly.

These cookies are necessary for the website to function and cannot be switched off in our systems.

These cookies allow us to count visits and traffic sources so we can measure and improve the performance of our site. They help us to know which pages are the most and least popular and see how visitors move around the site.

You have the right to opt out of the sale of your personal information. See our {cookiePolicyLink} for more details about how we use your data.

Your Privacy Choices

We use cookies to enhance your experience. You can customize your cookie preferences below. See our {cookiePolicyLink} for more details.

Cookie Settings

Empty Help Center

Uh oh. That page doesn’t exist.

Home

Search results

Disappointed

Neutral

Smiley

Thinking...

Searching through sources...

Analyzing...

Tickets submitted through the messenger or by a support agent in your conversation will appear here.