A tool that allows us to create and collaborate in wireframes, mockups, and prototypes. For a brief history of why we switched to Figma and how we're using it, see Paul's article.
Figma has a very simple permission structure:
In our Liferay account, there is no limit or additional cost for Viewers, Editors cost \$180/year.
We encourage you to give everyone on your project team Viewer roles, this enables transparency and communication in a project.
The Editor role is reserved for people whose job role requires the ability to create and edit files — typically this is a designer, but there are a few exceptions — if someone outside of the Design org requests an Editor role, please email our Figma admin and Juan Hidalgo and let them know why you’re adding a new Editor.
People can be added on Team, Project, and File levels — you can see any files within that level (i.e. if you’re added to the Lexicon project, you can see all the Lexicon files but you won’t see files in the Liferay.com project).
In Projects and Files there is a blue “Share” button in the upper right corner — click this and add the person’s email into the ‘Invite someone…’ field.
If you have in-depth questions about sharing, please see Figma’s documentation first, if you can’t find an answer there, ask it in the ‘design-operations’ Slack channel.
If your project requires adding viewers who don’t have an @liferay.com email address, please add them on a per-file basis. If absolutely necessary, they can be added to a whole project, but use your best judgment to ensure sensitive information is not shared.
If your project is getting full and you want to get rid of files, save it as a “.fig” file inside of the appropriate folder in Google Drive.
The archived files should go in the ‘archive’ folder for each milestone.
Try to organize your components using the Atomic model — use slashes to separate, as Figma interprets these as intelligent groupings, i.e. “Icons / Arrow / Down” “Icons / Arrow / Up” will allow you to quickly navigate to the Arrow icons and choose a direction.
(project) / (figma page) / (frame) / (object) / (structural attributes) / (stylistic attributes) / (breakpoints)
The naming convention of Figma components should follow a modified version of the Atomic model.
Frames and groups should be laid out in rows from left-to-right, with a maximum of 5 columns. 200px should separate columns, 400px should separate rows.
Files should be according to DAM guidelines — be sure to append your initials to each file.
A typical filename: (epic)-(story)-(ticket-number)-story-name
Artboards should be named following the DAM guidelines, using numbers at the beginning for sequences. The artboard name should be descriptive, yet brief.
Files should use a cover page and cover component to indicate the current design stage of the file, as well as meta information such as file type, author, and contributors.
A cover page should always be page 1 of n in a figma file and named “cover” with a background color of #FFFFFF. A cover component should be placed on the page represents the state of the file.
Figma Cover File: Liferay Global / Utilities / Templates
By default, the ‘Liferay Global’ project contains all of our team libraries. This includes things like Global Utilities (things anyone can use that aren’t project specific — brand colors, wireframing tools, etc) as well as Project or Product specific assets (Experience Cloud components or Liferay.com components) — this is so that we can have all of our assets, components, elements, etc open for all designers to use and improve as they work.
For now, we’re restricting permissions for files in the global project due to Figma’s lack of a formal review process (think Github’s pull-request system). If you’d like to suggest an improvement and new library, please reach out to Emiliano/Victor (Lexicon), Paul (Utilities, general).