Skip to main content

This is to anyone in the know. But I bet this will need the involvement of @Figma_Support. Please assist if you can or pass on to Dev on Call to assist.


Could someone please share the algorithm here (be that in text description of the algorithm or pseudocode) so that I can correctly go from the JSON properties ‘layoutMode’, ‘primaryAxisAlignItems’, ‘counterAxisAlignItems’, and any others that factor into developing the following styles, to:


flex: none;

 (and? / or?)

display: flex;



flex-direction: row | column;



align-items: flex-start | center | flex-end;

 (or?)

align-content: normal | flex-start | center | flex-end;



justify-content: flex-start | center | flex-end;



<any others here>

I think I’m correct that flex-direction is controlled by Figma property layoutMode: HORIZONTAL | VERTICAL. Yes? But it seems a bit harder to be 100% sure how the other style values above are arrived at.


Are things like this already documented somewhere? I have looked but have not found it. Please advise if that is the case and I’ll happily look it up there.


Provided by someone on this community forum: A Complete Guide to Flexbox | CSS-Tricks - CSS-Tricks


That is helpful. But my question is not about the flexbox css et al. My question is regarding how to properly map from Figma’s internal plug-in or API properties to the CSS equivalents of the flexbox related styles displayed under Inspect > Code > CSS.


I am in the process of writing a programatic compliance check validator to ensure our programmers develop their UI page layouts and styles in full conformance to the design within Figma given to them by our Design Team. Therefore I’m going to the source, you, to ensure my algorithm accounts for all the conditions you account for in producing the flexbox relates styles.


Thank you,

Steve

Thru inspection of all configuration permutations of Auto Layout (all, that I care about at least) I believe I have the basis to form a complete algorithm. I also hope others find this helpful too, as much as I do. (it is a lot to get thru, I know. But, only because this is exactly how complex Auto Layout actually is! )


@Figma_Support , can you, or you get someone in development, to have a look at this?



  • Correct me if I got anything wrong.

  • And/or supplement if I missed any of the permutations.

  • Add any CSS name:value mappings I may have missed that are involved with Flexbox definitions from Auto Layout.


Much Thanx!



Here we go…


When FIGMA Auto Layout layoutMode === “HORIZONTAL” ::


FIGMA auto layout grid selection:


|_______________________________|_______________________________|_______________________________|

| primaryAxisAlignItems: MIN    | primaryAxisAlignItems: CENTER | primaryAxisAlignItems: MAX    |

| counterAxisAlignItems: MIN    | counterAxisAlignItems: MIN    | counterAxisAlignItems: MIN    |

|_______________________________|_______________________________|_______________________________|

| primaryAxisAlignItems: MIN    | primaryAxisAlignItems: CENTER | primaryAxisAlignItems: MAX    |

| counterAxisAlignItems: CENTER | counterAxisAlignItems: CENTER | counterAxisAlignItems: CENTER |

|_______________________________|_______________________________|_______________________________|

| primaryAxisAlignItems: MIN    | primaryAxisAlignItems: CENTER | primaryAxisAlignItems: MAX    |

| counterAxisAlignItems: MAX    | counterAxisAlignItems: MAX    | counterAxisAlignItems: MAX    |

|_______________________________|_______________________________|_______________________________|

Above Maps to CSS Below:


In All Cases when Auto Layout layoutMode === "HORIZONTAL" :: 

 display: flex;

  flex-direction: row;

|_______________________________|___________________________|_____________________________|

|  align-items: flex-start;     |  align-items: flex-start; |  align-items: flex-start;   |

|  justify-content: flex-start; |  justify-content: center; |  justify-content: flex-end; |

|_______________________________|___________________________|_____________________________|

|  align-items: center;         |  align-items: center;     |  align-items: center;       |

|  justify-content: flex-start; |  justify-content: center; |  justify-content: flex-end; |

|_______________________________|___________________________|_____________________________|

|  align-items: flex-end;       |  align-items: flex-end;   |  align-items: flex-end;     |

|  justify-content: flex-start; |  justify-content: center; |  justify-content: flex-end; |

|_______________________________|___________________________|_____________________________|

When FIGMA Auto Layout layoutMode === “VERTICAL” ::


FIGMA auto layout grid selection:


|_______________________________|_______________________________|_______________________________|

| primaryAxisAlignItems: MIN    | primaryAxisAlignItems: MIN    | primaryAxisAlignItems: MIN    |

| counterAxisAlignItems: MIN    | counterAxisAlignItems: CENTER | counterAxisAlignItems: MAX    |

|_______________________________|_______________________________|_______________________________|

| primaryAxisAlignItems: CENTER | primaryAxisAlignItems: CENTER | primaryAxisAlignItems: CENTER |

| counterAxisAlignItems: MIN    | counterAxisAlignItems: CENTER | counterAxisAlignItems: MAX    |

|_______________________________|_______________________________|_______________________________|

| primaryAxisAlignItems: MAX    | primaryAxisAlignItems: MAX    | primaryAxisAlignItems: MAX    |

| counterAxisAlignItems: MIN    | counterAxisAlignItems: CENTER | counterAxisAlignItems: MAX    |

|_______________________________|_______________________________|_______________________________|

Above Maps to CSS Below:


In All Cases when Auto Layout layoutMode === "VERTICAL" ::

   display: flex;

   flex-direction: column;



|_______________________________|______________________________|_______________________________|

|  align-items: flex-start;     |  align-items: center;        |  align-items: flex-end;       |

|  justify-content: flex-start; | justify-content: flex-start; |  justify-content: flex-start; |

|_______________________________|______________________________|_______________________________|

|  align-items: flex-start;     |  align-items: center;        |  align-items: flex-end;       |

|  justify-content: center;     | justify-content: center;     |  justify-content: center;     |

|_______________________________|______________________________|_______________________________|

|  align-items: flex-start;     |  align-items: center;        |  align-items: flex-end;       |

|  justify-content: flex-end;   | justify-content: flex-end;   |  justify-content: flex-end;   |

|_______________________________|______________________________|_______________________________|

OVERRIDES to the above when using Advanced Layout:


1)  IF:  Spacing Mode === 'Space Between'

         So that JSON primaryAxisAlignItems === SPACE_BETWEEN

    THEN:

        justify-content: space-between

    ELSE, DEFAULT:

        Figma Spacing Mode === 'PACKED' and

        CSS justify-content value is defined by the tables above

FIGMA auto layout grid selection when layoutMode === “HORIZONTAL”::


|______________________________________|

| primaryAxisAlignItems: SPACE_BETWEEN |

| counterAxisAlignItems: MIN           |

|______________________________________|

| primaryAxisAlignItems: SPACE_BETWEEN |

| counterAxisAlignItems: CENTER        |

|______________________________________|

| primaryAxisAlignItems: SPACE_BETWEEN |

| counterAxisAlignItems: MAX           |

|______________________________________|

Above maps to the following CSS ::


|__________________________________|

|  align-items: flex-start;        |

|  justify-content: space-between; |

|__________________________________|

|  align-items: center;            |

|  justify-content: space-between; |

|__________________________________|

|  align-items: flex-end;          |

|  justify-content: space-between; |

|__________________________________|

FIGMA auto layout grid selection when layoutMode === “VERTICAL” ::


|______________________________________|______________________________________|______________________________________|

| primaryAxisAlignItems: SPACE_BETWEEN | primaryAxisAlignItems: SPACE_BETWEEN | primaryAxisAlignItems: SPACE_BETWEEN |

| counterAxisAlignItems: MIN           | counterAxisAlignItems: CENTER        | counterAxisAlignItems: MAX           |

|______________________________________|______________________________________|______________________________________|

Above maps to the following CSS ::


|________________________________|____________________________|______________________________|

|  align-items: baseline;        |  align-items: baseline;    |  align-items: baseline;      |

|  justify-content: flex-start;  |  justify-content: center;  |  justify-content: flex-end;  |

|________________________________|____________________________|______________________________|



2)  IF:  Auto Layout layoutMode === "HORIZONTAL" AND Text baseline alignment is CHECKED

    THEN:

FIGMA auto layout grid selection ::


|_________________________________|_________________________________|_________________________________|

| primaryAxisAlignItems: MIN      | primaryAxisAlignItems: CENTER   | primaryAxisAlignItems: MAX      |

| counterAxisAlignItems: BASELINE | counterAxisAlignItems: BASELINE | counterAxisAlignItems: BASELINE |

|_________________________________|_________________________________|_________________________________|

Above maps to the following CSS ::


|__________________________________|__________________________________|__________________________________|

|  align-items: flex-start;        |  align-items: center;            |  align-items: flex-end;          |

|  justify-content: space-between; |  justify-content: space-between; |  justify-content: space-between; |

|__________________________________|__________________________________|__________________________________|



3) IF: Advanced Auto Layout Mode Both

        Spacing Mode === Space Between and

        Text Baseline Alignment is CHECKED

   THEN:

FIGMA auto layout grid selection when layoutMode === “HORIZONTAL” (mandatory for Baseline Alignment) ::


|______________________________________|

| primaryAxisAlignItems: SPACE_BETWEEN |

| counterAxisAlignItems: BASELINE      |

|______________________________________|

Above maps to the following CSS ::


|__________________________________|

|  align-items: baseline;          |

|  justify-content: space-between; |

|__________________________________|

(no other combinations are possible)

@Figma_Support any update on this ??

Reply


Terms & ConditionsCookie settings