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)

Studio.Design includes web fonts (Google Fonts and TypeSquare) as well as system fonts by default. You can also upload your own font files to use in your projects.

Fonts available in Studio.Design

The Font List lets you manage all the fonts used across your site as "font families" in one place. Learn how to set sub-fonts, choose a default font, and streamline…

Font List: Manage the fonts used on your site

Learn how to apply a font to a text box, as well as how to replace or remove fonts you've already set.

Setting, replacing, and removing fonts

Upload your own font files to use within Studio.Design. Learn about supported file formats and how to upload them.

Custom Fonts

To use TypeSquare, the web font service from Morisawa, with Studio.Design, you'll need to set it up by adding the fonts first.

Using TypeSquare with Studio.Design

Learn how to choose fonts when building your site in Studio.Design. We recommend system fonts when speed matters most, and web fonts when design takes priority.

Choosing the Right Font: System Fonts vs. Web Fonts

Learn why fonts set in the Studio.Design editor may look different when viewed on a computer or smartphone, how to check your system font settings, and how to fix the…

Why fonts may appear different from what you set in the editor

Learn about the maximum number of fonts you can use in a Studio.Design project. FONTPLUS supports up to 50 font families, while other font sources have no limit.

Font limits per project

The FONTPLUS fonts available in Studio.Design will no longer be offered as of April 7, 2026, due to the end of our contract with Monotype. Here's what to expect and…

FONTPLUS Service Ending (April 7, 2026)

Fonts

Components let you save design elements you use repeatedly throughout your project as reusable parts. With Components, you can manage everything in one place, keep your design consistent, and build…

Components

Learn how to add properties to a component so you can set different images, text, colors, and visibility for each place it's used.

Use properties in components to customize content for each instance

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

Add motion to your page with scroll-based effects like parallax and scroll-triggered animations. You can move or fade elements based on scroll position or when they enter the viewport, all…

Conditional Styles: Setting Up Scroll Effects

In Studio.Design, you can apply animations like movement and rotation to boxes. Animations are created from the difference between default and conditional styles. Combine easing, duration, and delay to fine-tune…

Set up animations (easing, duration, and delay)

Use the Hover and (in) Hover conditional styles to set up an animation that changes a button's color when you hover your cursor over it.

How to create a color-change animation when hovering over a button

Place the default image on top, then use a hover conditional style to change its opacity. This creates an effect where the image appears to switch when hovered over.

Swap 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

Make images or text gently fade in from below by combining the On Appear conditional style with animation settings. For a quick start, use one of our animation templates to…

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

Learn how to set up an animation where letters appear one by one. Split each character into separate text boxes, then use the "On appear" conditional style to set opacity…

Create a typewriter-style text animation

Learn how to use conditional styles to build a splash screen–style animation that appears when the page loads. We'll also cover display order, layering, and how to preview your animation…

Create a loading-style animation

Learn how to create an effect where images move slowly as visitors scroll the page. This guide walks you through using conditional scroll styles to make an image move upward…

Set up a parallax effect that slowly slides images on scroll

Learn how to create a progress bar that expands from left to right as visitors scroll down your page. We'll set it up using the scroll effect in conditional styles.

Create a scroll progress bar

If your links or hover animations aren't working in Studio.Design, here are the key things to check. Review your link settings, box overlap, and the stacking order of animation boxes…

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

If a box with an 'On Appear' conditional style animation isn't displaying, it's usually because the box extends beyond its parent box or the screen. This often happens on mobile…

Why 'On Appear' animations aren't showing — and how to fix it

Animation

The Command Palette lets you quickly search within your project—including pages, dashboard menus, and CMS items—as well as across your other projects.

[AUTO_EDIT] Search inside and outside your project with the Command Palette

Learn how to use the "fixed position" setting to keep elements like headers and buttons visible on screen while scrolling. We'll also cover what to check if pinning isn't working…

Pin headers and buttons to the screen

Learn how to change the direction in which boxes are arranged in Studio.Design, along with some helpful tips. You can adjust the arrangement direction from the Layout menu.

How to arrange boxes horizontally or vertically

When placing text over an image, readability can suffer. Here are two simple ways to darken your image and make text stand out more clearly.

Tips for Making Text More Readable Over Images

Learn how to add tab switching in Studio.Design. Using tabs to organize content helps keep your pages clean and easy to read.

How to Create a Tabbed Design

Studio.Design doesn't currently support adding tables directly in the editor. As a workaround, try creating a table-like layout by combining lists and boxes.

How to add a table in the editor

While Studio.Design doesn't have a built-in download button feature, you can upload a PDF file and link to it. Visitors can then save the PDF from the destination page.

How to add a download button

Studio.Design doesn't offer a dedicated feature for adding affiliate tags. You can use the Custom Code feature to add them to your site.

How to add affiliate tags

If you accidentally delete a page or design data in your project, you may be able to recover it using the Undo button or by restoring a previous version. Here's…

What to do if you accidentally delete a page or part of a design in the editor

Design Tips & Handy Features

Here's how to fix it when you can't select a box in the Studio.Design editor. Learn how to select and edit boxes inside components or lists using direct selection and…

Can't select a box in the editor

If you can't select the Add or Layers panel, it's usually because Content Editing Mode is turned on. Click the pencil icon in the bottom-left corner of the editor to…

Can't open the left panel, or the right panel shows limited settings

Learn what design data capacity means and what to do when you're approaching the limit.

What to do when you see "Your design data is getting large"

When building complex designs with nested boxes in Studio.Design, we recommend keeping the structure within 11 levels to avoid unintended data issues. This article also explains how to resolve errors…

Box nesting depth limit

Learn why a fixed-position header may overlap with headings or images on your page, and how to fix it by adding spacing equal to the header's height.

Fixed header overlapping with your design

You can adjust the spacing by resizing the Embed box. Keep in mind that some extra space may still appear on screens wider than a certain size, even after adjusting.

What to do when there's extra space around an embedded background video

There can be several reasons why copy and paste or keyboard shortcuts aren't working in Studio.Design. This article walks you through three ways to narrow down the cause.

What to do if copy and paste isn't working

Make sure the image is set to Box mode and that its size is larger than its child elements.

What to do when a blue overlay appears on an image and you can't add text on top

Learn how to fix a dropdown menu built with Studio.Design's Toggle box when it shifts position as it expands.

Fixing a Toggle box menu that shifts up or down when opening

If editing the image, text, or link in one box also changes the content in other boxes, it's because those boxes are part of a list. This article explains how…

Changing an image, text, or link in one box updates other boxes too

This can be caused by a browser extension. Disabling the extension may resolve the issue.

Site unexpectedly shifts left or shows extra space on the right

Scroll bar not showing

Learn what causes vertical text to overlap and how to fix it. In most cases, adjusting the width of the text box will resolve the issue.

Vertical text overlapping in preview or on your 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.

No tickets created by you

No tickets found

Track the progress of all tickets related to your company.

Tickets portal.

{assigneeName} needs more information from you

Tickets

No access to tickets portal

Search and ask

Find guides, answers, and references.

Skip the search. Describe what you’re trying to do and get a grounded answer.

Browse articles and guides in this topic.

Create your workspace and invite the people you work with.

Set up your account

Build your first workflow and watch it run end to end.

Ship something

Connect the tools your team already uses to bring data in.

Connect your stack

A quick lap of the product so you know where everything lives.

{appName} in 60 seconds

This prototype demo is aware that you are reading “{title}”. It can point you back to the current article, but a production article-aware Fin contract is still follow-up work.

Prototype article-aware answer

Because you already asked about invitations, this prototype demo can add the follow-up: use the role selector before sending each invite to limit access to the teammate responsibilities.

Prototype role-limiting follow-up

This prototype demo suggests starting with your workspace profile, inviting the team members who need access, and then connecting the integrations you use.

Prototype getting-started answer

In this prototype demo, integrations are configured from workspace settings. Choose the integration, connect the account, and review the enabled permissions.

Prototype integrations answer

In this prototype demo, invite teammates from workspace settings, then choose the access each teammate needs before sending the invitation.

Prototype invite-team answer

This prototype demo does not have a scripted answer for that question yet. Try asking how to invite your team or open a source article. No production Fin API was called.

Prototype answer unavailable

I’ve got this page open. Ask me anything about it and I’ll answer from the docs.