Forem: raoufbelakhdar

45 Best Figma Landing Page Templates in 2022 (Free)

raoufbelakhdar — Fri, 25 Feb 2022 22:11:15 +0000

Figma is one of the most popular tools for creating practical, high-quality user interfaces for a wide range of online and application-based projects, and it is used by both pros and new designers to do this.

The downside is that, like with any design software, attempting to put your creative ideas into physical reality from the ground up using this relatively complex application may be extremely intimidating! That’s where these convenient templates come in to play.

It doesn’t matter if you’re designing for an existing company or a client, these Figma landing page templates have been hand-picked to help you get your product launch or redesign off the ground faster than ever.

Top 15 Free Figma Landing Page Templates in 2022

In this post, we’ve compiled a list of the best free Figma landing page templates available on the web, all of them are certain to assist you in creating a visually appealing and engaging website.

Construction Company — Figma template for construction

This is a professional-looking Figma template for construction companies. The Figma Construction Company landing page allows you to quickly and easily create a clear and concise web project.

Download Template

Wakanda — Figma landing page for HR

When it comes to Figma landing pages, Wakanda is one of the best out there. Using the figma Wakanda freebies, you can create a modern and complete web project.

Download Template

Besnik — free Figma resource for agency

Free Figma resource Besnik has a powerful and practical theme that gives you everything you need to have a spectacular result. The figma Besnik website gives you the tools you need to create a cutting-edge web project.

Download Template

Studio Design — Figma freebie for agency

As a free Figma page skin, Studio Design provides an impressive amount of ready-made layouts and elements that will help you get started quickly. The figma Studio Design template simplifies the design process significantly.

Download Template

Next Invest — basic Figma template for finance

Designed with a focus on a specific industry, the Next Invest Figma template has a unique set of features that make it perfect for your business. Only the final touches are required to customize the figma Next Invest landing page to suit your needs and regulations.

Download Template

Digital Market — Figma template for service

This is a professional-looking Figma template called Digital Market. This landing page for the figma Digital Market offers easy-to-use visual editing for everyone.

Download Template

Insurance — Figma landing page for insurance

Insurance is a Figma landing page designed for a specific niche and equipped with a number of features that are specific to your industry. With the figma Insurance template, you don’t need any previous experience to create the perfect page for your business.

Download Template

Agency — free Figma resource for agency

This free Figma resource comes with a powerful and practical page skin that provides a ton of pre-made layout and elements that will serve you very well. It’s called “Agency.” In order to avoid having to make significant alterations to the design, you can use the figma Agency resources.

Download Template

Lawliet — Figma freebie for legal

You can use Lawliet, a free Figma theme with a powerful and practical design, for any project. A few minutes spent with the figma Lawliet freebies will allow you to create eloquent and articulate web projects.

Download Template

The Day Beauty — basic Figma template for beauty

Figma’s Day Beauty template comes with a powerful and practical page skin and a ton of pre-made layout and elements that will serve you well. It is possible to design a modern and complete web project with the help of the figma The Day Beauty template.

Download Template

Houter — Figma template for real estate

It is a niche-oriented Figma template that incorporates a number of features tailored to your industry. You don’t have to do much work with the figma Houter landing page.

Download Template

Web.Dev — Figma landing page for agency

With a focus on quality and functionality, Web.Dev is a Figma landing page that stands out from the crowd. Using the figma Web.Dev freebies, all you have to do is tweak the default settings to suit your requirements and regulations.

Download Template

Freebie — free Figma resource for real estate

You can use Freebie, which is a free Figma resource with a niche-oriented design, to incorporate several specialized features tailored to your industry. You can use the figma Freebie web-page to enjoy simple visual editing that anyone can use..

Download Template

Musik — Figma freebie for music

With a powerful and practical design, the free Figma theme Musik gives you all of the tools and resources you need to have a successful project. Without any prior design knowledge, you can still create the ideal website for your products and services using the figma and html Musik template.

Download Template

Laragal — basic Figma template for shop

In its most basic form, Laragal is a Figma template with a powerful and practical page skin that comes with a plethora of pre-made layout and elements that will serve you extremely well.

Download Template

Jewelery — basic Figma template for fashion

An Figma template with a niche-oriented design and a number of specific features tailored to your industry is the Jewelery template. With the Figma Jewelery landing page, you can create an articulate and eloquent web project in just a few minutes.

Download Template

Fitness — Figma freebie for fitness

Fitness is a free Figma add-on that features a sleek and polished design. It’s possible to design a modern and complete web project using the figma Fitness resources.

Download Template

Exploration Workout — free Figma resource for fitness

A free Figma resource, Exploration Workout includes a powerful and practical page skin that contains a ready-made layout and elements that will serve you extremely well. Little effort is required on your part when using the Figma Exploration Workout web page.

Download Template

Team Collaboration — Figma template for saas

This is a professional-looking Figma template that’s easy to use. Within minutes, you can put together a well-thought-out web project using the figma Team Collaboration landing page.

Download Template

Exploration — free Figma resource for software

When it comes to getting the most out of Figma, nothing beats Exploration’s powerful and practical theme. Using the figma Exploration web page, you can design a modern and complete web project from scratch.

Download Template

Qubly — Figma freebie for saas

Figma freebie Qubly has a powerful and practical page skin that delivers a ton of ready-made layouts and elements that will serve you well. Few tasks are required of you when working with the figma Qubly template.

Download Template

Analytics — basic Figma template for startup

If you are looking for an easy-to-use Figma template with a focus on your industry, Analytics is the best option. Your time is better spent fine-tuning the default figma Analytics settings to meet your specific requirements and regulations.

Download Template

Landing Design — Figma template for software

An elegant and refined design defines the Landing Design Figma template. It is easy to work with the figma Landing Design landing page because it is designed for everyone.

Download Template

Splice — Figma landing page for saas

If you are looking for a Figma-based landing page with a specific focus on your industry, Splice is a great option. Even if you don’t have any previous design experience, the figma Splice template will allow you to create the perfect page for your needs and services.

Download Template

Open — free Figma resource for startup

You can use Open, a free Figma resource, to make a powerful and practical page skin for your project. It comes with a ready-made layouts and elements that will be very useful.

Download Template

Hosting Company — Figma freebie for software

Hosting Company is a free Figma theme that gives you everything you need to have a successful project. Your web project can be articulate and eloquent in a matter of minutes with the freebies from the figma Hosting Company.

Download Template

Perdect — basic Figma template for saas

For those who are looking for a simple Figma template with a powerful and practical page skin, Perdect is an excellent choice. Designing a complete and cutting-edge web project is easy with the figma Perdect template.

Download Template

Payment gateway — Figma template for finance

Payment gateway is a Figma template with a classy and professional look. You may develop an articulate and expressive web project in minutes with the figma Payment gateway landing page.

Download Template

Banking — Figma landing page for finance

Banking is a Figma landing page that has a simple design that can handle any situation. With the figma Banking freebies, you’ll be able to create a fully functional and modern online project.

Download Template

Blinqpay — free Figma resource for finance

Blinqpay is a free Figma resource with a robust and practical theme that gives you all you need for a fantastic result. You may create a full and modern online project by using the figma Blinqpay web-page.

Download Template

NFT Dark — Figma freebie for finance

NFT Dark is a free Figma page skin with a strong and functional page layout and components that will serve you well. You’ll just need to do a little tweaking with the figma NFT Dark template.

Download Template

Travel — Figma template for travel

Travel is a Figma template with a sleek and professional style. With the figma Travel landing page, you’ll be able to experience practical visual editing that everyone can use.

Download Template

PUNE — Figma landing page for travel

PUNE is a Figma landing page with a niche-focused style and a set of specialized features that are targeted to your industry. You may use the figma PUNE template even if you have no prior knowledge and still create the perfect page for your requirements and services.

Download Template

Travel Agency Web UI — free Figma resource for travel

Travel Agency Web UI is a free Figma resource that includes a robust and functional page skin with a ready-made layout and features that will serve you well.

Download Template

Foodies — Figma template for food

Foodies is a Figma template with a classy and professional appearance. You may develop an expressive and eloquent online project in minutes with the figma Foodies landing page.

Download Template

Fruit Salad Health — Figma landing page for food

Fruit Salad Health is a Figma landing page with a responsive and clean design that can handle everything. You may construct a full and trendy web project with the figma Fruit Salad Health freebies.

Download Template

Food delivery concept — free Figma resource for food

Food delivery idea is a free Figma resource with a powerful and practical theme that gives you all you need to get a fantastic result. You may construct a full and modern online project with the figma Food delivery concept web-page.

Download Template

Multipurpose — Figma template for service

Multipurpose is a Figma template with a professional and sophisticated design. With the figma Multipurpose landing page, You can create articulate and eloquent web project in a matter of minutes.

Download Template

BWA — Figma website for Saas

BWA is a Figma landing page with a clean and responsive design that can handle everything with ease. With the figma BWA freebies, you have the ability to design a complete and modern web project.

Download Template

Panto — Figma template for furniture

Panto is a Figma template with a niche-focused design and a set of specialized features that are targeted to your industry. You only need to do a little effort on your end using the figma Panto landing page.

Download Template

Rorompok — Figma landing page for furniture

Rorompok is a Figma landing page with a classy and professional look. You can just focus on the final touches with the figma Rorompok freebies, altering the preset settings to your requirements and restrictions.

Download Template

Antic — free Figma resource for furniture

Antic is a free Figma resource with a niche-oriented design and a set of specific features that are targeted to your industry. You will like the practical visual editing that anybody and everyone may work with using the figma Antic web-page.

Download Template

Furniture Website — Figma freebie for furniture

Furniture Website is a Figma freebie with a strong and practical theme that gives you all you need for a fantastic result. Without any prior knowledge, you may use the figma and html Furniture Website template to create the perfect page for your needs and services.

Download Template

Furniture Shop — basic Figma template for furniture

Furniture Shop is a basic Figma template with a powerful and practical page skin that delivers a ton of ready-made layout and elements which will do you extremely well.

Download Template

Shady Rhymes — basic Figma template for furniture

Shady Rhymes is a basic Figma template with a niche-oriented style and a number of specific features geared to your industry. You may develop an expressive and eloquent online project in minutes with the html shady rhymes landing page.

Download Template

It’s up to you!

That concludes our list of the top 15+ Figma lending page templates that you may utilize to get your new website up and running this year. Further information can be found by visiting the Figma templates homepage and browsing through all of the most recent templates available there.

Thank you for taking the time to visit Captain Design and read this post! You may now like to learn how to design a website using our free and premium Figma Temp lates.

Originally published at https://www.captain-design.com on February 25, 2022.

How to share your styles with your team in Figma

raoufbelakhdar — Mon, 10 Jan 2022 19:56:00 +0000

In this quick post, we’ll see how to share your component in Figma.

Watch Video Tutorial

Share styles to the library

In order to share your styles with your team, let’s head to the Assets tab in the left-hand sidebar.

Hit the Team Library icon in the right corner of the Assets panel.

In the Libraries modal box, hit the Publish button beside your file’s name.

Import and Use styles from a different file

To access styles from anther file, Go to the Assets tab in the left-hand sidebar.

Hit the Team Library icon in the right corner of the Assets panel.

In the Libraries modal find your file’s library and switch its knob on.

Access shared color styles

To access your shared styles, go to the right-hand sidebar and hit the four dots icon to trigger the styles menu.

You can also access the color styles in the Fill section , the Text styles in the Text section , the Grid styles in the Layout grid section, and Effect styles in the Effects section.

That’s everything about sharing styles in Figma.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on January 10, 2022.

Create a new Figma effects style

raoufbelakhdar — Sun, 09 Jan 2022 19:56:00 +0000

In this quick post, we’ll see how to create, apply, Edit, and delete a drop shadow effect style in Figma.

Watch Video Tutorial

Create an Effect Style

To create an Effect style , let’s start by creating a new frame and go to Effects section and add new Effect.

Next, select your Effect element to open the Effect’s settings modal.

Next, add the following Drop shadow settings:

X : 10

Y : 10

Blur : 15

Spread : 5

Now, we’ll save our frame’s Drop shadow settings in a new Effect style. So hit the four dots icons in the Effects section.

Let’s give our style the name of Effect Style 1 then hit create style button.

You can create as much styles as you want.

Apply an Effect Style to your layer

To apply an Effect style to a new frame, select your frame and head to the Effects section in the right-hand sidebar.

Hit the four dots icon in the right corner of the Effects section to trigger the styles modal, then select Effect styles 1 to apply the style to your frame layer.

Access your File’s Effect Styles

To display and access all your file’s styles, all you have to do is to click on the file’s gray. All your style will be displayed in the right-hand sidebar.

Edit an Effect Style

To edit an Effect style , click on the file’s gray backdrop to display your styles. Right-click on the Effect style you want to edit and select Edit style in the context menu.

Once you edit a style, the change of the color will be applied automatically to every layer using that same style.

Delete an Effect Style

To delete an Effect style from your Figma file, click on the file’s gray backdrop to display your styles. Right-click on the Effect style you want to delete and select Delete style in the context menu.

That’s everything about creating an Effect style in Figma, in the next posts we’ll cover more concerning Figma styles.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on January 9, 2022.

Create a new Figma grid style

raoufbelakhdar — Sat, 08 Jan 2022 19:55:00 +0000

In this quick post, we’ll see how to create, apply, Edit, and delete a grid style in Figma.

Watch Video Tutorial

Create a Grid Style

To create a new Grid style , let’s start by creating a new frame and go to Layout grid section and add new Grid.

Next, select your grid element to open the Layout grid’s settings modal.

Select the Grid menu and choose Column in the left corner of the grid modal.

Next, add the following Grid settings:

Count : 6

Type : Stretch

Gutter: 20

After that, hit the four dots icons in the Grid section to trigger the grid styles modal.
Click the + icon in the right corner of the Grid styles modal.

Let’s give our style the name of Grid Style 1 then hit Create style button.

You can create as much styles as you want.

Apply a Grid Style to a layer

To apply a Grid style to a new frame, select your frame and head to the Grid section in the right-hand sidebar.

Hit the four dots icon in the right corner of the Grid section to trigger the styles modal, then select Grid styles 1 to apply the style to your frame layer.

Access your File’s Grid Styles

To display and access all your file’s styles, all you have to do is to click on the file’s gray. All your style will be displayed in the right-hand sidebar.

Edit a Grid Style

To edit a Grid style , click on the file’s gray backdrop to display your styles. Right-Click on the Grid style you want to edit and select Edit style in the context menu.

Once you edit a certain style, the change of the color will be applied automatically to every layer using that same style.

Delete a Grid Style

To delete a Grid style from your Figma file, click on the file’s gray backdrop to display your styles. Right-Click on the Grid style you want to delete and select Delete style in the context menu.

That’s everything about creating a Grid style in Figma. in the next posts we’ll cover more concerning Figma styles.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on January 8, 2022.

Create a new Figma text style

raoufbelakhdar — Fri, 07 Jan 2022 19:55:00 +0000

In this quick post, we’ll see how to create, apply, Edit, and delete a text style in Figma.

Watch Video Tutorial

Create a Text Style

To create a new Text style , let’s start by creating a new text layer and go to Text section and add the following text settings:

Font family: Arial

Font size: 90

Font weight: Bold

Next, hit the four dots icons in the Text section to trigger the text styles modal.
Hit the + icon in the right corner of the Text styles modal.

Let’s give our style the name of Text Style 1 then hit Create style button.

You can create as much styles as you want.

Apply a Text Style to a layer

To apply a Text style to a text layer, select your layer and head to the Text section in the right-hand sidebar.

Hit the four dots icon in the right corner of the Text section to trigger the styles modal, then select Text styles 1 to apply the style to your text layer.

Access your File’s Text Styles

To display and access all your file’s styles, all you have to do is to click on the file’s gray backdrop. All your style will be displayed in the right-hand sidebar.

Edit a Text Style

To edit a Text style , click on the file’s gray backdrop to display your styles, then right-click on the text style you want to edit and select edit style in the context menu.

Once you edit a certain style, the change of the color will be applied automatically to every layer using that same style.

Delete a Text Style

To delete a Text style from your Figma file, click on the file’s gray backdrop to display your styles. Right-click on the text style you want to delete and select Delete style in the context menu.

That’s everything about creating a text style in Figma. in the next posts we’ll cover more concerning Figma styles.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on January 7, 2022.

Create a new Figma Color style

raoufbelakhdar — Thu, 06 Jan 2022 19:55:00 +0000

In this quick post, we’ll see how to create, apply, Edit, and delete a color style in Figma.

Watch Video Tutorial

Create a Color Style

To create a new color style, let’s start by creating a new shape and go to Fill section and change the shape color to a light blue.

Next, hit the four dots icons in the Fill section to trigger the color styles modal.

Hit the + icon in the right corner of the Color styles modal.

Let’s give our style the name of Color Style 1 then hit Create style button.

You can create as much styles as your want.

Apply a Color Style to a layer

To apply a color style to a frame or a shape layer, select your layer and head to the Fill section in the right-hand sidebar.

Hit the four dots icon in the right corner of the Fill section to trigger the styles modal, then select Color styles 1 to apply the style to your frame.

Access your File’s Color Styles

To display and access all your file’s styles, all you have to do is to click on the file’s gray. All your styles will be displayed in the right-hand sidebar.

Edit a Color Style

To edit a color style, click on the file’s gray backdrop to display your styles. Right-click on the color style and select Edit style in the context menu.

Once you edit a certain style, the change of the color will be applied automatically to every layer using that same style.

Delete a Color Style

To delete a color style from your Figma file, click on the file’s gray backdrop to display your styles. Right-click on the color style and select Delete style in the context menu.

That’s everything about creating a color style in Figma. in the next posts we’ll cover more concerning Figma styles.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on January 6, 2022.

Figma Responsive Auto layout using the Resizing Feature

raoufbelakhdar — Wed, 05 Jan 2022 19:55:00 +0000

In this quick post, we’ll take you through how to create a responsive layout using the sizing feature in Figma.

Create Auto Layout Frames

To begin, we’ll start by creating a simple frame and transform it to Auto layout.

Let’s pick the frame tool and create a rectangular frame with the dimensions of 1200W 1500H.
Change the frame name to Parent Frame.
Change the frame’s color from the default white to the following color: #B8B8B8.

Next, head to the Auto layout section in the right-hand sidebar.

Select the Alignment and padding icon in the right corner of the Auto layout section and set it to center.

Next, head to the Resizing section under the Auto layout panel.

Set the Width to Fixed width and Height to Fixed height.

Now, pick again the frame tool and draw a new frame within our Parent Frame with the dimensions of 800W 1000H.
Change the frame name to Child Frame.
Give it a Fill color of white, and transform it to Auto layout.

When we resize the Parent frame, the Child frame’s width remains fixed by default. The goal of this exercise is to have the Child frame resize in response to the size of its Parent frame.

Auto Layout Resizing

In order to make our Child frame responsive to it’s Parent frame , we’ll use the resizing feature.

Select the Child frame and head to the Resizing section under Auto layout in the right-hand sidebar.

Set the Child frame’s Resizing settings to Fill container width, and Fill container height.

Finally, select the parent frame and add a 100px padding in the Auto layout section.

If now we resize the Parent frame , the Child frame will also resize.

Remove Auto Layout

To remove auto layout from your frame, select your Auto layout frame and head to the right-hand sidebar in the Auto layout section. Hit the — icon in the right corner of the Auto layout section.

That’s everything about the Auto layout feature in this post. in the next posts we’ll cover more concerning Figma auto layout.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on January 5, 2022.

How to edit components in Figma

raoufbelakhdar — Tue, 04 Jan 2022 19:55:00 +0000

In this quick post, we’ll see how to edit your components in Figma.

Watch Video Tutorial

Edit Components

If you want to edit a certain component, just go to the root component frame and edit it. Any change you add, Figma will apply that change automatically to all the component’s instances.

Edit Instance

If you want to edit a component’s instance, you have to go back to the main component and edit it.

Right-Click on your instance and select Go to the main component

Now, add your changes to the component.

Next, you have to publish your components changes to the libraries so all the component’s instances will be updated.

Update components changes

Go to the components file’s Assets panel and hit the Team Library icon.

Hit Publish changes button in the Libraries modal to update the changes to the library.

That’s everything about editing components in Figma. In the next posts we’ll cover more concerning Figma components.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on January 4, 2022.

How to share your components with your team in Figma

raoufbelakhdar — Mon, 03 Jan 2022 19:55:00 +0000

In Figma, you can share your local file’s components with your team. In this quick post, we’ll see how to share your component in Figma.

Watch Video Tutorial

Share Components

In order to share your components with your team, you’ll need to have a professional team plan.

Let’s head to the Assets tab in the left-hand sidebar.

Hit the Team Library icon in the right corner of the Assets panel.

In the Libraries modal box, hit the Publish button beside your file name.

Import and Use components from another file

To access your components library in a new file, go to the Assets tab in the left-hand sidebar.

Hit the Team Library icon in the right corner of the Assets panel.

In the Libraries modal find your ****file’s library and switch its knob ON.

You can access your file’s library in the Assets panel.

That’s everything about sharing components in Figma. In the next posts we’ll cover more concerning Figma components.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on January 3, 2022.

How to create component’s variants in Figma

raoufbelakhdar — Sun, 02 Jan 2022 19:54:00 +0000

In this quick post, we’ll see how to create a component’s variants out of a series of buttons in Figma.

Watch Video Tutorial

Create Variants

In this example, I’ll use a series of buttons that I’ve previously created.

In order to transform this series of button, we’ll just select all our buttons.
Head to the top-bar menu and hit the arrow besides the Create component icon.
In the drop-down menu, select Create components set

Add variants properties

To begin, we’ll add three variants properties to our button component: icons-button, dropdown-button, and close-button.

First, select the Component set.

Head to the Variants section in the right-hand sidebar.

Hit the three dots icon in the right corner of the Variants section, and select Add new property.

We’ll create three properties and rename them with the following names: i cons-button, dropdown-button, and close-button.

To rename a property, just click on the property name and type your property name.

Here’s our Variants Properties :

Next, we’ll add our variants values. In our example, I would like to add Boolean values: True/False.

Add variants Values

Let’s select our Component set and go back to the Variants section.
Double-click on the first property value which is Default and rename it to False.

You can repeat this process for all the other Properties values.

Apply Variants Properties

Next, we’ll apply the properties we’ve created to our Variants.

We’ll select the first variant.

Let’s go back to the Variants section.
For our first variant, well keep it’s properties to default

We’ll move to our second component and change the first property icon-button to true.

We’ve changed our value icon-button to true because our variant has an icon.

Let’s select the third variant and change the second property dropdown-button to true.

Again, the reason we’ve changed the value dropdown-button to true is because our selected variant is a drop-down button**.**

Let’s select the last variant and change the third property close-button to true.

Now, head to Assets tap in the the left-hand sidebar to access our variant.

Let’s drag and drop our component set from the Assets panel to our canvas.
Go to the instance section in the right-hand sidebar.

To access a specific Variant, we can switch the properties nobs.

Variant one:

Variant two:

Variant three:

Variant four:

That’s everything about component’s variants in Figma. In the next posts we’ll cover more concerning Figma components.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on January 2, 2022.

Duplicate Components in Figma

raoufbelakhdar — Sat, 01 Jan 2022 19:54:00 +0000

In this quick post, we’ll take you through how to duplicate a component in Figma.

Watch Video Tutorial

Duplicate component

First, select and hold CRTL or Command + C to copy the component frame.
Past your component with CRTL or Command + V .

At this point, you’ve created an instance of the component.

Next, select the Component Instance and head to the right-hand sidebar.

Go to the Instance section and hit the three dots icon.

In the drop-down menu, select Detach Instance.

Now, go to the center top-bar menu and hit the Create component icon.

Go to the assets tap in the left-hand sidebar to preview your duplicated component.

Duplicate multiple component

Select all the components you want to duplicate and hold CRTL or Command + C to copy.
Now, hit CTRL or COMMAND + V to past.

For now all we’ve done is creating instances of our components.

Next, let’s select all our Components Instances and go to the right-hand sidebar.
Go to the Instance section and hit the three dots icon.

In the drop-down menu, select Detach Instance.

Now let’s create multiple components by selecting ****all the buttons frames, then head to the top-bar menu and hit the arrow besides the Create component icon.
In the drop-down menu, select Create multiple components.

Go to the assets tap in the left-hand sidebar to preview your duplicated component.

That’s everything about duplicating components in Figma. In the next posts we’ll cover more concerning Figma components.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on January 1, 2022.

How to create a new file in Figma

raoufbelakhdar — Thu, 16 Dec 2021 19:49:00 +0000

In Figma, there are two basic methods to create a new file: the first is to create a draft file, and the second is to create a project file. In this short tutorial, we’ll walk you through the process of creating a draft file in Figma as well as a new project file.

1 — Create a Draft File

A draft file in Figma is a private file containing your work in progress. You can create drafts files for work that you don’t wish to share with your team. All drafts files are located in the Drafts section.

To create a new draft file, first go to the left-hand sidebar of your Figma files browser and select Drafts. Next, hit the + icon beside Drafts tab link, or click New design file button in the top-left corner of your Drafts section.

2 — Create a Project File

In Figma, a project file is a file that is located inside a team project. When you create a new project file, everyone in your team has access to it.

To create a new project file, first, let’s go to the left-hand sidebar and select your project name. In my case, I will select Medical landing page Project.

Next, hit the + icon beside Project name tab link, or click New design file button in the top-left corner of your Project section.

That’s everything about creating a new file in Figma. In the next posts, we’ll cover more concerning Figma files.

Before you go

Feel free to visit our website captain-design.com where we are sharing generously, ready for commercial use Figma and HTML templates.

You’ll find three things to help you kickstart your next project’s design :

Originally published at https://www.captain-design.com on December 16, 2021.