How and why we started making UI in Figma instead of Photoshop

,  Adobe Photoshop  , . , ,  Figma, Adobe XD, Sketch  .

, , , , , , . . , , , .

2018 , Dino Squad , :

1. Figma;

2. Photoshop, ;

3. Photoshop Figma «» , -.

, : Figma → Photoshop → Figma. - , . , Figma , .

, , , , .

-, Photoshop . - . Figma , , .

-, Photoshop , . Figma , , .

— — Figma . — , , , . : (, , ), . Photoshop .

, — . , UI-kit .

, , Figma .

, . 7 ( ). , , .

: , , , . .

Photoshop Figma

, . -, , . -, .

:

•  Tokens  ;

•  Library  ;

•  Screens  .

, .

1.

— , .

Figma

Color Styles, Text Styles Effects Styles.  .

, Figma. — .

, — .

. , Photoshop HEX, Figma . — .

— , , — . , : , , . . : , , -, .

: , . , . . , .

- . 7 , 7. 7: 28, 35, 42, ..., 84.

2.

— , . , , , , .

— , . ( ) Figma . , . .

. : , «GroupName / AssetName».

, : Library / Assets / GroupName / AssetName.

3.

Figma ( ), , . , , .

:

1. ;

2. , ;

3. , , ;

4. , .

, , . , «_» :

Library / Cards / Lots / _BaseLot

, , . :

Library / Cards / Lots / LotHeart

Library / Cards / Lots / LotLeaf

Library / Cards / Lots / LotDrop

, Figma, .

.

Photoshop : . Figma , .

, Photoshop , . — .

:

• ;

• , , ;

• , , , . , ;

• Constraints ;

• .

, . , , . - Photoshop, . , . , . , , Figma , .

, Figma , Photoshop. «» . , , . , :

• Photoshop , Figma — ;

• Photoshop , Figma — .

Figma Unity

Figma , Unity. , Unity Photoshop.

-, Figma API, JSON. Figma.

-, Figma , , JSON - .

-, , Unity, Figma — UI- .

-, Figma , Nested Prefabs Unity.

, Figma JSON. Figma  . , , . JSON .

using System.Net;
using System.IO;
using UnityEngine; 

...

private void FileRequest()
{
    var request = WebRequest.Create("<https://api.figma.com/v1/files/>" + /* file name */);
    request.Headers["X-Figma-Token"] = /* figma token */; 

    var response = request.GetResponse();
    var json = ""; 
    using (var stream = response.GetResponseStream())
    {
        using (var reader = new StreamReader(stream))
        {
            string line;
            while ((line = reader.ReadLine()) != null)
            {
                json += line;
            }
        }
    }

    Debug.Log(json); 
    response.Close();
}

JSON, , JSON, , uGUI-.

{
  "components": {},
  "document": {
    "children": [
      {
        "backgroundColor": {
          "a": 1,
          "b": 0.8980392156862745,
          "g": 0.8980392156862745,
          "r": 0.8980392156862745
        },
        "children": [],
        "exportSettings": [],
        "id": "0:1",
        "name": "Page 1",
        "type": "CANVAS",
        "visible": true
      }
    ],
    "id": "0:0",
    "name": "Document",
    "type": "DOCUMENT",
    "visible": true
  },
  "schemaVersion": 0
}

, .  Settings  Figma  Personal Access Tokens.

. , : www.figma.com/file/NNNN/FileName,  NNNN.

, Figma, , Photoshop API psd-. psd : .

Figma 4 , .     2 : «» Figma: .

    : , , .   , UI.

    , . , ( ) . Figma.

. , .