Slide 15
Slide 15 text
CaptionsLIVE Raw Transcript
_____________________________________________________________________________________________________
Note that this is an unedited transcript of a live event and therefore may contain errors. This transcript is the
joint property of CaptionsLIVE and the authorised party responsible for payment and may not be copied or
used by any other party without authorisation.
Page 48
happens from a handover stand point. When you go in Figma and layout
things, especially if you are using auto layout, there is work that we do to
approximate and create an equivalent representation of that for code. In
this example, virtually all combinations of what you can do with the
layout, mapped to one of the primitives in our system, Box, Stack and
Inline. Let me show you specific examples but just to draw a comparison
to the typography, you can use the same approach but in this case, we
use tokens more directly.
Here we have a design that are is specifying that a particular frame
that they have selected should have a vertical layout and that means it
maps perfectly to the Stack representation that we have in code, you
could just use a component like that. One more for good measure. We
have a horizontal layout in this type of situation but it indicates that it
wraps, so you can see the square there. This becomes an Inline with our
system and we achieve that so it matches what Figma has. That is great.
Naturally, some of you could be thinking with your hats here and thinking
there are only so many combinations of layout or things like this that we
can express with a high level primitive in code. That is fair. For more
bespoke experiences we still want makers to maximise their creativity,
while still adhering to the system in place. Remember what Eva
mentioned, we want to keep everyone in the system still.
Our solution for these types of cases is called Xcss. To better
understand Xcss, think about vanilla CSS first, even if you are not overly
familiar with CSS, it handles all your styling needs but with all that power,
even if you have this support from variables, there is little guidance that
you receive as an engineer in context. CSS is often enough, the wild west
for what the web site looks like. Xcss, on the other hand, is explicitly
opinionated. We offer makers the power of customer styles within the
guard rails of our system. We get the best of both worlds, linking back to