With the Landingi Figma Design System and Landingi Figma Plugin, you can design landing pages in Figma and seamlessly import them into the Landingi platform, ensuring a consistent and streamlined workflow.
Both the Design System and the Plugin are free.
This guide walks you through the process of creating a landing page using the Landingi Design System in Figma, from setup to publishing. You’ll learn how to structure your design, export it with the Landingi plugin, and seamlessly upload it to the platform for a fully functional landing page.
IMPORTANT: This method of creating landing pages works ONLY with the Design System provided by Landingi. Ensure you use this Design System in Figma when designing your landing page.
Step 1. Download the Design System and create a landing page
1. Get the Landingi Design System – it is completely free.
2. Review Start here in the Design System file for key guidelines.
3. Things like fonts, colors, and spacing to align with your visual identity change in the All variables tab. The components will adjust to your style, but you can always customize them further on the Components page.
4. Create a landing page using the pre-designed sections in the Sections page. Alternatively, you can build it from scratch using components from the Components page while ensuring proper frame hierarchy.
Frame Hierarchy
The main frame contains all your sections. The frame’s width is adjustable.
Section_wrapper sets the background, border, and border-radius for the section with Auto Layout, vertical, and top-center alignment. Width “hug” keeps the background within the section, while “fill” spans 100% of the browser width, keeping the content at 960px or 1200px.
Frame Content has no background. You can use positioning properties such as padding, margin, and Auto Layout. The width should be fixed at either 960px or 1200px.
The Column (Frame) is used for calculating positions in the mobile view and has no visual representation in the editor. It has no background and should be set to Auto Layout with both width and height set to “fill.” Positioning properties like padding, margin, and Auto Layout can be used.
In the column, you can put content such as forms, images, text, and boxes. The next frames represent the boxes.
Components Usage
Use components from the Components page for buttons, forms, and other interactive elements.
Images
Any visual elements intended to be images must be actual images in Figma. Don’t use SVG files.
Supported Widgets
Note that the current plugin version supports widgets like “Text,” “Buttons,” “Image,” “Section,” and “Form.”
Step 2. Export the project with the Plugin
1. Install the Landingi Plugin. Open the Plugin from the Plugins section. The plugin is free.
2. Once the Landingi plugin opens, select the design frame with your landing page. It will be added to the preview pane.
3. Click the Generate .landingpage file button. A progress bar will appear – please wait for it to finish. The file will then download automatically.
Step 3. Upload the landing page to Landingi and publish it
1. Log in to your Landingi account.
2. In the Landingi platform, click the Upload a .landingpage file button to import the landing page, then select the file you generated earlier.
3. In the editor, review and adjust the landing page as needed, i.e. update the SEO settings, add links, and set up integrations.
4. Click Publish to make your landing page live. Choose one of the publishing options: your own domain, WordPress, or a .PHP file.
5. Check if your landing page displays correctly.
NOTE: The Landingi Design System is currently in Beta. Test it, provide feedback, and help us shape its future. New components will be available soon. Learn more.
