Figma Workshop
Lead by Jack Freeman
Personal Piece: Apps for Good App - FineTuned
5 min read 16.03.24
Our Figm a workshop led by Jack, a seasoned motion designer with a knack for creating visually stunning and interactive prototypes. Jack’s expertise in Figma proved invaluable as he taught us how to set up files, craft style guides, and animating components to elevate our design work. The foundation of any successful design project lies in its organization, Jack emphasized the importance of structuring Figma files meticulously to streamline the prototyping process by using style guides and variables for type and colour, allowing for a drag and drop style of working, very efficient. He introduced us to the concept of creating dedicated pages for different design elements such as buttons, icons, and typography. This approach not only keeps the workspace clutter-free but also facilitates easier editing and updating of components across the entire work document. Jack also stressed the significance of naming conventions and layer organization. By adopting a consistent naming system for layers and components, we can minimize confusion and expedite the hand off process to developers easily in industry. He shared invaluable tips on utilizing Figma’s advanced features like component variants and auto-layout to create adaptive and responsive designs effortlessly.
One of the highlights of the workshop was Jack’s walkthrough of his process for clients, offering us a rare glimpse into the real-world application of Figma in industry settings. He shared practical examples from his portfolio, illustrating how he leverages Figma to collaborate with clients, iterate on designs, and deliver compelling user experiences. Jack emphasized the importance of understanding clients’ goals, target audiences, and business objectives to create impactful and relevant designs. His approach to app building provided us with valuable insights into the nature of digital product design and the pivotal role of prototyping tools like Figma in shaping the design industry of the future.
For my personal application of the learnings from Jack's workshop, I elevated the animations and transitions in my app project, adjusting layouts and implementing design styles, animations and smart transitions to create a realistic and professional looking interface model.
Component Libraries
Components are the key to any app design. The library includes everything from text boxes to graphs, timers, lists, calendars and anything else you might need to design an app.
The libraries are swapable across an entire document meaning if you change something in one place, it will change everywhere in the document, saving time and creating an efficient process for rigid A/B testing of designs.
Variants
Variants are groups within components which allow them to change format. For example my app uses a counter with a progress bar, variants are used here to up the level of the progress bar every time the number value increases resulting in a multi function component with data display capabilities. You can create unlimited variants for components so the possibilities are endless here for dynamic usage.
Prototyping
This is the bulk of what makes Figma so powerful. Its prototyping feature allows for low/no code inputs to made for buttons and other components in the file. It can turn your flat file into a fully working app by coding certain inputs on detection of things like clicks, taps and swipes. This really brings your app to life, and again you can test as many variations as you like with different transitions and speeds.
Variables
Variables are some of the more complicated items to work with in Figma. Variables work on a conditional basis, so if one thing happens Figma knows to activate something else. For example when my counter value goes up by 1, a variable tells my counter variant to change the progress bar by 1 to increase its value to match the number. This can be repeated each time using multiple variants and conditional prompts.
Smart Animations
Smart animations are another efficient feature for Figma, allowing us to animate components based on detected size, colour and shape. This feature allows for dynamic transitions between similar components on different screens, creating seemless transitions that would take lots of code and back end work to do otherwise. The animations themselves can be eased in different ways to create a snappy or smooth transition, then the Figma smart animate will make sure similar components get an extra smooth transition.
Featured Artist: Jack Freeman
Profession: Brand Identity and Motion Design Freelancer
Jack is a motion design, brand strategy and Figma specialist. His work spans across a range of industries and disciplines including prototyping, visual identity and motion graphics for brands and businesses. His work captures a brand, quite literally in motion, using creative, smooth and unique editing to craft motion work that tells a story, while also standing out amongst the static competition in the market. Jack was a great teacher for our workshop and I will continue to follow and learn from him as he progresses with his freelance career.
