> For the complete documentation index, see [llms.txt](https://docs.uichemy.com/llms.txt).
> Use it to discover all available pages before exploring further.
# How to Export Figma Design in Responsive Layout using Responsive Manager in UiChemy?
Customize font size, line height, padding, and flex gap per device using UiChemy's Responsive Manager.
When you export your design using **Smart Auto Responsive**, it's about 90% responsive by default. If you want to manually customize the responsive values, use the **Responsive Manager** feature instead.
The values set in your Figma design are treated as the **desktop** value in Responsive Manager, which is then used to calculate the responsive values for other devices.
### Export as Regular Responsive Layout
- Open the UiChemy plugin in Figma and make sure you're logged in.
- Select the top-level frame of your layout, choose **Step by Step Method**, and click **Start**.
- At the **Responsive** step, by default **Smart Auto Responsive** is selected (recommended), giving about 90% responsiveness. For full control, select **Manual Responsive Setup** to open Responsive Manager and set your own values.
- From here, you can adjust font size, line height, padding, and flex gap for different screen sizes.
### Font Size
From the **Font Size** tab, adjust font size per screen size in two ways:
- **Normal**, uses a fixed pixel value for different screen sizes
- **Clamp**, uses a CSS Clamp value for fluid font size across screen sizes
- **Range**, set the font size range in pixels (e.g. `20-30`), calculated against the font size set in Figma. If you set broken ranges like `20-30` and `40-50`, the font size uses the nearest range, a 31px font size uses the `20-30` range, and 39px uses `40-50`.
- **Tablet** / **Mobile**, set the font size for each screen size, as a percentage.
- **Breakpoints**, add new responsive breakpoints, calculated per Elementor's breakpoints.
For example: if a row has **Range** `20-30`, **Tablet** `50`, **Mobile** `40`, and a heading in Figma is set to 30px font size, the exported tablet font size will be 15px (50% of 30px), and mobile will be 12px (40% of 30px).
Click **+ Add New** to add more rows. Use **Export Settings** to export an individual tab's settings, and **Import Settings** to bring in existing settings.
Responsive values are calculated top to bottom, the first matching row applies, even where ranges overlap. For example, if a range of `20-30` is set at the top and a range of `10-25` is added below it, a font size of 20px still uses the first (`20-30`) row.
You can delete a row with the cross button in the Range column, and drag-and-drop to reorder rows. Set a **Minimum Font Size** so the font size never goes below that value, regardless of the responsive table, leave it blank for no minimum. You can also use the **Calculator** to work out responsive values.
### Line Height
From the **Line Height** tab, adjust line height per screen size.
- **Range**, set the line height range as a percentage (e.g. `100-120`), calculated against the line height set in Figma. If the Figma line height is set in pixels, it's converted to a percentage first.
- **Tablet** / **Mobile**, set responsive values as percentages, same as Font Size. Add extra breakpoints from the Breakpoints column.
For example: **Range** `100-120`, **Tablet** `90`, **Mobile** `80`, with a paragraph line height set to 100% in Figma, the exported tablet line height will be 90%, and mobile 80%.
In the exported file, line height values are in `em`. The responsive feature won't work if a mixed font size or line height is applied within a single text/paragraph in Figma.
Add or delete rows the same way as Font Size. Set a **Minimum line height** value so line height never drops below it, regardless of the responsive table.
### Padding
From the **Padding** tab, adjust padding per screen size.
- **Range**, set the padding range in pixels (e.g. `10-20`), calculated against the padding set in Figma.
- **Tablet** / **Mobile**, set responsive values as percentages, plus extra breakpoints as needed.
For example: **Range** `10-20`, **Tablet** `60`, **Mobile** `50`, with a section padding of 20px in Figma, the exported tablet padding will be 12px (60% of 20px), and mobile 10px (50% of 20px).
### Flex Gap
From the **Flex Gap** tab, set the flex gap per device.
- **Range**, set the flex gap range in pixels (e.g. `10-20`), calculated against the gap set in Figma.
- **Tablet** / **Mobile**, set responsive values as percentages, plus extra breakpoints as needed.
For example: **Range** `10-20`, **Tablet** `60`, **Mobile** `50`, with a section gap of 20px in Figma, the exported tablet gap will be 12px (60% of 20px), and mobile 10px (50% of 20px).
Once your settings are done, close the Responsive Manager popup with the **Back** button at the top. When you export the design, the exported template uses your custom values as the responsive values.
### Frequently Asked Questions
What should I do if my Figma design doesn't export as responsive?
Check whether you're using **Smart Auto Responsive**, which gives about 90% responsiveness by default. For more control, use Responsive Manager to manually set custom values for font size, line height, padding, and flex gap.
---
What happens if I set broken font size ranges?
The system uses the nearest range for any value that falls between them, e.g. with ranges `20-30` and `40-50`, a 31px font size defaults to `20-30`. Keep ranges continuous to avoid unexpected results.
---
What are the best practices for setting padding?
Use logical, continuous ranges (like `10-20` pixels) and set sensible tablet/mobile percentages for consistent results across devices.