الرموز الأولية

النصوص

يلعب التصميم في المنتج دورًا حاسمًا في إقامة التسلسل الهرمي وقابلية القراءة.

Tokens

6xl/black

6xl/bk

64/102

6xl/xbold

6xl/xb

64/102

6xl/bold

6xl/bd

64/102

6xl/med

6xl/md

64/102

6xl/regular

6xl/rg

64/102

5xl/black

5xl/bk

56/90

5xl/extrabold

5xl/xb

56/90

5xl/bold

5xl/bd

56/90

5xl/medium

5xl/md

56/90

5xl/regular

5xl/rg

56/90

4xl/black

4xl/bk

48/77

4xl/extrabold

4xl/xb

48/77

4xl/bold

4xl/bd

48/77

4xl/medium

4xl/md

48/77

4xl/regular

4xl/rg

48/77

3xl/black

3xl/bk

40/64

3xl/extrabold

3xl/xb

40/64

3xl/bold

3xl/bd

40/64

3xl/medium

3xl/md

40/64

3xl/regular

3xl/rg

40/64

2xl/black

28/45

2xl/extrabold

28/45

2xl/bold

28/45

2xl/medium

28/45

2xl/regular

28/45

xl/black

24/38

xl/extrabold

24/38

xl/bold

24/38

xl/medium

24/38

xl/regular

24/38

lg/black

20/32

lg/extrabold

20/32

lg/bold

20/32

lg/medium

20/32

lg/regular

20/32

base/black

16/26

base/extrabold

16/26

base/bold

16/26

base/medium

16/26

base/regular

16/26

sm/black

14/22

sm/extrabold

14/22

sm/bold

14/22

sm/medium

14/22

sm/regular

14/22

xs/black

12/19

xs/extrabold

12/19

xs/bold

12/19

xs/medium

12/19

xs/regular

12/19

2xs/black

10/14

2xs/extrabold

10/14

2xs/bold

10/14

2xs/medium

10/14

2xs/regular

10/14

Code

نقوم حاليًا بتسليم أنماطنا باستخدام Tokens Studio، الذي يُنتج الرموز لـ fontFamily، fontWeight، lineHeight، fontSize، letterSpacing، paragraphSpacing، paragraphIndent، textCase و textDecoration. وهذا يمنحنا أقصى قدر من التحكم والمرونة. على سبيل المثال، نحن قادرون على تبديل عائلة خط كاملة من رمز واحد، والذي يمكن دفعه عبر جميع ملفات Figma من جهة، وإلى Github من جانب الكود حيث يقبل المطور التغيير عبر جميع ملفات الكود في المنتجات. إنها تزامنية حقيقية من النهاية إلى النهاية.

إليك مثال على رمز 6xl/black في الشيفرة، مع الإشارة إلى الرموز الأخرى التي يرثها.

"6xl": {
    "Black": {
      "value": {
        "fontFamily": "{fontFamilies.ping-al}",
        "fontWeight": "{fontWeights.ping-al-0}",
        "lineHeight": "{lineHeights.10}",
        "fontSize": "{fontSize.10}",
        "letterSpacing": "{letterSpacing.0}",
        "paragraphSpacing": "{paragraphSpacing.0}",
        "paragraphIndent": "{paragraphIndent.0}",
        "textCase": "{textCase.none}",
        "textDecoration": "{textDecoration.none}"
      },
      "type": "typography"
    },

هناك أدوات رائعة أخرى تقدم شيئًا مشابهًا مثل Specify، ولكن في وقت البناء، كانت Tokens Studio هي أفضل أداة لدورة التكنولوجيا لدينا - تطبيق موبايل باستخدام Flutter وتطبيق ويب باستخدام React.

الألوان

المسافات

الرائدة للتصميم

لغة التصميم

المقالات

الأبحاث

انضم لنا

Select Language

Tokens

6xl/black

6xl/bk

6xl/xbold

6xl/xb

6xl/bold

6xl/bd

6xl/med

6xl/md

6xl/regular

6xl/rg

5xl/black

5xl/bk

5xl/extrabold

5xl/xb

5xl/bold

5xl/bd

5xl/medium

5xl/md

5xl/regular

5xl/rg

4xl/black

4xl/bk

4xl/extrabold

4xl/xb

4xl/bold

4xl/bd

4xl/medium

4xl/md

4xl/regular

4xl/rg

3xl/black

3xl/bk

3xl/extrabold

3xl/xb

3xl/bold

3xl/bd

3xl/medium

3xl/md

3xl/regular

3xl/rg

2xl/black

2xl/extrabold

2xl/bold

2xl/medium

2xl/regular

xl/black

xl/extrabold

xl/bold

xl/medium

xl/regular

lg/black

lg/extrabold

lg/bold

lg/medium

lg/regular

base/black

base/extrabold

base/bold

base/medium

base/regular

sm/black

sm/extrabold

sm/bold

sm/medium

sm/regular

xs/black

xs/extrabold

xs/bold

xs/medium

xs/regular

2xs/black

2xs/extrabold

2xs/bold

2xs/medium

2xs/regular

Code

Code

Code

السابق