#XD RESPONSIVE RESIZE HOW TO#
Perhaps I did, in fact, not see how to do what I needed to. I kept feeling like I must be missing something as other aspects of its feature set are impressive. That said, I didn’t spend long looking at Figma. There is a lot to like about Figma, but for creating a responsive design system, it just wasn’t the right tool. However, from a responsive design system perspective, it felt like a step back from Sketch 58. However, I couldn’t find a way to make wrapping text force content below it further down the page.Īlso, like Sketch, it didn’t allow me to adapt the layout of a component (Figma’s equivalent of a symbol).ĭon’t get me wrong. Unfortunately, Figma seemed even more limited than Sketch in many ways. Building a Responsive Design System in Figma Sketch was so nearly there, but in the end, I decided to look elsewhere, and so I turned my attention to Figma. In effect, it breaks the power of a design system. Of course, the downside of this is the fact that global updates you make to the symbol will not be reflected across the detached element.
The only way around this was to detach the symbol and create a new layout. The biggest of which is the fact that you cannot adapt the layout of a symbol for different screen widths. Other than a few overrides, there are many limitations of what you can do within a symbol. What ultimately let Sketch down was the limitation of symbols and its lack of support for breakpoints. That said, it is a huge step forward, and it’s great to see native support. Unfortunately, it does have some limitations, the biggest of which is that it seems to stop working once you have symbols nested. At first glance, Sketch did successfully overcome this problem with the content being pushed down the page as text expanded. I, therefore, had high hopes when Sketch released version 58 a few days ago. Anima is a powerful plugin that will accommodate elements expanding, by pushing elements below it down the page. The problem is that although a superb plugin, it could sometimes be buggy and didn’t always respond predictably. The workaround to this problem until recently was to use a plugin called Anima. However, you cannot do that if the elements are held within a symbol, which will be required when building a design system. Of course, that can be fixed by resizing elements manually. Adding a longer headline has always lead to elements overlapping each other in the past. For example, if you have a long heading that wraps onto a second or third line, it will overlap items lower on the page. Sketch has supported basic responsiveness for some time.īeyond that, things start to break down. That makes it relatively straightforward to add a considerable degree of responsiveness. Like all of its competitors, you can pin content to the left or right edge and fix the width or height of elements. Sketch has supported a degree of responsiveness for some time. How Sketch Handles Responsive Design Systems I began by looking at Sketch, as this was the tool I was most familiar with. The ability to adapt layout positioning based on breakpoints. The way a browser pushes content down the page as text flows onto additional lines. These where: The scaling of elements to fit the available area. To ascertain the capability of these three tools for building responsive interfaces, I decided to look at whether these tools could replicate three responsive browser behaviours. The Three Characteristics of Responsiveness To answer this question I carried out a short review of the three primary UI design tools: Which tool would be best for building a responsive design system? See Also - How to create a pattern library and why you should bother
They would need a design system that helped them make the right decisions and gave them a realistic sense of how the final site would behave.Īny design system I built would need responsiveness baked in, as this is an area print designers often struggle with. They knew these people had little experience with UI design and none with coding. They had a team of graphic designers who needed to be able to quickly mockup pages. However, that was not the right fit here. It is important to stress that as the best place to create a responsive design system is in HTML, CSS and Javascript, as that will behave just like the final website, unlike a graphics tool. My job was to create the design system in a graphics package, not to generate the code. The best place to create a responsive design system is in HTML, CSS and Javascript, as that will behave just like the final website, unlike a graphics tool. However, because they had no real UI experience, they had no preference over which tool I used to do the job. I was asked to create a design system for a client (nothing unusual in that). I found myself in a somewhat unique position recently. Listen to this post and subscribe using Apple Podcasts, Google Play, Spotify or RSS
0 kommentar(er)
