From c181a3f0d5d46e31f4ceb9c0a38693f02165c1f7 Mon Sep 17 00:00:00 2001 From: Germain Date: Fri, 12 May 2023 12:11:13 +0100 Subject: [PATCH 1/5] Update compound references --- docs/design.md | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/docs/design.md b/docs/design.md index c46ee0e84d..c9e11f668a 100644 --- a/docs/design.md +++ b/docs/design.md @@ -97,11 +97,15 @@ Main entry point: https://www.figma.com/files/project/5612863/Element?fuid=77937 Note: all the Figma links are not publicly available. -### Coumpound +### Compound -Coumpound contains the theme of the application, with all the components, in Light and Dark theme: palette (colors), typography, iconography, etc. +Compound is Element's design system where you'll find styles and documentation +regarding user interfaces. -https://www.figma.com/file/X4XTH9iS2KGJ2wFKDqkyed/Compound +- Documentation: [https://compound.element.io](https://compound.element.io) +- [Compound Android – Figma document](https://www.figma.com/file/G1xy0HDZKJf5TCRFmKb5d5/Compound-Android-Components) +- [Compound Styles - Figma document](https://www.figma.com/file/PpKepmHKGikp33Ql7iivbn/Compound-Styles?type=design) +- [Compound Icons - Figma document](https://www.figma.com/file/gkNXqPoiJhEv2wt0EJpew4/Compound-Icons) ### Login From ca2f93932b022b5f57294c98567037e020ec5bc4 Mon Sep 17 00:00:00 2001 From: Germain Date: Fri, 12 May 2023 12:15:10 +0100 Subject: [PATCH 2/5] Update icons documentation --- docs/design.md | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/docs/design.md b/docs/design.md index c9e11f668a..33605f85ae 100644 --- a/docs/design.md +++ b/docs/design.md @@ -56,7 +56,16 @@ Some of them depend on the theme, so ensure to use theme attributes and not colo ### Icons -#### Export drawable from Figma +Most icons should be available as part of the [Compound icon library](https://compound.element.io/?path=/docs/tokens-icons--docs) + +All drawable are auto-generated as part of the design tokens library. You can find +all assets in [`vector-im/compound-design-tokens#assets/android`](https://github.com/vector-im/compound-design-tokens/tree/develop/assets/android) + +If you are missing an icon, follow to [contribution guidelines for icons](https://www.figma.com/file/gkNXqPoiJhEv2wt0EJpew4/Compound-Icons?type=design&node-id=178-3119&t=j2uSJD9xPXJn5aRM-0) + +#### Custom icons + +##### Export drawable from Figma - click on the element to export - ensure that the correct layer is selected. Sometimes the parent layer has to be selected on the left panel @@ -68,7 +77,7 @@ Some of them depend on the theme, so ensure to use theme attributes and not colo It's also possible for any icon to go to the main component by right-clicking on the icon. -#### Import in Android Studio +##### Import in Android Studio - right click on the drawable folder where the drawable will be created - click on "New"/"Vector Asset" From b48c93815acf48f5481009411c90c0ce21d09342 Mon Sep 17 00:00:00 2001 From: Germain Date: Fri, 12 May 2023 12:19:48 +0100 Subject: [PATCH 3/5] Add more compound link references --- docs/design.md | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/design.md b/docs/design.md index 33605f85ae..39135ed99f 100644 --- a/docs/design.md +++ b/docs/design.md @@ -31,6 +31,7 @@ ## Introduction Design at element.io is done using Figma - https://www.figma.com +You will find guidance to build using interface on the [Compound documentation – Element's design system](https://compound.element.io) ## How to import from Figma to the Element Android project @@ -41,6 +42,9 @@ Integration should be done using the Android development best practice, and shou Element Android already contains all the colors which can be used by the designer, in the module `ui-style`. Some of them depend on the theme, so ensure to use theme attributes and not colors directly. +A comprehensive [color definition documentation](https://compound.element.io/?path=/docs/tokens-color-palettes--docs) is available in Compound. + + ### Text - click on a text on Figma From 75f1faef15957009651c716279eb2d9c994ebefc Mon Sep 17 00:00:00 2001 From: Germain Date: Fri, 12 May 2023 12:23:35 +0100 Subject: [PATCH 4/5] Add changelog entry --- changelog.d/420.doc | 1 + 1 file changed, 1 insertion(+) create mode 100644 changelog.d/420.doc diff --git a/changelog.d/420.doc b/changelog.d/420.doc new file mode 100644 index 0000000000..b29185bcd6 --- /dev/null +++ b/changelog.d/420.doc @@ -0,0 +1 @@ +Update design documentation to add references to Compound From a5ab180e927aaf2c4be064c50d6633a5d27c0240 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jorge=20Mart=C3=ADn?= Date: Fri, 12 May 2023 15:48:51 +0200 Subject: [PATCH 5/5] Fix issues with knit (this should hopefully fix danger too). --- docs/design.md | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/docs/design.md b/docs/design.md index 39135ed99f..58723eb28d 100644 --- a/docs/design.md +++ b/docs/design.md @@ -8,11 +8,12 @@ * [Text](#text) * [Dimension, position and margin](#dimension-position-and-margin) * [Icons](#icons) - * [Export drawable from Figma](#export-drawable-from-figma) - * [Import in Android Studio](#import-in-android-studio) + * [Custom icons](#custom-icons) + * [Export drawable from Figma](#export-drawable-from-figma) + * [Import in Android Studio](#import-in-android-studio) * [Images](#images) * [Figma links](#figma-links) - * [Coumpound](#coumpound) + * [Compound](#compound) * [Login](#login) * [Login v2](#login-v2) * [Room list](#room-list)