Ritla for Figma

Ritla for Figma is one Figma file: the design side of Ritla UI, with the same components, the same tokens and the same Arabic rules. This page covers getting the file into Figma and working with it. What the license lets you do is on the License page.

Get the file#

1. Sign in to your dashboard and open Downloads.
2. Choose Download. You get one .fig file.
3. In Figma, open your drafts or a team project and import the file (drag it into the file browser, or use Import from the main menu).

The download link is made for you when you click, so download again whenever you need the file rather than sharing a saved link. Everyone with a seat on your license can download it from their own dashboard.

Start with "Start here"#

The first page of the file, Start here, is the index. Under it, Getting started walks through how the file is organized, how to use it as a library, how a design becomes code, and the fonts, icons and photos it credits. Read those sheets once before you build.

Use it as your team library#

Duplicate the file into your team, then publish it from there as a library (Assets, then Libraries, then publish). Your design files then take components and variables from your copy, and an update is one library update instead of a rebuilt file.

Variables and modes#

Every color, space, radius, border and type size in the file is a variable, and the components are bound to them. The collections that switch:

Each variable has a token of the same name in code, so a value you pick in Figma is the value a developer finds. Tokens explains the path from a Figma variable to a CSS variable and a Tailwind utility.

Light and dark#

Switch a frame to dark by setting the 1. Colors collection to Dark mode on that frame, in the right panel. Everything inside it follows, and a single card can stay light inside a dark page. Do not recolor a component by hand to make it dark: the mode does it, and code does the same thing (Dark mode).

Arabic text#

Set the 2. Typography collection to Arabic on an Arabic frame. Arabic text then takes IBM Plex Sans Arabic at the sizes and line heights Arabic needs, while the text styles keep the same names as in English. Numbers, amounts and dates use Geist in both languages, so digits line up the same way in either direction. Components that have a right-to-left variant carry their own Arabic text properties, so you type Arabic into the component rather than over it. Arabic and RTL principles has the reasons behind each choice.

Code Connect#

Code Connect is not part of the file yet. Dev Mode shows the variables and the layer structure, and each component page under Components shows the code for the same component.

How updates arrive#

When a new version of the file is out, the file on your Downloads page is replaced with it, and the changelog says what changed. Download it, then either publish it over your team library copy, or keep your copy and take only the parts you need. Your license includes every update to the file at no extra charge.