Introducing: The Power of Figma as a Design Tool
Want to get started in design, but don,t know where to design? These lesson & exercise will help you start designing immediately. This blog is designed for beginners.
What Figma is?
Figma is a cloud-based UI and UX design application, with excellent design, prototyping, code-generation tools. It,s currently the leading interface, supports working on every phase of the design process. Born on the Web, Figma helps the entire product team create, test, and ship better designs, faster.
If you haven’t already, try it!
Figma used for?
Simply, Figma is a digital design and prototyping tool. It is a UI and UX application that you can use to create websites, apps, or smaller user interface components that can be integrated into other projects.
Advantages:
. It’s free!!
. Run-on any platform with an internet connection.
. Real-time team collaboration
. Import sketch files
. Fantastic Team library/Design Systems, a single source of truth
. Integrated high-quality prototyping
Disadvantage:
. You need to be online to work. However, you can save the file locally, work on it and add it again later.
Let’s Get Started:
After getting Sign up, this is what our mankind view of the Figma Home page looks like.
Designing with Figma:
1.Taking a new Frame- Press A or F to see all frame options on the properties panel on the right-hand side and pick the size you wish to work with. Here I am selecting Instagram Post. (1080x1080)
You can take as many frames at a time.
2.Vector shapes- Figma uses some Vector Networks, allowing the creation of complex shapes.
For default shapes, pick from the top menu or simply hit R(rectangle) L(line) or O(ellipse) and start drawing your shape. Hold shift to keep proportions in place. To make a more complex shape, hit P. You can change the properties of vector shapes via the properties menu on the right-hand side.
3.Layers and groups- As with Frame, on the left-hand side of your screen, you find the layers panel.
- Layers → every new element your add creates a layer automatically. You can rearrange layer by drag and drop.
- Group layers → Make sure to group layers (select layers and press cmd+G) to keep your file organized.
- Pages → You can set up different sections or areas of your design. For messy brainstorming, wireframing and interactions up to the final version.
4.Images- Drag the image onto your work area. To change the behaviour of the image go to Fill on the right-hand properties window and open the image properties.
Furthermore, Figma allows adjustment of properties such as colour and saturation. Even you can change transparency in photos by selecting the photo, at the right-hand side properties panel Layer yo can go through Pass through as well as 100%(0–100%).
5.Typography- For texting Press T, to draw a text window or simply click and start typing. You can set all text properties on the right-hand side properties menu.
In which you can change the font style, colour (Fill you can use many options after clicking it, on the left corner of the bar Solid menu where you can change colours accordingly), size and alignments, many more options.
6.Create a Team and Project- Teams on Figma allow collaboration with others. You can invite members, add projects and store specific libraries. To create a team simply hit the “create team” button on your Figma overview and follow the instructions. You will see other users avatars and cursor and can work alongside in real-time in the same file! They can also access your prototype in action and can download any assets in the size needed.
7.Sharing- Invite people by clicking the blue share button in the top menu and enter an email address or copy the link and send it.
8.Exporting Assets- In Figma, all assets can be exported in any size directly.If you would like to, in any case, this is how it works:
. Choose the object
. Click on export on the right-hand side properties menu
. Define how to export and done!
Cheatsheet, when to export what:
- SVG → use for vector files, such as logos and icons. SVGs are scalable to any size without losing quality. Make sure to export a png fallback.
- JPG → use for all sorts of rectangular images and photos with no opacity needed. Make sure to supply actual size(1x) as well as retina resolution (2x).
- PNG → Use, if an image or photo needs a transparent background. Also 1x and at least 2x export required.
- 1x, 2x → 1x is the actual size, 2x twice the size.
- w & h → You can also set a width, e.g. 300w = image with a width of 300px. Same for height=h
- pdf → used if you want to export a whole page for high quality.
That’s it!!!!!
There are many more features available to explore.
We too design using Figma check out our Instagram post:
Read Our blog on another design tool :
Visit Our Website:
Author: Riya Patidar
Editor: Ashutosh Raghuwanshi, Devendra Patidar,