https://github.com/figma/architecture-diagram-components

Figma / FigJam components for creating beautiful and informative architecture diagrams.
https://github.com/figma/architecture-diagram-components

Last synced: about 1 month ago
JSON representation

Figma / FigJam components for creating beautiful and informative architecture diagrams.

• Host: GitHub
• URL: https://github.com/figma/architecture-diagram-components
• Owner: figma
• License: mit
• Created: 2021-06-23T19:46:45.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-29T17:11:07.000Z (over 2 years ago)
• Last Synced: 2024-09-29T05:41:41.269Z (about 2 months ago)
• Size: 1.51 MB
• Stars: 42
• Watchers: 5
• Forks: 4
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# architecture-diagram-components

Check out [this project](https://www.figma.com/community/file/989635781221754599) in the Figma community! 

---

Create beautiful and informative architecture diagrams with these components - usable in Figma + FigJam! These components are also useful for system design interviews 🤓.



  

    

  



Check out this [example diagram](https://www.figma.com/community/file/989634471195357925?fuid=839190457814534351) we made 📈.

## Usage:

To use these components in your own files:

* Duplicate the community file!

* You can either: publish the components as a library (if you're on a professional plan) and import them via the component tab in FigJam. This has the advantage of maintaining the links between the components and the library.

* OR copy and paste components directly in your FigJam or Figma file.

This library provides variants of all of the various components, use them to denote things like "this service is owned by us" vs "this is an external service".

🚨 In order to resize the "Frame" component, type random text into the hidden text-box. This allows us to resize width / height independently and avoids scaling up the object.

🚨 In order to replace the database / service / user icon, place an icon component on top. This will not be necessary once FigJam is updated to work with nested variants (looking at you FigJam fam 👀).

## Contributing

🙏🏻! Check out the [CONTRIBUTING.md](./CONTRIBUTING.md) for more information and instructions.

## Changelog

v1.0.1 (April 29, 2022)

Added many new icons for languages, frontend frameworks, etc. thanks to [@milkbottlelough](https://github.com/milkbottlelough) (and [@helder-jaspion](https://github.com/helder-jaspion) for elixir).