Figma Introduction

Where is Figma come

To understand what Figma is, we first need to understand where it came from.

Back in 2014, new design tools started to emerge with interface design as their primary focus.

This was in direct opposition to Photoshop—still widely used at the time—which procured a myriad of options and features from photo and graphics editing to web design, animation, or even 3d!

But, Photoshop was still far from perfect.

The big issue at the time was that Photoshop wasn’t vector-based, and its performance wasn’t that good for the type of work UI designers needed to do. Anyone who tried to operate a 20 artboard psd knows what I’m talking about.

Designing a normal website was tricky enough with Photoshop, but designing an e-commerce site which relies on responsive experiences?

Then Sketch (and other tools like Zeplin and Invision) came along which helped things… a bit.

Sketch was the leader of the pack and introduced a simple, clear interface, where every feature was destined for UI design. It was a drastic change. It was light, vector-based, performant, and the tool quickly gained in popularity with the release of symbols in 2014.

To make a long story short, Sketch set new standards now followed by every major tool in the business and, 5 years later, Sketch is still the leader in the field.

But like everything in life, the more this tool was used, the more limitations have appeared, specifically regarding projects that require heavier collaboration from all parts of the team.

The difficulty collaborating across operating systems, the rise in third-party tooling, and new software allowing multiple parties to interact with designers (simultaneously) led to an iteration nightmare!

In short, projects became cluttered with “noise” from all directions, and the result of all these tools (aiming for more efficiency) was actually a decrease in productivity. And, after all, isn’t finding tools for increasing developer productivity what we’re all after for professional projects?

And thus, we came down to the real problem:

How do we encourage team-wide collaboration while making the workflow as lean and simple as possible?

That’s where Figma comes in.

An overview of Figma for developers

Even with view-only permission, developers can navigate the file’s pages and frames, launch a presentation of the prototype (if any) and of course, get access to all the exportable resources like images and styles. Bear in mind, there’s no way for them to tweak or apply edits on the design.

Create a good file structure to ensure autonomy

One of the biggest ways a designer and a developer can work on a project a the same time (without getting in each other's way) is by taking the time to create a clear file structure. Typically, a good file structure has the following elements:

Clearly identified pages, artboards, and elements: This prevents miscommunication and make finding a particular element much easier.

Well structured components: Figma is very powerful when it comes to components (watch this video if you’re curious about it) and a well-structured document will ensure a more flexible environment, facilitating discussions and iterations.

Well documented elements and features: Because being forced to halt implementation because a feature isn’t just clear enough to proceed is never fun.

Consistent spacing and dimensions: Figma gives designers the ability to use systems like the 8pt grid (you can learn more about that here) to ensure their spaces and dimensions are closer to what they would be when coded.

Like any relationship, it all comes down to clear communication. With the tips mentioned above, you'll make sure that you and your designer go on to lead a long, beautiful relationship (totally professional though... of course).

Code Inspection and Layout Measurements

In Figma, the Code panel offers an easy way to extract code information from a specific page element. The code will be displayed by clicking on a layer.

Currently, Figma supports CSS, Swift, and XML, but notice that most of the code available involves only visual properties and spacing. No Javascript or other logic is exported.

The right hand panel provides code data for color values, typography, position and sizes. Additionally, designers have the option to add a text description to styles and components, which will be available in the same place.

Finally, the panel supports two formatting styles for all three syntaxes: Table and Code. You can toggle them from a tab selector. The Code formatting style is very useful for quick copy and paste. Since the output code is structured in groups, you can extract only the ones you need. Groups split the code by position, text or colors.

Measuring and Spacing

While the Code Panel is selected, Figma draws visual guides around the selected element for spacing and sizes, highlighting its spatial relations with the surrounding elements.

It’s a simple process: Click on the element you’d like to measure, then hover the pointer onto another layer. Here’s a few other suggestions:

Pro tip 1

• Ctrl/Cmd + click to show guides and code for elements nested in groups

Pro tip 2

• Right-click a layer to access a list of its nested children

Spacing values are displayed in absolute pixels, so you may have to take it into account if coding a design made in density ratios higher than 1x.

Guides and Grids

You can toggle the visibility of the layout by clicking Layout Grids from the Eye Icon on the toolbar. In order to show Rules and Guides, hit ctrl/cmd+ r instead.

Alt+hover onto an element will now consider and show the spacing values relative to the closest grid’s module or guide.

Working with Shared Styles

Projects often use a specific set of colors and text styles in order to ensure consistency across the user interface. In Figma, designers can create shared Styles for color, text, grids and effects and structure them in groups.

A Styles list is easily accessible by clicking on the project canvas or clearing the actual selection (Esc key).

That’s the best place to start in order to set up the global design variables in code and minimize the efforts if a change is required.

Together, designers and developers could define naming conventions for Styles early in the process, building a unified shared design language across the team. Or afterward, by uniforming similar Styles, cross-checking color contrast or reviewing the product over a quick Slack call.

If a process involves limitations in the context of design variables (limited palette, text Styles, or anything technology or brand related), discussing the Styles at early stages could be beneficial for both sides. Although there are some scenarios where this approach may be overkill — (Creative Exploration, Proof of Concepts, etc).

You can inspect and obtain code data from a Style by clicking the edit icon that appears when hovering its name on the Style list. Styles like Components support a description field as well.

If the selected layer has a Style, you’ll see its name next to the property where it was applied. A full list of supported styles includes Color, Fill, Type, Layout and Effects Shadows, Blurs.

Weirdly, at the moment there’s no info available for Grid Styles via the Code Panel, but you can access the Style via the Style list.

Exporting Image Assets and SVGs

Speaking about image assets: You can export resources globally or locally depending on your needs. If you’re looking to export all the assets that were marked as exportable on a file or frame, the Export Panel (Ctrl/Cmd + Shift +.E) is the way to go.

While this option can save you a lot of time, there are instances where you may need to download an item from a specific layer, i.e. an icon or a thumbnail. Again this is as easy as selecting and right-clicking on the desired layer/s.

In no specific order you can:

• Copy an item on the clipboard as CSS, SVG, or PNG: Selecting ‘Copy as’ after right-clicking on a layer. (SVG code paste; PNG is desktop-app only.)

• Export a full-res non-image: Click the name of the image on the File Name field — a blue label on Code Panel — and make sure to select the layer that uses the image as fill. (Any effects or cropping applied on the layer will be ignored.)

Ruler

This is my experience for making another one easy to work with the file when there are many components with different width and height.

First of all select Ruler in menu bar. (When you wanna hide the Ruler, just disable it in menu bar)

You can take the line from Rule by doing like the photo.

In the example below, we can see the way Ruler work, we know that which component will have same width or start in the same position.

Actually if you guys are familiar with Photoshop, it runs like the same with Photoshop's Ruler. The purpose is helping user know about the common point of many components, sometime it makes viewer see clearly the different between each small modules.

Conclusion

There’s no doubt that Figma’s popularity is growing—and for good reason. While Figma may not be particularly revolutionary, it definitely knows how to get a team to work together. Everyone in the project is able to have a voice without the process getting too “noisy.” In the end, Figma is the best design tool for making sure your team is working efficiently, effectively, and that the final product won’t come out...well...lopsided.