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
