Add Figma documentation (#1705)

docs/docs/developer/frontend/best-practices.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 2
+sidebar_position: 3
 sidebar_custom_props:
   icon: TbChecklist
 ---

docs/docs/developer/frontend/design-system.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 6
+sidebar_position: 7
 sidebar_custom_props:
   icon: TbPaint
 ---

docs/docs/developer/frontend/folder-architecture.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 4
+sidebar_position: 5
 sidebar_custom_props:
   icon: TbFolder
 ---

docs/docs/developer/frontend/hotkeys.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 10
+sidebar_position: 11
 sidebar_custom_props:
   icon: TbKeyboard
 ---

docs/docs/developer/frontend/style-guide.mdx

@@ -1,5 +1,5 @@
 ---
-sidebar_position: 3
+sidebar_position: 4
 sidebar_custom_props:
   icon: TbPencil
 ---

docs/docs/developer/frontend/work-with-figma.mdx

@@ -0,0 +1,53 @@
+---
+sidebar_position: 2
+sidebar_custom_props:
+  icon: TbBrandFigma
+---
+
+# Work with figma
+
+Figma is a collaborative interface design tool that aids in bridging the communication barrier between designers and developers.
+In this guide, we'll go over how to collaborate with Twenty’s Figma.
+
+## Access
+
+1. **Access the shared link:** you can access the Twenty Figma file with this link: https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty
+2. **Sign in:** If you're not already signed in to Figma, you'll be prompted to do so. 
+Key features are only available to logged-in users, such as the developer mode and the ability to select a dedicated frame.
+**You will not be able to collaborate effectively without an account.**
+
+## Figma structure
+
+On the left sidebar, you can access the different pages of our Figma. They are organised as such:
+
+- **Components page:** This is the first page. The designer uses it to create and organize the reusable design elements that are used throughout the design file. For example, buttons, icons, symbols, or any other reusable components. It serves to maintain consistency across the design.
+- **Main page:** The second page is the main page, where the complete user interface of the project is shown. You can press ***Play*** to use the full app prototype.
+- **Features pages:** The subsequent pages are typically dedicated to features being worked on. They contain the design of specific features or modules of the application or website. They are usually still being worked on.
+
+## Useful Tips
+
+With read-only access, you can't edit the design but you can access all features that will be useful to implement the designs into code.
+
+### Use the Dev mode
+
+Figma's Dev Mode enhances developers' productivity by providing easy design navigation, effective asset management, efficient communication tools, toolbox integrations, quick code snippets, and key layer information, bridging the gap between design and development. learn more at https://www.figma.com/dev-mode/
+
+Switch to the "Developer" mode in the right part of the toolbar to see design specs, copy CSS, and access assets. 
+
+### Use the Prototype
+
+Click on any element on the canvas and press the “Play” button at the top right edge of the interface to access the prototype view.  Prototype mode allows you to interact with the design as if it were the final product. It demonstrates the flow between screens and how interface elements like buttons, links, or menus behave when interacted with.
+
+1. **Understanding transitions and animations:** In the Prototype mode, any transitions or animations added by a designer between screens or UI elements can be viewed, providing clear visual instructions to developers on the intended behavior and style.
+2. **Implementation Clarification:** A prototype can also be used to reduce ambiguities. Developers can interact with it to gain a better understanding of the functionality or appearance of particular elements.
+
+For more comprehensive details and guidance on learning the Figma platform, you can visit the official Figma Documentation: https://help.figma.com/hc/en-us
+
+### Measure distances
+
+Select an element, hold `Option` key (Mac) or `Alt` key (Windows), then hover over another element to see the distance between them.
+
+## Collaboration
+
+1. **Using Comments:** You are welcome to use the comment feature by clicking on the bubble icon in the left part of the toolbar.
+2. **Cursor chat:** A nice feature of Figma is the Cursor chat. Just press `;` on Mac and `/` on Windows to send a message if you see someone else using Figma as the same time as you.

docs/src/theme/DocSidebarItem/Link/index.js

@@ -25,6 +25,7 @@ import {
   TbFolder,
   TbEyeglass,
   TbZoomQuestion,
+  TbBrandFigma,
   TbPaint,
   TbChecklist,
   TbKeyboard,
@@ -61,6 +62,7 @@ const DocSidebarItemLink = ({
     'TbFolder': TbFolder,
     'TbEyeglass': TbEyeglass,
     'TbZoomQuestion': TbZoomQuestion,
+    'TbBrandFigma': TbBrandFigma,
     'TbPaint': TbPaint,
     'TbChecklist': TbChecklist,
     'TbKeyboard': TbKeyboard,