Studio

Learn how to publish designs from Figma into responsive websites with Studio, including tips and a step-by-step guide.

Using the Figma to Studio plugin

Editor

Introducing the size units you can set for a box placed on a page. You can configure fixed values, relative values, and more.

How to Set Box Size Units

Learn how to add spacing to boxes in Studio. This article explains the three features and how to set them step by step.

How to Set Margins, Padding, and Gaps

Box Arrangement

Layer order

The Position feature lets you control how boxes are placed on your page.

Positions: Relative, Fixed, Absolute, and Sticky.

Overflow

Negative margin

Can I place a box at the bottom or right edge of the screen?

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

[AUTO_EDIT] Box Layout and Position

Blend mode, Filter, and Backdrop filter

Learn how to change box colors. You can set colors using saved colors, RGBA/HEX values, or default colors.

How to Set Colors for Boxes

You can add borders to boxes and customize their color, style, and thickness. Borders are a great way to separate content or add design accents.

How to Add and Customize Borders for Boxes

Learn to add softness and emphasis to your design with STUDIO's rounded corner feature.

How to Set Rounded Corners on Boxes

Shadow

Transparency

How to create a slanted background

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

[AUTO_EDIT] Box Appearance Settings

Easily manage frequently used colors, like brand colors, by saving them as "Color Styles." Learn how to organize them efficiently with labels and hierarchy.

How to Set Up Color Styles

Quickly view and edit the colors used in selected elements. Learn how to highlight color usage and adjust your page’s color scheme.

Viewing and Changing Selection Colors in Bulk

As of March 13, 2025, new color registration in My Colors will no longer be supported, and the feature will be discontinued by late April.

My Colors Discontinued: How to Transfer Your Colors

Learn about the "Text Styles" feature that helps you efficiently manage text style settings such as size and font.

Text Styles: Setup and Management

[AUTO_EDIT] 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?

[AUTO_EDIT] Fonts

Components

[AUTO_EDIT] Components

Animation

How to swap the image by hover

The animation set using "Appear" is not displayed.

Setting styles based on conditions such as hover and appearance

Conditional styles

[AUTO_EDIT] 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

[AUTO_EDIT] 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.

Horizontal scroll does not show scroll bar

[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

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.