![]() In this video, I design a simple card in Sketch and then the same in Framer.Ĭonnecting code overrides to a button in Framer X I couldn’t figure out how to best explain why in words. However, over time, this felt natural and more flexible. Initially, this skewed my mental model of how ‘layers’ worked and I struggled. ![]() Furthermore, this parent div container’s properties can affect it’s children as well.ĬSS-Tricks clearly explains the CSS Box Model and how that applies to (web) design. In fact, your “Artboard” is also a Frame. Doing so makes that Frame the automatic parent of those elements. You can drag and drop other elements inside this Frame. Concept of nesting Frames in FramerĮach Frame is an empty container that can house other Frames or elements. While the Layers panel exists, each “layer” in Framer is actually a Frame (no pun intended). It was a nice way to organize and understand how to build mocks. This was my understanding with Sketch (no quarrels here). Traditionally, layers represent individual elements in our Artboards. I was confused with the concept of Frames vs Layers first. Testimonial as seen on Frames over layers For that, I’ll have to recalculate the list’s width itself to get 20px margins on either side. What’s more important is that the list maintains a 20px ( safe area guides) margins on either side. I don’t care about the width of the list itself. For example, if I’m designing a list on iOS. However, I find some quirks with this in Sketch.įor any element to be resizable, I need to MANUALLY setup every constraint! Moreover, oftentimes, I care about setting constraint values over the specific width or height of an element. Constraints pins - Xcode uses Auto-Layout (left), Sketch uses resizing pins (right) This feature (of using constraint pins) is familiar across other tools too. Sketch mimics a simplified version of Xcode’s AutoLayout. To clarify, responsive design in practice (as a designer) is the ability to create and set up on elements on canvas to resize in specific ways across different screen sizes. So without further delay, here are some of the reasons why I switched to Framer X. Framer X interface allows a Day or Night Mode ![]() Hopefully, towards the end of this article, you’re as excited as I am to jump into this new hybrid tool. In this article, I’ll show you a comparison between common tasks I’d do in Sketch which, trust me, is similar in almost every other major tool (yes, Figma and XD) and how Framer X handles the same. John Traver | Framer X: to future or not to future If you are a designer who can code or a coder that can design, Framer X will be your very best friend. I had to use it myself to see what the hype was about. Moreover, there was a slew of features unheard of that highly piqued my curiosity. I found myself seamlessly doing both together. Designing and prototyping weren’t two different modes. Unlike previous versions, I could do everything I could I Sketch (and perhaps more!) without writing a single line of code. The new Framer X (website) - įramer X is a complete overhaul with a low entry barrier for designers. Instead, it was Framer X and everything about it seemed different.įramer X is a smart interaction design tool for realistic prototypes. Given its ease of use, I had quickly forgotten Framer.įast forward to 2019 and I didn’t see Framer JS around anymore. A simple, timeline-based interaction design tool. It still didn’t replace my daily design tool yet. However, despite that, it was so time-consuming to build something in Framer JS that it was my last resort for prototyping. Framer JS used CoffeeScript, a preprocessor that was friendly and simpler to write so I braved and jumped right in. Now, at the time, for logic-based complex prototyping, this was the tool for the job. The interface for Framer Classic or Framer JS. Yes, the old Framer Classic that scared almost every designer (including me) which required writing code. However, for prototyping, I always found Framer JS more suited. I have been an avid Sketch user for over 6 years now. Moreover, this isn’t a hate post for other design tools (each one excels in its own right). All opinions are purely based on my personal experiences with the tool. I haven’t been paid by Framer to write this. After using it for quite a while, I’m convinced that it is a powerful new design tool that closes that gap considerably and encourages tighter collaboration. As a developer turned designer, I have always been fascinated with ways to close the gap between design and development.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |