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.

The Responsive Manager interface with tabs and controls for adjusting responsive settings

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.

The Font Size tab with range, tablet, and mobile settings

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.

The Line Height tab with range and responsive settings

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).

The Padding tab with range and responsive settings

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).

The Flex Gap tab with range and responsive settings

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.

Was this page helpful?