> ## Documentation Index
> Fetch the complete documentation index at: https://pitchprint.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Smart Sizes

> Smart Sizes empowers designers to create multiple variations of the same design by resizing the canvas and moving elements around to create different looking...

export const props_0 = undefined

export const author_0 = "Isaac Coker"

export const date_0 = "29 September 2021"

export const readTime_0 = "2 min read"

<div
  style={{
display: "flex",
alignItems: "center",
gap: "0.5rem",
fontSize: "0.875rem",
opacity: 0.7,
marginBottom: "1.5rem"
}}
>
  <span>
    <strong>
      {props_0.author_0}
    </strong>
  </span>

  <span>·</span>

  <span>
    {props_0.date_0}
  </span>

  {props_0_0.readTime_0_0 && <><span>·</span><span>{props.readTime}</span></>}
</div>

<Frame>
  <img src="https://mintcdn.com/pitchprint/PZh1rbLpfxNLQmDb/blog/images/2021/09/smart-sizes-hero.svg?fit=max&auto=format&n=PZh1rbLpfxNLQmDb&q=85&s=1fa58cd12a9591116ed108f98516ade7" alt="One design resized into portrait, landscape and square variants" width="1200" height="630" data-path="blog/images/2021/09/smart-sizes-hero.svg" />
</Frame>

<Frame>
  <img src="https://mintcdn.com/pitchprint/PZh1rbLpfxNLQmDb/blog/images/2021/09/Smart-Resize.png?fit=max&auto=format&n=PZh1rbLpfxNLQmDb&q=85&s=09ff031940feb58a12c6a666913d4906" alt="Cover graphic for the Smart Sizes feature announcement" width="2136" height="1147" data-path="blog/images/2021/09/Smart-Resize.png" />
</Frame>

Hi guys👋

We have an exciting new feature we’ve been working on that we can’t wait to share with you.

It’s called **Smart Sizes**. Basically it’s a feature that allows a designer to create multiple variations of a single design by varying the canvas size and elements' properties to come up with entirely different looking layouts.

So, imagine you have a card product in three sizes: Landscape, Portrait and Square. In the past you would have to create these as three separate designs and find ways to wire them to a single product.

Well, using this feature, you start by creating the first size, placing every element nicely to your taste.

<Frame caption="Size 1 - 8.6cm by 5.4cm">
  <img src="https://mintcdn.com/pitchprint/PZh1rbLpfxNLQmDb/blog/images/2021/09/Screenshot-2021-09-29-141547.png?fit=max&auto=format&n=PZh1rbLpfxNLQmDb&q=85&s=0e95077e60d8504a321b1e2a16c5e4ab" alt="A card design laid out at the first size, 8.6cm by 5.4cm" width="2492" height="1484" data-path="blog/images/2021/09/Screenshot-2021-09-29-141547.png" />
</Frame>

Next, you simply enable the **Smart Sizes** on that page and click the plus sign to add a new size:

<Frame>
  <img src="https://mintcdn.com/pitchprint/PZh1rbLpfxNLQmDb/blog/images/2021/09/image-2.png?fit=max&auto=format&n=PZh1rbLpfxNLQmDb&q=85&s=c6284ead1da3bf4534ff66aa12c1a8f9" alt="The Smart Sizes list on a page, with the plus sign for adding a size" width="552" height="283" data-path="blog/images/2021/09/image-2.png" />
</Frame>

By design, the next size is a swap of the Width and Height but you can always adjust the values in the page configuration as you would resize a page.

<Frame caption="Size 2 - 5.4cm by 8.6cm">
  <img src="https://mintcdn.com/pitchprint/PZh1rbLpfxNLQmDb/blog/images/2021/09/Group-82-1.png?fit=max&auto=format&n=PZh1rbLpfxNLQmDb&q=85&s=fd866ac1abe64a624338fa79112c6300" alt="The design at a second size, 5.4cm by 8.6cm, with width and height swapped" width="1595" height="1654" data-path="blog/images/2021/09/Group-82-1.png" />
</Frame>

After adding a new size, it’s necessary to reposition or resize the elements to fit well with the new size.

And you can add a third or forth size as you wish.

### In-App Size Selection

The panel below will be shown on the App product page if Smart Canvas is enabled. With this, your customers can pick which design layout  they love.

<Frame>
  <img src="https://mintcdn.com/pitchprint/PZh1rbLpfxNLQmDb/blog/images/2021/09/Group-83.png?fit=max&auto=format&n=PZh1rbLpfxNLQmDb&q=85&s=be04fd7790ab48ab43c163182d112350" alt="The in-app panel where customers pick which design layout they want" width="728" height="410" data-path="blog/images/2021/09/Group-83.png" />
</Frame>

**When adding new elements to the canvas they need to be positioned in both instances, for it to display correctly.**

To enable Smart Canvas go to your [designs](https://admin.pitchprint.com/designs) page in the admin, open the design where you would like to enable Smart Canvas. You should see the below option on your left enable it and start by adding a new smart page by clicking the plus icon⊕

<Frame>
  <img src="https://mintcdn.com/pitchprint/PZh1rbLpfxNLQmDb/blog/images/2021/09/Screen-Shot-2021-09-20-at-13.25.45.png?fit=max&auto=format&n=PZh1rbLpfxNLQmDb&q=85&s=a156c639dd380562da14b87cca295bb5" alt="The Smart Canvas option on the left of an open design in the admin" width="306" height="651" data-path="blog/images/2021/09/Screen-Shot-2021-09-20-at-13.25.45.png" />
</Frame>

And for it to appear in the Front App, you will need to update your [Layout](https://admin.pitchprint.com/layouts) to the latest

<Frame>
  <img src="https://mintcdn.com/pitchprint/PZh1rbLpfxNLQmDb/blog/images/2021/09/image-3.png?fit=max&auto=format&n=PZh1rbLpfxNLQmDb&q=85&s=cb73cfb3cee92d40383c9ce4eda526c5" alt="The admin layouts page used to update a domain to the latest layout" width="297" height="117" data-path="blog/images/2021/09/image-3.png" />
</Frame>

Do give it a try and sure let us know if you require any assistance setting this feature up on your products.

Please review our plugin and receive a \$25 voucher if you’re one of the first 100 people to do so, you can review by using this link [https://review.capterra.com/Feedback-PitchPrint-180523-3107660498](https://review.capterra.com/Feedback-PitchPrint-180523-3107660498).


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.