added figma link to README.md (twentyhq#1835)

* added figma link to README.md * added figma to the recommended extensions for the project * updated useful tips in 'work with Figma' section of the docs to add Figma extension for VSCode * removing yarn.lock * modified Figma extension docs in 'Work with Figma' * added Mdx Preview extension to recommended extensions
sdileep · Oct 3, 2023 · 35fb257 · 35fb257
1 parent e63f8ea
commit 35fb257
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 398 deletions.
diff --git a/.vscode/extensions.json b/.vscode/extensions.json
@@ -10,6 +10,8 @@
     "prisma.prisma",
     "yoavbls.pretty-ts-errors",
     "graphql.vscode-graphql-syntax",
-    "graphql.vscode-graphql"
+    "graphql.vscode-graphql",
+    "figma.figma-vscode-extension",
+    "xyc.vscode-mdx-preview"
   ]
 }
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@
 <h2 align="center" >A Modern Open Source CRM </h3>
 <p align="center">Crafted with Precision. Built for Success.</p>
 
-<p align="center">🌐 <a href="https://twenty.com">Website</a> · 📚 <a href="https://docs.twenty.com">Documentation</a> · 📖 <a href="https://twenty.com/story">Our Story</a> · 💬 <a href="https://discord.gg/cx5n4Jzs57">Discord</a></p>
+<p align="center">🌐 <a href="https://twenty.com">Website</a> · 📚 <a href="https://docs.twenty.com">Documentation</a> · 📖 <a href="https://twenty.com/story">Our Story</a> · 💬 <a href="https://discord.gg/cx5n4Jzs57">Discord</a> · ✏️ <a href="https://www.figma.com/file/xt8O9mFeLl46C5InWwoMrN/Twenty">Figma</a><p>
 <br />
 
 <p align="center">

diff --git a/docs/docs/developer/frontend/work-with-figma.mdx b/docs/docs/developer/frontend/work-with-figma.mdx
@@ -47,6 +47,12 @@ For more comprehensive details and guidance on learning the Figma platform, you
 
 Select an element, hold `Option` key (Mac) or `Alt` key (Windows), then hover over another element to see the distance between them.
 
+### Figma extension for VSCode (Recommended)
+
+[Figma for VS Code](https://marketplace.visualstudio.com/items?itemName=figma.figma-vscode-extension)
+lets you navigate and inspect design files, collaborate with designers, track changes, and speed up implementation - all without leaving your text editor.
+It is part of our recommended extensions.
+
 ## 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.