Android Matrix messenger application using the Matrix Rust Sdk and Jetpack Compose

5.5 KiB

Raw Blame History

Element Android design

Introduction
How to import from Figma to the Element Android project
Figma links
- Compound
- Login
  - Login v2
- Room list
- Timeline
- Voice message
- Room settings
- VoIP
- Presence
- Spaces
- List to be continued...

TODO This documentation is a bit outdated and must be updated when we will set up the design components.

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

How to import from Figma to the Element Android project

Integration should be done using the Android development best practice, and should follow the existing convention in the code.

Colors

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 is available in Compound.

Text

click on a text on Figma
on the right panel, information about the style and colors are displayed
in Element Android, text style are already defined, generally you should not create new style
apply the style and the color to the layout

Dimension, position and margin

click on an item on Figma
dimensions of the item will be displayed.
move the mouse to other items to get relative positioning, margin, etc.

Icons

Most icons should be available as part of the Compound icon library

All drawable are auto-generated as part of the design tokens library. You can find all assets in element-hq/compound-design-tokens#assets/android

If you are missing an icon, follow to contribution guidelines for icons

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
on the right panel, click on "export"
select SVG
you can check the preview of what will be exported
click on "export" and save the file locally
unzip the file if necessary

It's also possible for any icon to go to the main component by right-clicking on the icon.

Import in Android Studio

right click on the drawable folder where the drawable will be created
click on "New"/"Vector Asset"
select the exported file
update the filename if necessary
click on "Next" and click on "Finish"
open the created vector drawable
optionally update the color(s) to "#FF0000" (red) to ensure that the drawable is correctly tinted at runtime.

Images

Android 4.3 (18+) fully supports the WebP image format which can often provide smaller image sizes without drastically impacting image quality (depending on the output encoding quality). When importing non vector images, WebP is the preferred format.

Images can be converted to the WebP within Android Studio by

right clicking the image file within the project file explorer
select Convert to WebP

https://developer.android.com/studio/write/convert-webp

Figma links

Figma links can be included in the layout, for future reference, but it is also OK to add a paragraph below here, to centralize the information

Main entry point: https://www.figma.com/files/project/5612863/Element?fuid=779371459522484071

Note: all the Figma links are not publicly available.

Compound

Compound is Element's design system where you'll find styles and documentation regarding user interfaces.

TBD

https://www.figma.com/file/xdV4PuI3DlzA1EiBvbrggz/Login-Flow-v2

Room list

TBD

Timeline

https://www.figma.com/file/x1HYYLYMmbYnhfoz2c2nGD/%5BRiotX%5D-Misc?node-id=0%3A1

Voice message

https://www.figma.com/file/uaWc62Ux2DkZC4OGtAGcNc/Voice-Messages?node-id=473%3A12

Room settings

TBD

5.5 KiB Raw Blame History