3 Reasons to Learn Figma as a Data Analyst

Interacting with design specifications

Navigating a Figma file independently empowers you with the ability to access precise values for spacing, font, color, and other elements used in a design. Having access to this can especially be beneficial in the instance when a designer is not immediately available. Compared to regular documentation, being able to directly go into Figma gives you the ability to interact with the design and clarify any ambiguities.

Figma’s Dev Mode serves as a bridge between design and development, offering a range of features that streamline this process. The Inspect panel, provides a detailed view of design elements, allowing access to specifications for spacing, font details, color, or even code if you need it.

New to Playfair Data?

Watch our 90-second intro video and receive tips on making your data usable.
 
Watch Video

Being able to go into dev mode can sometimes be more efficient. It’s easy to export specific assets like images or icons directly from the design, without the need for back-and-forth communication.

Accessing Dev Mode

• Navigate to the upper right-hand corner of the Figma interface.
• Locate (next to the share button) and switch the toggle to enable “Dev Mode”. If elements turn green, that means you’re in the right spot.

Inspect Panel

• In the Inspect Panel, you can access information about your design element such as:
• Specifications: View details of text, shapes, and components.
• Styles and Assets: Explore the properties of a component.
• Code View: Examine layout and style code, which is especially helpful for specifications like padding and typography details (color, font-size, font family, line height).

Development-Ready Feature

Utilize the “Ready for Development” tag to mark sections that are finalized and ready for development.

Hover

Hover over any element in your design or wireframe to view detailed specifications, including element dimensions and spacing.

Color Hex Codes

Easily identify and copy color hex codes for precise color matching.

Export

Use the panel to conveniently export assets.

Quick sketches using Figma for data

Feeling creative? Do you have an idea for a visualization you’d like to brainstorm? With a design software like Figma, you can use it as a playground to brainstorm and ideate before investing time and energy into engineering. Instead of jumping straight into the development phase, you can first explore and refine your ideas in Figma. It provides an environment where you can experiment freely, moving elements around, trying out different styles, and rapidly iterating your visualization concepts.

Luckily, you don’t have to be a design expert to use Figma. Its intuitive interface and easy-to-use tools make it accessible for all levels. A basic knowledge of the tools is all you need to begin visualizing your concepts. This means you can explore your creative side and fine-tune your data visualizations fairly quickly even as a beginner.

Here’s a quick rundown of how you can get started ideating your visualizations.

Getting Started

Open Figma and create a new project. Familiarize yourself with the Figma interface, including the toolbar, layers panel, and design panel.

Setting up your Canvas

Create a new frame by clicking on the frame tool in the toolbar. This will be the container for your visualization.

Visualizing Data

If you have data you would like to visualize, you can create shapes or text layers to represent the data points. For example, rectangles can be used to represent bars in a bar chart.

Adding Labels and Titles

Use the text tool to add labels, titles, and any other text elements that can provide context to your visualization.

Customizing Colors and Styles

Experiment with different colors and styles to make your ideations visually appealing. You can use the fill and stroke (outline) options in the properties panel to customize shapes.

Arranging and Aligning Elements

Use the alignment tools (or auto layout) so that your elements are neatly arranged.

And if you’re feeling keen on enhancing your skills, there is a wealth of resources available to you. From online tutorials to community forums, you’ll find support and inspiration to take your data visualization ideas to the next level. Figma’s official website and YouTube channel have great tutorials, or get started by picking out some of the related content below this tutorial!

If you are a data engineer, analyst, or tableau user, learning Figma will give you confidence allowing you to efficiently collaborate with your team, provide you with accurate information when engineering, and if you’re feeling creative it’s a great space to help you visualize your data.

Thanks for reading,
Zoya