Process Owner: Miguel Echeverri
last Update: 3/22/24

FIGMA AND DESIGN

Welcome to Power Digital. In this documen,t you’ll learn how to use Figma in your role as an Account Manager. For any questions or concerns, feel free to reach out to your Manager :)

Tools

	Tools
FIGMA	https://www.figma.com/

Terms and Abbreviations

	Terms and Abbreviations
HEX Color	Hex is the color palette used on web or design development. These color are named by using a # sign and an alphanumeric code
Padding	Separation between one component and the other, usually measured in pixels
PX	Pixels
Proto	This is an interactive view of the design that you will be presenting to the client
Dev link	Non-interactive but technical view of the design that you will need to share with the developers so they can implement it on the feature.
Font File	A zip file, the designer will need to create the designs
Design System - DS	A design system is created by the designer to have a quick reference of the client’s color palette, logo, fonts, icons, and any other resources they find useful for their work

Access

There are several ways in which you can access Figma. The designers will usually share with you a link to the project that they are working on, but you can also:

Use your corporate email account to access FIGMA
Use your pod’s email address to access FIGMA

Once you are all logged in, you'll see the different files and workspaces for each one of the pod’s clients

Look for a client Figma

Click the name of the client you want to view the Files for. There will be 3 different files:

Client name + Website: This file includes all the files and designs created for that client. Whenever the design starts a new design, they will create a new file within this “folder”
Client name + DS: Client’s Design System
Client name + E-mail: Email designs created for this client. You will only see this file if the client’s partnership includes email and automation.

Use figma

Prototype

The designer will share a prototype of the different design variations on the comments section in the ticket. Click the Figma link > find the design variations on the left panel and navigate the design variation that you want to QC by clicking the different options

Development link

The developers will use a more detailed version of Figma for their work, to access the development link, go to the top bar > click the small arrow next to the file’s name > select the option Open in editor

The developer’s view will open up on a different tab in your browser

On the developers link you will see:

Files navigation panel: In this panel you’ll be able to search for all the designs that we’ve created for our channel
Arrow/selector
Hand tool: To move around the design board
Comments tool: Select this option to leave design-based comments
Export Option
Play: You can use this button if you want to go back to the prototype view

Comment

To leave a comment in Figma, select the comments tool > click near the item that you want to comment on > write our feedback or input. It is best practice to tag the designer or the person that is going to execute on it.

Note: All comments in Figma should be design specific and any comment that you leave in figma is always best to copy the very same comment on the ticket in clickup since Clickup is our primary source.

QC a Figma

There are several items to QC in Figma before presenting a design to the client. It is also important to ask yourself the following questions:

Is the design aligned with the GL’s idea of the feature?
Is the design following the brand guidelines?
Is this something that the client will consider aesthetically pleasing?
Did the designer follow the instructions on the ticket?

You can also reference the following Design QC sheet

It is always important to verify the following items:

Colors: Must be the same ones as the client’s color palette
Copy: Verify that copy is following a cohesive structure without typos and following grammar rules
Alignment: Check that every component is properly aligned and/or centered
Resolution: Make sure that all images are in high resolution. Send feedback to the designer if any image looks blurry or ask the client for an image with a higher resolution in case you can’t find any at the client’s assets folder.

Colors

On Web design the color pallet is named Hex, all colors are named with a # and an alphanumeric code. To know what is the color of a component or block: Open the dev link > click on the component several times until it is single selected > go to the properties menu on the right-hand panel > look for the Color.

Pro Tip: You can use this same process to know the size of a component.

Export

On some rare occasions, you might need to export a component of the design to support your developers. To do so Select the item that you want to export > go to the panel on the right-hand side of Figma > select image quality > choose the format > click on export > choose the folder in which you want to save the file in.