However, this can’t just be implemented as minimum height on the element: as the text resizes, the minimum height has to grow to accommodate the extra text. This is crucial to ensure that for example the footer doesn’t run into the main content of the component. One thing to point out in this clip is that the footer stops moving at a certain point - in other words, the document stops becoming shorter at a fixed point. Let’s decide on how we want to react when content within one of our elements changes. What if we take a combination of top-down and bottom-up approaches? In contrast, what we so far have done is top-down layout, in which we specify how much space the top-most layer should take up, and then place the elements that make up this higher layer within it. Stacking divs one atop the other based on how much content is in each one is an approach that we’ll call bottom-up layout, meaning we start from the lowest building blocks (say, pieces of text) and build up the structure by composing those blocks together to get the shape of the higher level layers. This behavior doesn’t work in our situation because everything is absolutely positioned, and so they’re locked in place!
![figma to react figma to react](https://fiverr-res.cloudinary.com/images/t_thumbnail3_3,q_auto,f_auto/gigs2/266605330/original/19eeb9b65cc8764c4032c2dfd203d7ba36abaa22/convert-figma-to-responsive-react-psd-to-react-xd-to-react.jpeg)
If you stack two div elements one on top of the other, changing the height of the first div will automatically push the second div down.
![figma to react figma to react](https://fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/268871985/original/eb1f41b23e63de8b867d3a496c40886f32bb159e/figma-to-react-psd-to-react-psd-to-html-react-js-developer-react-frontend.jpg)
The problems above happen to be what HTML itself is adept at solving. For instance, how would we adapt if we wanted to add another list element dynamically, or if the text that goes in that list element exceeds the dimensions of the original box? Layout: top-down or bottom-up? This deals with the list container changing size and shape, but not with the list contents themselves changing. Applying constraints out of the box to absolute positioning is a direct mapping to the left, right, top, and bottom attributes in CSS. The parent in this case is the rectangle surrounding “List item 1”. This says that this particular text element should be positioned relative to the top of the parent, and should stretch with the parent horizontally such that the left and right margins are preserved. Doing so, we might get something like this (notice that the frame is still stuck to the top left corner): From this, one idea would be to take each node, render it as an element, and then use CSS absolute positioning to place it on the page.
![figma to react figma to react](https://cdn.sanity.io/images/599r6htc/production/bb40f9c7a4b8c4afbb58b612170bb302f6c232fe-1414x882.png)
Using absoluteBoundingBox, we can figure out exactly where each node currently lives on the canvas, and how much space it occupies. Each node in a document has a property called absoluteBoundingBox. The Figma API provides a solid foundation for determining layout. Composing these elements is a process called layout in which we specify where each element should be placed and how it should be sized relative to every other element. Use absolute layout to position nodesĪ better approach would be to break the frame down into its constituent pieces, convert each piece into a DOM element like a or an, and then compose those DOM elements together. The first hurdle to Figma to React was creating React components that look like the designs they represent - otherwise, there’s not much point to any of this.
#Figma to react code#
In other words, it would be great to have our functional code be reusable across designs, just like how you might reuse React components. For example, in the sorted list example above, it would be nice if we could design a new sorted list and easily attach the code we’d already written to it. The second but related goal was to make it easy to attach existing functional code to new designs.
#Figma to react update#
How amazing would it be to update a design in Figma, and then click a button to sync those design changes to your website? This also means that we need to ensure updating your design doesn’t overwrite any custom code that we have written to make the website or app functional, and that it naturally lends itself to having Figma-generated design code and functional code live separately in neat compartments. One was to have the design for components we generate to live as much in Figma as possible. We wanted to solve two main problems when building Figma to React.
![figma to react figma to react](https://miro.medium.com/max/1200/1*fmAIH-ozkv5wKfBg-ec7Dg.png)
(Too excited to read this blog post and want to play around with our read API right now? Check out our Developers page!) If you want to follow along, we’ve open sourced the code at GitHub. We’re loving the enthusiasm and thought we’d share our own attempt at a React converter, discuss some of the subtle design choices and technical solutions that went into its development, and expound on the vision that motivated its creation.