Figma: Small design tutorial for beginners

Figma is a useful tool if you are in the design field. The application is usually used in web design and UI as well as UX design. But graphic designers can also use the tool to partially replace Adobe Photoshop or Adobe Illustrator.

Figma for Design: A small introduction

Figma is a free alternative to Adobe XD or the Sketch program. The graphics program is primarily used for prototyping websites and apps. You can use this to create the visual area of ​​a website, for example.

  • You can use Figma for yourself for free. If you work in a team, it can be used for free for two users and a maximum of three projects. It is suitable for both Mac and Windows computers. In order to work with the application, you must be connected to the Internet.
  • Log in to Figma’s website. If you want, you can download the application and use it on your computer. However, all created files are not stored locally, but in the Figma cloud. To work offline, download the files in the desktop application.
  • Open the app and click on “New design file‘ to create a new document. To design a website, you must first create a framework. In the top menu bar you will find a grid icon. Click on it you can draw a frame on the work area by holding down the left mouse button.
  • You will now see a column on the left side. Here you will find levels similar to Photoshop. You can move, lock and disable the visibility of the individual elements.
  • If you select the frame, you will see another column on the right side. This shows the settings for the frame. Here you can enter the size manually, display a grid (layout grid) and make the color and other settings for the frame. Here you can also set effects such as shadows or export the frame.
  • This column has three tabs: “design“, “prototype“and”inspect“. Visual settings can be made under Design. Under Prototype, you add settings that help you show what would happen, for example, if a website visitor clicked a button on the website. Under Inspect you will find an overview of the design’s individual characteristics, such as the color used or the size of the frame. The CSS code is also shown here.

Menubar and Co.: The most important tools at a glance

Figma’s top menu bar contains tools that you can take advantage of:

  • frame tool: Frames is a tool that lets you create a frame. This is where you place all other elements.
  • casting tool: Next to it you will find the Shape tools. This allows rectangles, circles, ellipses. Draw arrows, polygons, stars and lines. Select the tool and drag it across the screen with the mouse. If you want all sides of the shapes to remain proportional, hold down the Shift key at the same time. You can make the settings for the shapes in the column on the right side of the screen, the shape must be selected for this.
  • drawing tools: Among the drawing tools you will find the pen tool and a pencil. You can use these to draw any shape. You can make settings such as color and co. in the right column.
  • text: Another important tool in the menu bar is the text tool. Select the instrument and click where you want to write text. The style and size of the text can also be adjusted in the right column.
  • resources: Among the resources you will find, for example, plugins that make your work with Figma easier. Icon plugins, for example, offer you a collection of different icons that you can insert into your design.
  • Hand tools: The hand tool helps you move around the screen without fear of accidentally moving something.
  • comment: The comment tool allows you to write a comment that other members of your workgroup will see.

Latest videos

Edit Shapes: More Tools

If you select a shape, you will see three more tools located in the middle of the menu bar.

  • edit object: The “Edit Object” tool allows you to edit an object. For example, you can supplement or rotate it with the drawing tool.
  • components: Using the components, you can combine different shapes into any shape. Choose e.g. two shapes and join them with the tool.
  • Maybe: The next tool is used to use an object as a mask. If you turn a shape into a mask and add a photo, it will only appear on the shape.

You may also be interested in the following articles on the subject:

Leave a Comment