What is Figma? -
Figma is a beginner-friendly design tool used to create, prototype, and collaborate on interface designs. Figma can be used when developing apps or websites. Major companies such as Microsoft, Google, and Netflix use Figma to design their UIs.
After entering your preferred name, you will then answer questions to describe yourself, optionally invite others to collaborate with you, and choose a plan, with the starter plan being free. Next, you can begin working on projects.
How to get started -
To get started using Figma, go to their site, click “Get Started,” and sign up using your email.
After entering your preferred name, you will then answer questions to describe yourself, optionally invite others to collaborate with you, and choose a plan, with the starter plan being free. Next, you can begin working on projects.
Starting projects -
A file is where designing takes place, and projects are what group related files to be managed by you and others. Projects are similar to Github project boards, while files are like repositories, within those files, you may create different pages for your potential homepages or menus. Files can be created by many means. To make a file within a project, go to the “All projects” section on the left, then press the blue plus icon in a slot of an existing project to add a file to it.
You can also create a file without a project by hovering over the “Drafts” section on the left and pressing the plus icon that appears to the right of it.
Tools -
There are an extensive number of tools to be used on Figma, but here you will find the key features.
- In the center, you will find the canvas. This is the main area where you will create and view your designs.
- To the left is the file, which contains the layers panel. This is where you can manage and arrange your frames, shapes, and other items.
- To the right is the properties panel. This is where you can change the details of your items.
- Finally, at the bottom is the toolbar, where you will find essential functions to making designs, such as frames, shapes, pen, and text.
An important practice while using these tools is to name everything, all the way from your projects to your smallest items, to differentiate and organise them. Another is to use components, which store multiple items in a group, and treat them as a single item. To use them, right click on an item and press the “Create component” option. You can then drag other items into the component so they can act as one item.
How to use projects with code -
There isn’t a native way of linking Figma designs to code, though there are other ways to do so. One way to use your designs is through extensions. In the toolbar, press the button labeled “Actions”, then go to the “Plugins & widgets” section. There, you can search for extensions that can translate your designs into code.
Using TeleportHQ, you can select the parts of your design you want to be used as code and export them as a new project.
Know that many extensions that turn designs into code don’t get everything perfectly, after converting your project to code, you may have to adjust items to look how they did before. Within the new project, press the “Code” button in the top right to view the project in React, HTML, Next, and other languages.
Finally, you can copy the code into a repository to be used in creating a website.
Top comments (0)