Tools and Process
Getting started
Follow these steps to start using the Facemask Design System:
Download and install the All-Pro font family.
Download and install the Sketch app. Keep reading to learn more about Sketch.
Download Abstract and create an account. Keep reading to learn more about Abstract.
Contact us to request access to the NFL Creative Product Design group.
Tools
Facemask uses tools that help our product design teams work together.
Sketch
Sketch is the design tool of choice used to craft NFL digital experiences. Its ability to support libraries of shared design elements makes it ideal for multiple designers to collaborate on a single project.
Abstract
Abstract is a secure, version-control hub that houses all of our Sketch files, including the Facemask Design Guidelines. It removes the friction of managing the team’s multiple sketch files and provides detailed tracking of all design updates.
Branching
To collaborate effectively, teams need to agree on a branching system that standardizes file naming, categorization, and organization. Once established, designers can do what they do best; design.
This diagram illustrates the evolution of a master file over time.
STEP 1 – MASTER FILES
Master files are your single source of truth. They are Sketch files stored in a shared location for the team to reference. A single project may consist of one or several master Sketch files.
STEP 2 – BRANCH
To make updates to the master Sketch file, create a branch. Branches are local copies of the master Sketch file. Feel free to explore. You can make as many changes and updates to a branch as you like without changing the master.
STEP 3 – COMMIT
Committing lets you save changes to your branch and copies those changes to the server without affecting the master Sketch file.
STEP 4 – COMMIT AGAIN
If you’re wondering how often to commit your work to Abstract, the answer is: “All the time!” Frequent commits compartmentalize your work and let you revisit past iterations with precision.
STEP 5 – MERGE
Once you’re satisfied with your local updates, you can merge your branch to the master file on the server. This updates the master and makes your changes available to the rest of the team.
STEP 6 – BRANCH AGAIN
When unforeseen changes arise, you can branch again and again. Like commits, branches are also a good way to compartmentalize the scope of your work.
STEP 7 – MERGE AGAIN
Merge your branch to the master again to make changes available to other members of your team. Repeat this cycle as often as you need.