Best match

Most recent

It’s been over a year since Adobe announced that it intended to buy Figma for $20 billion, yet the two companies are still separate entities.

https://www.bing.com/th?id=OVFT.v_fIaHmXaREplpd3qnxMSi&pid=News

TC+ Roundup: What happened to the Adobe-Figma deal?

https://www.bing.com/th?id=ODF.M4e-NwwkSCFuKsTp672mxA&pid=news

TechCrunch

Adobe Systems

NASDAQ

Investor

Robbins LLP reminds investors that a shareholder filed a class action lawsuit on behalf of persons and entities that purchased or otherwise acquired Adobe Inc. (NASDAQ:ADBE) common stock between July 23,

Adobe Inc. (ADBE) Shareholder Notice: Robbins LLP Reminds Investors of Class Action Against Adobe Inc.

https://www.bing.com/th?id=ODF.LnWAsYULk4XKw3udkffflQ&pid=news

Benzinga.com

Flink

Aditi Gupta discusses the design choices made early on during service development ... Carl Sverre explores how popular apps like WhatsApp, Figma, and Linear elevate their user experience and facilitate seamless collaboration by harnessing the power of ...

Goldsky’s Streaming-First Architecture for Blockchain Data with Flink, Redpanda and Kubernetes

InfoQ

Bragar

Business Wire

Bragar Eagel & Squire, P.C., a nationally recognized stockholder rights law firm, announces that a class action lawsuit has been filed against Ado

https://www.bing.com/th?id=OVFT.aBF2y_KMVwBadgnyEsIDSy&pid=News

ADOBE ALERT: Bragar Eagel & Squire, P.C. Announces that a Class Action Lawsuit Has Been Filed Against Adobe Inc. and Encourages Investors to Contact the Firm

https://www.bing.com/th?id=ODF.smsuZRfJOwQGYjS9zfz9sw&pid=news

Insider

Creative Bloq is holding a free webinar with Figma to discuss the future of UI and UX design. We'll be sitting down with experts to unpick changes in the disciplines and how to approach UI and UX in today's climate.

https://www.bing.com/th?id=OVFT.pDQ5LTiyOwIuol6wpHdbSC&pid=News

Free webinar: An insider's guide to UX and UI with Figma

https://www.bing.com/th?id=ODF.UM0amhg3WAObCEGqc4w_Cw&pid=news

Yahoo

Regulator

Competition and Markets Authority needs more time to consider 'complex case', new deadline set for February 2024 Updated Britain's competition regulator is extending into 2024 its prolonged investigation of Adobe's $20 billion purchase of Figma,

https://www.bing.com/th?id=OVFT.cgZImGwzkihZRufKvoZRci&pid=News

Figma

Regulator delays Adobe's $20B buy of Figma, derails deal deadline

The Register on MSN.com

Deadline

The U.K. extended its probe into Adobe Inc's ADBE $20 billion takeover of Figma Inc, citing more time to look at new submissions from the companies. The Competition and Markets Authority pushed back the statutory deadline to February 25 from the end of the year. They will publish the provisional findings in late November.

https://www.bing.com/th?id=OVFT.f_Jf67wFhtPWsbjR_YOn4i&pid=News

Adobe's $20B Figma Deal Deadline Extended - What's Going On?

Britain's competition regulator has announced an extension of eight weeks for its ongoing investigation into Adobe's $20bn (£16.5bn) acquisition of cloud-based design platform Figma.

https://www.bing.com/th?id=OVFT.TIM1uTV2231_VICGGc_w5C&pid=News

CMA pushes Adobe’s Figma deal probe deadline back eight weeks

https://www.bing.com/th?id=ODF.WK13L95Ci2T09_VP-OSs8g&pid=news

City AM on MSN.com

The UK probe into Adobe Inc.’s $20 billion takeover of Figma Inc. was extended after the antitrust watchdog said it needed more time to look at new submissions from the companies.

https://www.bing.com/th?id=OVFT.AvT3Dsbmv1Dl6OjPPA1ybC&pid=News

Adobe’s $20 Billion Figma UK Deal Probe Deadline Extended

https://www.bing.com/th?id=ODF.JRpbjhQKSgfe9BXmFtAAoA&pid=news

The Washington Post

Figma is a collaborative web application for interface design, with additional offline features enabled by desktop applications for macOS and Windows.

Figma is a design platform for teams who build products together. Born on the Web, Figma helps teams create, share, test, and ship better designs from start to finish. Whether it’s consolidating tools, simplifying workflows, or collaborating across teams and time zones, Figma makes the design process faster, more efficient, and fun while keeping everyone on the same page.

Are you tired of spending countless hours and resources on developing mobile apps from scratch? Look no further, as a revolutionary solution is here to turn your dreams into reality. Introducing no-code platforms that effortlessly transform your Figma designs into functional mobile apps. With the increasing demand for mobile applications, businesses are constantly seeking cost-effective and efficient ways to bring their ideas to life. Traditional app development can be time-consuming and requires technical expertise. However, no-code platforms eliminate these barriers by allowing designers to seamlessly convert their Figma designs into fully functional mobile apps without writing a single line of code. Imagine being able to bring your app ideas to life without the need for complex coding languages. No-code platforms enable you to design, prototype, and deploy your app in a matter of minutes, drastically reducing development time and costs. Whether you are a developer looking to speed up your workflow or an entrepreneur with a vision, no-code platforms are the game-changers you've been waiting for. Stay tuned as we dive into the world of no-code platforms and discover how you can transform your Figma designs into functional mobile apps effortlessly. Say goodbye to coding roadblocks and hello to a faster, more cost-effective way to make your app dreams a reality. Benefits of Using No-Code Platforms for App Development No-code platforms have revolutionized the app development process, offering numerous benefits to both developers and entrepreneurs. Let's explore some of the key advantages of using no-code platforms for app development. First and foremost, no-code platforms eliminate the need for manual coding, making it accessible to individuals with little to no coding experience. This means that designers, entrepreneurs, and even marketing professionals can bring their app ideas to life without having to rely on developers or coding specialists. By removing the coding barrier, no-code platforms empower individuals to take control of the app development process. In addition, no-code platforms significantly reduce development time. Traditional app development involves coding each feature from scratch, which can be a time-consuming process. With no-code platforms, developers can leverage pre-built components and templates to quickly build and deploy functional apps. This not only accelerates the development process but also allows for rapid prototyping and iteration. Furthermore, no-code platforms offer cost-effective solutions for app development. Hiring developers or outsourcing app development can be expensive, especially for startups or small businesses with limited budgets. No-code platforms provide an affordable alternative by allowing businesses to create their apps in-house, without the need for additional resources or expensive development teams. This cost-saving aspect makes no-code platforms a game-changer for businesses of all sizes. In summary, the benefits of using no-code platforms for app development are numerous. From accessibility and reduced development time to cost-effectiveness, no-code platforms offer a powerful solution for turning app ideas into reality. Overview of Figma and Its Role in Designing Mobile Apps When it comes to designing mobile apps, Figma has emerged as a popular tool among designers and developers. Figma is a cloud-based design tool that allows for collaborative design, prototyping, and development. Its intuitive interface and powerful features have made it a go-to choice for many app designers. Figma offers a wide range of design capabilities, including the ability to create interactive prototypes and design system components. Its real-time collaboration feature enables multiple team members to work on a design simultaneously, making it ideal for remote teams or designers working in different time zones. One of the key advantages of using Figma for app design is its seamless integration with no-code platforms. Figma designs can be easily exported and imported into no-code platforms, allowing designers to transform their static designs into fully functional apps. This integration eliminates the need for manual coding and streamlines the app development process. In addition, Figma's design handoff feature enables designers to share their designs with developers, ensuring a smooth transition from design to development. This collaboration between designers and developers is crucial for creating a seamless user experience and ensuring that the final app aligns with the original design vision. Understanding the Process of Turning Figma Designs Into Functional Apps Using No-Code Platforms The process of turning Figma designs into functional apps using no-code platforms is relatively straightforward and requires no coding experience. Let's walk through the steps involved in transforming your Figma designs into fully functional mobile apps. Export your Figma designs: Start by exporting your Figma designs in a format compatible with the chosen no-code platform. Most no-code platforms support importing designs in popular formats like SVG or PNG. Ensure that your designs are properly organized, and include all necessary design assets. Import designs into the no-code platform: Once you have exported your Figma designs, import them into the selected no-code platform. This process may vary depending on the platform but typically involves uploading the design files and selecting the desired screens or components to import. Map design elements to interactive components: After importing your designs, it's time to map the design elements to interactive components. No-code platforms provide a range of pre-built components that can be customized to match your design. This step involves linking buttons, input fields, and other interactive elements to their corresponding screens or actions. Define app logic and functionality: Once the design elements are mapped to interactive components, it's time to define the app's logic and functionality. No-code platforms offer visual interfaces or drag-and-drop editors that allow you to configure app behavior without writing code. You can define user flows, add animations, and incorporate complex logic to create a fully functional app. Test and iterate: After configuring the app logic and functionality, it's crucial to test the app to ensure everything works as expected. No-code platforms typically offer built-in preview or testing capabilities that allow you to simulate the app's behavior on different devices and screen sizes. Use this opportunity to identify any issues or areas for improvement, and iterate on your design if necessary. Publish and deploy your app: Once you are satisfied with your app's design and functionality, it's time to publish and deploy your app. Most no-code platforms provide options to generate app binaries or deploy apps directly to app stores. Follow the platform-specific instructions to create app builds or publish your app to the desired app store. By following these steps, you can transform your Figma designs into fully functional mobile apps using no-code platforms. This streamlined process allows for rapid app development and iteration, empowering designers and entrepreneurs to bring their app ideas to life in a fraction of the time. No-Code Platforms for App Development To transform Figma designs into working mobile applications without coding, various No-code platforms are available. Here are some of them: : Bravo Studio This platform allows you to convert Figma designs into functional mobile applications. It offers a streamlined development process, helping turn your designs into interactive prototypes with native features. Once your prototypes are ready, you can seamlessly publish them as fully functional apps​​. : Buzzy Buzzy is described as a No Code Native App & Website Builder, allowing the creation of fully working native apps, responsive websites, MVPs, or prototypes straight from Figma without any coding required. It supports real data, user-generated content, and live forms​. : Crowdbotics This platform facilitates the conversion of Figma files into real code. By importing your Figma designs into Crowdbotics, your designs are transformed into real React Native screens, enabling the development of mobile applications​. Moxly: Moxly provides a simplified pathway for turning your Figma designs into working mobile applications, aligning with the no-code/low-code development trend which significantly lowers the barriers to mobile app development. These platforms provide intuitive interfaces and processes to help convert your Figma designs into mobile applications without the need for coding skills, making the transition from design to app more straightforward. Tips for Optimizing and Customizing Your App on a No-Code Platform While no-code platforms offer a convenient way to transform your Figma designs into functional apps, there are still opportunities to optimize and customize your app to align with your specific requirements. Here are some tips to help you make the most out of your no-code app development journey. Understand platform limitations: Familiarize yourself with the limitations and constraints of the chosen no-code platform. Each platform has its own set of features, capabilities, and restrictions. By understanding these limitations, you can plan your app design and functionality accordingly. Customize app components: Most no-code platforms offer customization options for app components. Take advantage of these options to personalize your app's look and feel. Customize colors, fonts, and layouts to create a unique app experience. Leverage third-party integrations: Explore the third-party integrations offered by the no-code platform. These integrations can enhance your app's functionality and allow for seamless integration with external services or APIs. Optimize app performance: Pay attention to app performance and optimize where necessary. No-code platforms generate app code behind the scenes, and inefficient design or logic can impact app performance. Test your app on different devices and screen sizes to ensure a smooth user experience. Gather user feedback: Once your app is live, gather feedback from users and iterate on your design and functionality. Use analytics tools provided by the no-code platform to track user engagement and make data-driven decisions for app improvement. By following these tips, you can optimize and customize your app on a no-code platform, ensuring that your app meets your specific requirements and delivers a seamless user experience. Case Studies of Successful Mobile Apps Built Using No-Code Platforms and Figma Designs To truly understand the power of no-code platforms in transforming Figma designs into functional mobile apps, let's explore some real-world case studies of successful apps built using these technologies. - An app that connects food lovers with local restaurants Case Study 1: "Foodie Finder" Foodie Finder is a popular mobile app that allows users to discover and explore local restaurants. The app was built using a combination of Figma for design and Adalo for app development. Designers created stunning visual designs in Figma, and developers seamlessly translated these designs into a fully functional app using Adalo's no-code platform. The app's intuitive interface, seamless navigation, and real-time restaurant updates have made it a go-to choice for food enthusiasts. - A fitness tracking app for personalized workouts Case Study 2: "FitBuddy" FitBuddy is a fitness-tracking app that helps users achieve their fitness goals through personalized workouts. The app was created using Figma designs and Bubble's no-code platform. Designers crafted engaging workout interfaces in Figma, while Bubble's visual programming environment enabled developers to incorporate complex workout tracking and analytics features. FitBuddy's seamless integration with fitness wearables and personalized workout recommendations have made it a favorite among fitness enthusiasts. These case studies highlight the potential of combining Figma designs with no-code platforms to create successful and functional mobile apps. By leveraging the power of these technologies, you can bring your app ideas to life and make a meaningful impact in the app market. Conclusion and Future Possibilities of No-Code App Development With Figma No-code app development is not just a fleeting trend, but a substantial shift in the way digital products are created. Platforms like Figma, paired with no-code tools, are at the forefront of this evolution, enabling designers and non-technical individuals to transform ideas into functioning mobile apps swiftly. Here are some concluding remarks and future possibilities surrounding no-code app development with Figma: Democratization of App Development:
No-code platforms, when integrated with design tools like Figma, democratize app development. They lower the entry barrier, enabling a broader spectrum of individuals to contribute to app creation without needing to learn code. Faster Time-to-Market: With the ability to quickly transform Figma designs into working apps, businesses can significantly reduce the time to market for their products. This speed can be a competitive advantage in rapidly evolving markets. Cost Efficiency:
No-code development can also be more cost-effective as it requires less specialized knowledge and resources. The savings can be substantial, especially for startups and small businesses. Enhanced Collaboration:
These platforms foster better collaboration between designers, developers, and other stakeholders. The seamless transition from design to functioning app can streamline the feedback loop and improve the overall development process. Continuous Innovation:
The ease and accessibility of no-code platforms can spur innovation. As more people are able to develop apps, the influx of fresh ideas and diverse perspectives can drive the digital landscape forward. No-code development, backed by the powerful design capabilities of Figma, is poised to continue its upward trajectory, reshaping the digital creation landscape and opening up exciting new possibilities for individuals and businesses alike.

From Figma to Mobile: Unveiling No-Code Platforms for Seamless App Creation

Figma, a frontrunner in the design software arena, offers a plethora of plugins tailored to amplify its functionality and cater to the diverse needs of designers. These plugins, whether they're streamlining complex tasks or ushering in groundbreaking features, can be truly transformative in the design landscape. Dive into our curated list of the best Figma plugins that are making waves in the design community and discover how they can elevate your design process to new heights. : Enhancing Content Quality in Design Grammar Checker & Rewriter It's crucial that content is not only visually captivating but also grammatically accurate and clearly articulated. This is where the "Grammar Checker & Rewriter" plugin for Figma, developed by Linguix, steps in. It offers not just a multilingual grammar checker but also a rewriter, optimizing content in various languages including English, French, German, Spanish, Portuguese, and Polish. What sets this plugin apart is its real-time ability to detect grammatical errors and rewrite content to enhance it immediately. Writing mistakes or sentences that could be improved within a given Figma object are underlined. Users can apply corrections with a single click or expand them for more context. With such a tool by your side, you can ensure that your designs are top-notch, not just aesthetically but also in terms of content quality. : Elevate Your Designs with Stunning Imagery Unsplash Graphic content holds a crucial position in design, frequently determining the ambiance and feel of the entire endeavor. Acknowledging the significance of top-tier visuals, this tool for Figma surfaces as a revolutionary asset for designers. Crafted in partnership with Unsplash, this plugin grants users immediate entry to an extensive collection of stunning, high-definition images that are complimentary to utilize. No longer do designers need to toggle between multiple platforms or download images separately; with the Unsplash plugin, a plethora of stunning visuals is just a click away, right within the Figma workspace. This seamless integration not only streamlines the design process but also inspires creativity, allowing designers to experiment with different visuals effortlessly. By leveraging the power of Unsplash's diverse photo collection, designers can ensure that their projects stand out with unparalleled visual appeal. : Bridging the Gap Between Design and Development Figma to Code The transition from a visual prototype to functional code can often be a challenging process. Figam to Code offers a revolutionary tool that seeks to simplify this transition and foster a more collaborative environment between designers and developers. This powerful plugin allows designers to convert their Figma designs directly into usable code for various platforms, including HTML, Tailwind, Flutter, and SwiftUI. Gone are the days of tedious manual coding or misinterpretations of design elements. With Figma to Code, designers can ensure that their original vision is accurately translated into the final product, maintaining design integrity. Moreover, by automating the code generation process, this plugin not only speeds up project timelines but also reduces potential errors, ensuring a smoother and more efficient workflow. : Taking Design Demonstrations a Notch Higher Mockup In the domain of design, display is vital. It's not merely about crafting a captivating design, but also about presenting it in a manner that seizes its core and practicality. The Mockup plugin for Figma emerges as an invaluable tool in this context, enabling designers to transform their flat designs into beautiful, realistic mockups within seconds. With a vast library of device frames, from smartphones to desktop monitors, designers can effortlessly select the most suitable frame for their design, ensuring that their presentations are both visually appealing and contextually relevant. The plugin's intuitive interface and seamless integration with Figma make it a breeze to use, eliminating the need for external tools or software. : Streamlining the Process of Isolating Subjects Icons8 Background Remover For designers, the ability to seamlessly remove backgrounds from images is invaluable. The Icons8 Background Remover plugin for Figma offers users this precise capability, ensuring that designers can focus on their creative process without getting bogged down by the often tedious task of manual background elimination. By integrating advanced AI technology, this plugin can efficiently isolate subjects in images, making it a must-have tool for designers aiming for a cleaner and more professional look in their projects. Whether you're working on web designs, marketing materials, or any other visual content, the Icons8 Background Remover can significantly enhance the quality and clarity of your designs. : Infusing Creativity with a Vast Array of Artistic Assets Illustrations Having access to a diverse range of illustrations can be the difference between a good project and a great one. The Illustrations plugin for Figma steps in to fill this need, providing designers with a rich library of artistic assets right at their fingertips. This plugin boasts a collection of high-quality illustrations, spanning various styles and themes, ensuring that designers always have the perfect visual element for their projects. Whether you're looking to infuse a hint of playfulness, expertise, or anything in between, the Illustrations plugin presents a wealth of choices. It's a crucial instrument for those aiming to uplift their design endeavors and enchant their viewers with striking images. : Extracting the Essence of Visuals through Colors Image Palette Colors play a pivotal role in design, often setting the mood, tone, and overall feel of a project. The Image Palette plugin for Figma is a designer's ally in this realm, allowing for the extraction of dominant colors from any image seamlessly. By simply selecting an image within Figma, this plugin generates a palette that captures its core hues, providing designers with a harmonious set of colors to work with. This not only ensures visual consistency but also saves valuable time that would otherwise be spent manually picking colors. For designers aiming to create cohesive and visually appealing designs, the Image Palette plugin is an indispensable tool, bridging the gap between imagery and color theory. ** Figma has emerged as a go-to platform for designers worldwide. Its adaptability, supported by a plethora of extensions, guarantees that designers possess all the resources they require within reach. As the design realm keeps evolving, it's thrilling to ponder the upcoming potentials and improvements these extensions will introduce. For now, leveraging these tools can undoubtedly transform your design process, making it more efficient, collaborative, and impactful.

Top 7 Figma Plugins to Invigorate Your Design Process

As we all know, part of a product developer's work is to convert the design from Figma into code with a framework of choice, and it can be complex if the project is significant. The essence of the designer-to-developer handoff is that the developer implements the screens from the design into exact and pixel-perfect components. In this article, we will extend the functionality of AWS Amplify Studio to build an application from Figma and import the components into React. The connection between Figma and React, with the help of Amplify, creates reusable React components that save you time and from writing long lines of code. The conversion process from Figma to code is seamless and makes it efficient for developers to build faster (which is probably why ). Abode acquired Figma for billions Prerequisites To understand and complete this guide, the following are required: A Figma account. Sign-up is free installed on our local machine for package installation Node >= 14.0.0 and npm >= 5.6 A code editor Install the AWS Amplify CLI on our terminal. Run this command: npm install -g @aws-amplify/cli Knowledge of JavaScript and React Have an AWS account. Register for an account here Creating a Template UI Kit on Figma Before we create the React components from the UI kit, we need to set up the Figma project. Once on Figma, go to the after creating an account and search for . AWS community the AWS Amplify UI kit Figma file Click on “Get a copy” to duplicate or clone a copy of the UI kit. The Amplify UI kit comes installed with some pre-built pages, which are: : This page binds to AWS Amplify Studio, which comprises all the styles for the pre-built components. Changing the content of this page will affect the look of the React UI library from the Figma components. The Primitives page : This page gives you control to edit, change, and create components, and it comes with pre-built components. The My Components page : This page shows the example designs of some custom components from the My Components page. The Examples page This tutorial will use two components from the My Components page: the and UI. NavBar FormCheckout Creating an Amplify Project With the setup complete in Figma, head to the AWS console to create a new Amplify project. Log in to your , and search for AWS Amplify. account Select AWS Amplify from the list of services. Once in the dashboard, click the button and select from the dropdown. All Apps New app Build an app Give the app a name and click confirm deployment to create the app. With the Amplify project deploying, let’s create a new React app. Creating a React App To scaffold a new React app, head over to your terminal and paste in the following command: npx create-react-app no-code This command unpacks all the files and folders necessary to build a beautiful and scalable web application. Launch Amplify Studio After installing our React app, now is time to launch the project. Click the launch studio to display the no code's staging. Click the launch studio button as it takes you to the page showing the staging environment for . no-code Here, we will be able to do lots of things like creating data models, authentication, and so on. But our focus will be on the UI library under the Design tab. Click the Get started button. Sync with Figma. This dialog box will allow you to paste the Figma file link from the . My Components page If this is your first time doing this step, it may require authentication to access your Figma account. Fetching Components from Figma Accept all the changes of the pulled components from Figma. We will be able to view all the UI components from the Figma file in Amplify Studio. from Figma's imported components is the same as displayed in Amplify Studio. FormCheckout Working with the Fetched Components in React Now that we have the fetched UI components in Amplify Studio, we must have all the UI components in our React application. To connect our app with Amplify Studio, we need to pull the components into our source code using the Local setup instructions link and run the command from the project root folder. Remember that for this command to work, install the AWS Amplify CLI globally, as stated in the prerequisites section. Running the command will prompt our program with an authorization message. Click yes to grant permission to the React app. After, a series of prompts appear when pulling the components. Accept the default to the questions. If you encounter challenges or any error log messages in the terminal, it will probably be that you haven’t configured AWS. Check out if you face this challenge. this guide The installation creates a new folder in the directory, which contains all the pulled UI components from Amplify Studio. ui-components src Getting Started with the Amplify UI library The Amplify UI React library is essential for the styling purposes of our app, which is similar to every other CSS utility library. Run this command: npm install @aws-amplify/ui-react aws-amplify Styles In the application's entry point, the index.js file, import the CSS file. Copy and update the index.js file with this code which is responsible for the look and feel of the app: root.render( ); // src/index.js import React from 'react' ; import ReactDOM from 'react-dom/client' ; import App from './App' ; import '@aws-amplify/ui-react/styles.css' ; // add this const root = ReactDOM.createRoot( document .getElementById( 'root' )); < React.StrictMode > < App /> </ React.StrictMode > Fonts Amplify UI ships with the default fonts, during installation of Amplify UI dependency. In the file, copy and paste the following Google fonts CDN links in the element: Inter public/index.html <head> ...
<head> </head>

... // public/index.html < link rel = "preconnect" href = "https://fonts.googleapis.com" /> < link rel = "preconnect" href = "https://fonts.gstatic.com" crossorigin /> < link href = "https://fonts.googleapis.com/css2?family=Inter:slnt,wght@-10..0,100..900&display=swap" rel = "stylesheet" /> Displaying the Components To display the components and , navigate to the file and remove all the code. FormCheckout NavBar src/App.js Next, update the file with this code: );
} // src/App.js import { FormCheckout, NavBar } from './ui-components' ; const App = () => { return ( <> < NavBar /> < FormCheckout marginTop = '5em' /> </> export default App; The margin-top property gives a top margin between the navbar and the checkout form. The CSS value is part of how to use styles from the Amplify UI in our components. Start the Development Server React comes with a hot-reload feature that refreshes itself every time there is an update on the file. Run this command: npm start The development server runs on . http://localhost:3000 Want to deploy this React app to the web? Check out that guides you step by step using AWS Amplify. this resource Conclusion Low-code tools with zero to no code at all are what Amplify Studio offers. This tool makes working as a developer exciting, as part of our work has been done for us without building components from scratch or, better still, implementing screens from the designer. We can boldly say that the handoff from the designer to the developer is seamless. This article taught us how to create and integrate our Figma components with the help of Amplify Studio and to connect the components to React components which function as a working app. The complete source code is in this . GitHub repo

Designer to Developer Handoff: How to Build a React Component from a Figma Design File

Transferencia de diseñador a desarrollador: cómo crear un componente de React a partir de un archivo de diseño de Figma

Transfert de concepteur à développeur : comment créer un composant React à partir d'un fichier de conception Figma

डिज़ाइनर टू डेवलपर हैंडऑफ़: फ़िग्मा डिज़ाइन फ़ाइल से रिएक्ट कंपोनेंट का निर्माण कैसे करें

設計者から開発者への引き継ぎ: Figma 設計ファイルから React コンポーネントを構築する方法

Handoff de designer para desenvolvedor: como criar um componente React a partir de um arquivo de design Figma

Nhà thiết kế cho nhà phát triển Handoff: Cách tạo thành phần phản ứng từ tệp thiết kế Figma

设计师到开发者的交接：如何从 Figma 设计文件构建 React 组件

Traditionally, creating animations with CSS is, well, a pain. Animations in general are complex in nature and the issue with creating beautiful animations is further complicated by the fact that many UX/UI designers use tools that aren’t typically intended to create animations. This makes it hard for developers to translate an idea from a designer's head to the page. Over the years, collaboration between designers and developers has accelerated increasingly with the introduction of tools like Figma and Zeplin. In this article, I want to explore how designers and developers can leverage Figma to create lightweight, beautiful animations with CSS and HTML using a plugin called . Figmotion Step 1: Installing & Launching Figmotion First, we will need a tool called Figmotion. Let’s start with an .  If you don’t already have one, you’ll have to create an account on Figma and login to interact with the design. It contains a spreadsheet and a ball. You will need to install Figmotion, which you can do . existing Figma design here To launch Figmotion, within Figma navigate to Plugins → Figmotion → Open Figmotion. You should see a box similar to the one below. Select the Animation frame and you will see the Ball and the Spreadsheet within Figmotion on top of the design. Step 2: Creating your First Animation in Figma and Figmotion Now that we have Figmotion setup, we are going to create our animation. For the sake of this tutorial, we will animate the ball around the edge of the spreadsheet over the course of 2 seconds (0.5 seconds per edge of the spreadsheet). To do so, we will use the Ball layer in Figmotion and change its position at different time intervals. In order to do this, we need to know the dimensions of the spreadsheet. Click on the spreadsheet in Figma, and record the width and height values in the top right of the screen: Great! It looks like the width of the spreadsheet is 434, and the height is 276. Now, let’s return to Figmotion. Click on the Ball layer in Figmotion. This will expand a set of animatable properties like so: For our sake, since we are only animating the position of the ball, we will only need to worry about the X and Y values within Figmotion. Let’s start by animating the ball across the top of the spreadsheet. Click on the 500ms marker at the top of Figmotion, and then click the little icons next to the X and Y properties of the ball. I have annotated the three areas to click below: Now, since we are only animating the top edge of the ball, only the X value of the ball needs to change. Click the X property at 500ms and enter 434 next to “linear” (the width of the spreadsheet above). You should see something like this after hitting OK. Cool! The ball moved to the right-hand side of the spreadsheet. We need to repeat this step 3 more times:At the 1000ms marker, change the Y property of the ball to the height of the spreadsheet (276). The X value can remain at 434. At the 1500ms marker, change the X property of the ball 0. The Y value can remain at 276. This will position the ball in the bottom right hand corner of the spreadsheet. At the 2000ms marker, we will animate the ball back to the original position of 0, 0. Change the X and Y values in Figmotion to 0, 0. Step 3: Preview your Animation In the top left of Figmotion, click the play button. You should see the ball animate around the edge of the spreadsheet. Step 4: Exporting your Animation to HTML/CSS To convert this animation to HTML/CSS, we will end with 4 files: an index.html file, an animation.css file, an SVG for the ball, and an SVG for the spreadsheet. Export ball.svg and the spreadsheet.svg from Figma. In order to do so, select the ball, and in the right panel of Figma expand the Export box and choose to save it to a folder as ball.svg. Repeat for the spreadsheet. To export the animation, click “Export” from within the Figmotion box. Choose to export As CSS and save the file as animation.css. Create an index.html file that imports the animation.css file. In our index.html file, we will need to position the ball.svg and spreadsheet.svg elements together. This is the code I added to index.html and to the bottom of the animation.css that Figmotion generated: index.html <!doctype html> < = > html lang "en" < > head < = > meta charset "utf-8" < = = > meta name "viewport" content "width=device-width, initial-scale=1" < = = > link rel "stylesheet" href "animation.css" </ > head < > body < = > div id "content" < = /> img src "spreadsheet.svg" < = = /> img src "ball.svg" id "Ball" </ > div </ > body </ > html animation.css { : relative; : ; : ;
} { : absolute; : ; : ;
} #content position margin-top 150px margin-left 150px #content img position top 0 left 0 Step 5: View Your Animation! Open index.html. That’s it! You should be able to see your animation like so: Hopefully, this tutorial helps others with the creation of their own animations! You can see my code and the final gif above . And always, for beautiful CSS and products visit us at . on GitHub here Flatirons Development

Lightweight CSS Animations with Figma & Figmotion

Figma has been at the top of its game since its launch in 2016. The web-based collaborative tool stands out from its competitors and is well-loved by the design community for the level of accessibility and its ease of use. The additional benefit of plugins has sent our designers over the moon who are sometimes rather eager to design on it. Plugins have become an integral part of any design tool for designers, it not only makes a designer’s life easier but also accelerates the workflow in the visual design process. Our design team has worked with multiple tools and software over the years but swear by Figma. Here is the list of free plugins used by our design team: 1. Blush - Illustration 2. Content Reel - Library 3. Iconify - Icons It has more than 60 icon sets like Material Design, Carbon Design, Feather Icons, etc. containing over 50,000 icons. We can select the icon from the collection and drag & drop it to the Figma file. 4. Find and replace - Productivity 5. Frame Status - Productivity 6. Mobile Upload - Productivity Open Plugin > Scan QR Code from your phone/ tablet > upload from phone gallery How to use: 7. Smooth Shadow - Design 8. Nisa Text Splitter - Productivity 9. Spell Inspector - Productivity 10. Lottie Files- Animation 11. Web Gradients - Colour 12. Stark - Accessibility There is no right software, tool or plugin, it’s a matter of personal choice. Our team have tried and tested different softwares to figure out what works best before switching to Figma. As technology and the design community progress, the tools that help us move forward also advance. Our team cannot wait to see what the future holds and is eager to try and geek out over new plugins, tools, and updates. Blog written by - Rebbaton Blogs

Devised for Design: Top FIGMA Plugins

Darwin's law of SaaS go-to-market evolution Act 1: The 2000s and the reign of the salesperson! A dimly lit steakhouse. . There’s a limo parked outside. Enter a salesperson, engrossed in conversation with a CXO In the early 2000s, the SaaS go-to-market motion was entirely sales-led. It made sense to carve out a budget for your sales teams to wine and dine CXOs of potential customers because that was the only way large enterprise accounts were going to find out about your hot new product. The protagonist of the story was sales. Supporting actors were unheard of. Act 2: The early 2010s and the evolution of inbound marketing It is a decade later and Sales, by now a veteran name in the industry has stepped aside to let a protege take the lead, and a very capable one at that. Enter Marketing, to loud music and confetti everywhere. The 2010s saw the sales-led motions evolve to inbound marketing where focused, targeted campaigns replaced steak dinners and top-golf and widened the top of the funnel (ToFu), paving the way for Marketing Qualified Leads (MQLs) to be handed over to Sales. And as for good ol' Sales, the supporting act meant more potential buyers reaching out to them, and in turn, more conversions 🚀 Act 3: The 2020s - the Product strikes back . Whether it means creating top of the funnel (ToFu) through virality, guiding users through their activation and engagement journeys, or taking the first steps in an assisted sale, at product led growth companies, the product is the lead actor, and sales, marketing, and engineering are the supporting cast. We live in the era of product-led growth For those in the audience paying attention, this should come as no surprise. The continuing trend of a closing gap between the buyers and sellers of software was always going to result in both ultimately coming together. The era of the top-down determination of which software teams used left no room for experimentation among end-users and sometimes resulted in 7-figure software gathering dust on shelves. But why now? There are evolutions and then, there are revolutions. In the wake of Covid-19, we witnessed two years' worth of digital transformation in just two months. Every company is now becoming a software company, and a million applications are just a few clicks away. In a world where anyone can take your software for a spin, end-user adoption and retention are functions of how much value your application can deliver over your competition. And in the rainforest, only the very best survive. Product-led growth emerged as a Darwinian alternative mirroring survival in the wild. A low-risk environment where teams discovered and experimented with software was always likely to forge resilient strains of the product. Only the best emerge from the crucible because they provide the best experiences to the end-user. Coupled with Sales & Marketing becoming way more expensive than ever before, it only made sense for the product to become the protagonist, and for Sales and Marketing to step into supporting roles. A self-serve product is no longer a nice-to-have. It is an existential need. There are only two kinds of SaaS companies in the world today: Those who ARE product-led And, those who WANT TO BE product-led Product Led Growth (PLG) is the natural next step in an evolution that's been playing out for decades. And as for the other millions of software companies that are yet to be born into this world, the ink is dry on the product being the driver of growth. What separates the best from the rest How do you spot the best Product Led Growth companies in the wild? Canva, , , Calendly. What seperates them from the rest of the pack? Figma Notion Imagine running an algorithm to adapt your product to optimize for end-user delight, and imagine all your competitors doing the same thing. In this highly competitive space where the margins are so thin, the clear winners are those who go the extra mile. But what does that extra mile look like? Over the last year, we've spoken with 100s of PLG companies - all the way from seed stage to public market giants. And after all those conversations, our pattern matching spidey senses were tingling ✨ In classic McKinsey fashion - the following are ! the top 3 characteristics that separate the best from the rest P.S. You can take a consultant out of McKinsey but not McKinsey out of a consultant amirite? #1: The best PLG companies tell the best stories 💭 Imagine yourself as a young PLG company. You're up against the giants. The behemoths. You're up against Amazon! You need to convince merchants that your buggy little tool that helps them create e-commerce stores online is the solution to all their problems. It's going to change their lives. They ask you why they should believe you? You have no customer references, no reviews and Amazon works well enough. The way the best PLG companies approach this problem is step 1 to why they succeed. They appeal to their customer's emotions. Their core drivers. A merchant on Amazon often feels constrained to the fate the overlords have planned for him or her. And those are exactly the heartstrings a young Canadian startup called tugged on in its early days. It promised its customers independence! Shopify - “We help people by making it easier to start, run, and grow a business.” mission appeals to the indie spirit and freedom from being under someone else’s thumb. (looking at you, Spotify 😒) Shopify achieve independence Shopify’s - "Our mission is to ." In typical Patrick Collison fashion, Stripe appealed to the DNA of every young Silicon Valley founder building an online business. Stripe increase the GDP of the internet - “Help the world .” It's easy to take impact on your calendar for granted. But their mission is a stark reminder of the impact this glorious little Chrome extension can have on our lives. Clockwise make time for what matters Clockwise's - "...to make it so , we will create tools, networks, and incentives for coding at ever-larger scale." While 'code-search' is a succinct way to describe to a developer, their mission applies to all. Sourcegraph everyone can code Sourcegraph founders have said often that their long-term vision is to . Postman - Postman's add "net new developers" to the world - "Our mission is to by enabling anyone to build the tools that meet their needs." vision is much more grandiose than being the spiritual successor to MS Excel. Airtable democratize software creation Airtable's just - "...with a mission to anything and publish anywhere." Canva's narrative is the democratization of design. Canva empower everyone in the world to design #2:️ The best PLG companies deliver value... blazingly fast ⚡ The attention economy is a zero-sum game of time In the attention economy, every product is competing with some other product for end-user attention, and those who can deliver value without beating around the bush stand to pull ahead of the pack. Here's an example: How much time do you think it takes to build a Christmas card on Canva? Well, we timed it. Even without an account, it takes 🤯 to fire up the website, find a template, customize it, and export it to your desktop. all of 52 seconds Canva - From discovery to design to value in 52 seconds! ⚡️ However, not all tools can deliver value in 52 seconds. And that's totally okay! Some inherently serve more complex use cases than Canva, but even then, product-led growth companies guarantee that the outcome is made visible to the end-user within minutes of discovering the product. This is typically done through template galleries. Be it , , , or , at no point does the end-user have to engage in mental gymnastics to imagine the value proposition. Algolia Airtable Retool Notion Case in point: Here's 's standard template gallery. The decision to create a user-generated (UGC) templated gallery was notably the inflection in journey from growing fast to growing at a breakneck speed! Notion Notion's Sometimes, the amount of time it takes for a product to deliver value is high by design. Consider , where the value proposition is time itself. How do you deliver value fast? does this in two ways: Clockwise Clockwise By quantifying its potential impact upfront - in #hours of focus time created for your coworkers With a top-of-the-line onboarding experience. #3:️ The best PLG companies sell scientifically 🧬 Enter the product qualified lead (PQL) Having an abundance of product-usage data enables PLG companies to qualify leads based on product-usage signals. PLG companies move SQLs and MQLs into the background and instead focus on product qualified leads (PQLs): For Slack, a PQL was teams who sent over 2,000 messages in 2 weeks For Dropbox, it was users who uploaded 1 file in 1 hour of signing up And for Hubspot, it was accounts that used 5 (out of 25) new features within 60 days. Scientifically expressed, a PQL or a Product-Qualified Lead can be thought of as a who a certain in a certain segment of personas performed a set of actions number of times amount of time PQL definitions can vary based on the nature of the product, but at its core, it remains a function of a combination of persona, actions fired, # of times, and time period. PQLs are typically derived from a mix of product signals, demographic signals (country, size of company, industry, etc.), and technographic signals (software stack used). For , the product-usage signals considered for PQLs are a mix of activation events like creating components, inviting colleagues, exporting designs, etc., or propensity-to-pay-events like hitting the paywall, checking the pricing page. Figma Whereas, for the product-usage signals are instead # meetings created, # of concurrent meeting attendees, # of integrations used, # of features used, # of referrals sent, etc. Hopin Okay so PQLs are the answer to all our problems, right? Wellllll... we've not been entirely honest with you. While PQLs are easy to conceptualize, they're notoriously hard to implement 😬 Enter the (complex) infrastructure that enables the best PLG companies In the fast-paced, data-backed world of PLG, is where most companies falter. At over 95% of the companies we spoke with, the "PQL implementation project" was lost to a spider web 🕸 that can only be described as DIY hell! 👹 A chaotic criss-cross of spreadsheets, CRMs, product usage information held together by a disparate set of Excel or Google Sheet files... yikes! implementation of PQLs But the OGs of the PLG world like Slack, Asana, , and didn't live in this hell! Shopify Figma These companies have and have created an intricate infrastructure of engineering and data science, to implement and operationalize PQLs! gone the extra mile Just ask the sales team at who credit a large part of their success in getting to $100M ARR to their sales infrastructure (below) Figma In an ideal world, every Product-Led Growth company has the internal capabilities, the bandwidth, and the resources to set up a flow where a data science team defines PQLs in tandem with a data engineering + platform engineering team that funnels data from Billing, CRMs, Marketing, and Product Analytics databases while simultaneously streamlining the whole process to funnel the leads back into the CRMs. But the world is far from ideal, and not every company is as far along in its PLG journey as Slack, Asana, , or . Shopify Figma One tool to rule them all With tech transformation stepping into high gear in the wake of the pandemic and the clairvoyance that product-led growth is the way forward, most SaaS companies will be PLG companies and what's more... most of them are yet to be born into this world. For the up-and-coming PLG company, time and resources spent building infrastructure as complicated as Slack's or is time and resources better spent on the core product. Figma's We built to take this daunting task off the hands of companies who face the dilemma of massive top-of-funnel growth coupled with the inability to set up this massive infrastructure. Infrastructure that is indispensable to converting users from free to paid plans. Toplyne Setting up something similar to the scary stack shown here is a nightmare for a young PLG company, but all of this heavy lifting just sounds like ... with extra steps. 😉 Toplyne Here is a list of that have been pioneers of the product-led movement. ~300 companies Also published on: https://www.topofthelyne.co/p/product-led-growth-what-makes-canva

Why Canva, Figma & Shopify are Exploding like Mentos in Diet Coke

Design Meets Browser 🎨 The product of a weekend project in 2011, Brown CS senior Evan Wallace’s WebGL rendered was proof of concept that the browser was ready to host creative tools - a chance to complement creativity with collaboration and access. Dylan Fields and Evan Wallace jumped on this opportunity and 3 years later the first web-based vector-design tool was born - . Fast forward 6 years, Figma is a booming SaaS decacorn, having raised from some of the best global investors. swimming pool Figma Like most legendary companies, Figma has defied the bounds of its total addressable market (TAM) and is widely used not just by designers but also non-designers (engineers, product managers, marketers, etc.) in industries ranging from the expected (tech companies like Uber and Square) to the wildly surprising (petrochemical companies like )! Repsol The following is a story of the events and decisions that led to the creation of the platform millions of us know and love ❤️ The Search for Product-market Fit 🧩 When Dylan and Evan decided to go full time (enabled by Dylan’s Thiel fellowship), the primary mission was to make design collaborative, and accessible. After dropping browser-based photo-editing as the focus use-case (citing the shift of photography to handheld devices), the team identified a huge market in interface design. A market that was booming with the explosion in smartphone applications, but haunted by nightmarish cross-vertical communication and collaboration gaps between design, product, and engineering. A product that packed all the design functionalities of traditional software but was now accessible over the browser (courtesy WebGL) for multiplayer editing amongst designers and cross-functional non-design teams Designing could now move to the cloud and teams could edit together, maintain version history, share design libraries and collect feedback from multiple stakeholders all in one place. We've since witnessed the meteoric rise and rise of Figma. A coming together of a large market, impeccable timing, and a special founding team! The Art and Science of Distribution 🌐 : By building a that was free to use, Figma was able to attract 1000s of early adopters who fit its ideal customer persona. Using the PLG philosophies of free and ungated access to core functionality, frictionless self-serve onboarding, coupled with user delight that the superior product offered, Figma was able to successfully activate its early adopters. The art world-class product : A focused community and content marketing program further fueled this and a loyal user base, positive word of mouth and network effects were now brewing. After holding off on monetization till value was established, Figma introduced a self-serve teams product - , providing users a greater scale of collaboration for a monthly subscription fee. The science Figma Professional The growth in users was compounded by a combination of direct network effects amongst designers and cross-group network effects through non-designers. Figma designers championed adoption in their teams (roping in other designers) and introduced Figma as the new way to collaborate with their non-design counterparts. Both these segments, as they moved jobs and geographies, HAD to take the new, super-effective, and collaborative way to design products with them. Getting Enterprise-ready 🏢 As teams within large enterprises adopted Figma, the platform virally found its way onto most screens within the tech and product org. As with all SaaS categories, the move to enterprise comes with, well, the need for enterprise features. Figma addressed this need by rolling out - a powerful enterprise solution for all corporate needs (billing, security, user management). Figma Organization This was also accompanied by stronger collaboration tools in the form of organization-wide design systems, team management, and shared fonts. The product as expected was received warmly, generating huge inbound demand. However, the self-serve onboarding system that drove Figma’s bottom-up growth proved insufficient for the buyers to navigate their internal red tapes and a gap developed for pre and post-sale support. Enter the Suits 👔 Figma had two pressing issues to solve: Managing the sheer volume of inbound enterprise requests Distributing the enterprise solution to existing accounts that’d benefit from the superior features. When SaaS GTM stalwarts like (ex-SVP Zendesk) and (ex-Dropbox) were brought on to solve for this, Figma had a very strong product-led motion rolling, supported by a customer success team and loyal promoters. Amanda Kleha Kyle Parrish While the focus on community marketing and content marketing sustained, an experiment with sales saw great success in terms of customer delight and conversion statistics. Human touchpoints were identified to be a pivotal lever in helping users navigate organization-wide adoption of Figma ‘They don't always have to have the most traditional backgrounds, but they're high IQ, high EQ, high horsepower, and their intellectual curiosity about what you're doing is what's driving them' - Kyle Parrish, Head of Sales @ Figma on hiring early sales reps The Mechanics of Figma's Sales Engine ⚙️ The sales team divided as mid-market, enterprise, and account management saw quick growth to 100+ employees - across account executives (AE), account managers (AM), and leadership. While a Salesforce CRM instance and a platter of sales productivity tools like Dooly (notes management), Chorus (collaborative sales conversations), Outreach (sales engagement), to name a few, ensured that the team was well equipped to sell sell sell, it was the stitching together of the entire sales stack (covered in the next section) by that makes Figma's GTM truly exceptional ⭐️ engineers and data scientists Engineering Hypergrowth 🚀 When you have millions of happy users who are using your platform for free, a premium offering that will improve the experience for some of them, and limited bandwidth to introduce the same, you need to solve for two things: Prioritize leads to optimize sales bandwidth and performance, while Preserving the PLG experience that you are renowned for. A badly targeted sales call has a higher likelihood of doing more harm than good! Figma realized that the key to undertaking this was to leverage user information and signals across product usage, billing, and communications in a single view, allowing their AE’s and AM’s to prioritize and customize their approach. What followed was a multi-quarter engineering effort. Figma's engineers helped the sales team create a data warehouse, pipe in information from multiple siloed databases, group users by organizations, mark high priority accounts using Clearbit data, deprioritized closed-won accounts using stripe data, and lastly, score leads to reflect the likelihood of sales conversion based on: Demographics: How large is the team (# of users)? How large is the account (Fortune 100, 1000, etc.)? What is the industry (tech, media)? Product usage signals: Are users creating and sharing components? Has this behavior been increasing over time? Amongst a host of other signals. Figma further fed the above information back into Salesforce, equipping their AE’s and AM’s with key insights right in the platform they are most familiar with. What’s Next? ⏭ With a strong product-market fit and a proven GTM, Figma marches on as more and more organizations adopt the multiplayer approach to design. With giants like Adobe doubling down on interface design with new product Adobe XD, embracing PLG, the browser and a loyal community remain Figma’s biggest moats. Figma is investing heavily in the community as it tries to position itself as a platform with top users sharing designs and tutorials (in true GitHub fashion) and by facilitating easy build & stable plug-ins. This investment is pegged to usher in a new phase of growth driven by global network effects. Figma is also going multi-product with their new launch - , a browser-based whiteboarding tool - ‘embracing every role in product development’. As this requires distinct workflows that enable multiple products and multiple customer journeys, the GTM will have to evolve at Figma. We're sure Figma will come out on top with this challenge and I am sure you’re as excited as us in seeing how it unveils. FigJam Also Published Here

Figma's $10B GTM Engine and How it was Built 🎨

How I used Figma to run a comprehensive workshop with my team. Here are my thoughts on what works, what doesn’t, and how to go about building the remote  workshop tools of the future. The lockdown isn’t challenging roles and professions in themselves. It’s challenging their flexibility and resiliency. This is also true for us UX Designers and Researchers, for whom collaborative face-to-face exercises such as workshops are an important part of work life. There is this myth going around about how workshops are a ‘real-world’ activity that cannot be replicated virtually. Having successfully run a digital workshop myself, I’d like to debunk this myth. Here I show how I ran it using , a free collaborative design tool used primarily for creating and prototyping interfaces, such as websites or mobile apps. Although Figma is not a fit-for-purpose tool for running digital workshops (such as Google’s Jamboard, for example), it is versatile enough to enable them and, in my experience, provides an even better experience. Figma Setting the scene A few weeks ago, when my side of the world was already well into lockdown due to the coronavirus pandemic, a start-up reached out to me in its discovery phase. The startup had a product idea. What it did not have was a clear idea of who their primary users would be, in order to choose which specific market to target, and what the requirements should be for its minimum viable product (MVP). To fill in those gaps, we started by following the process to first expand the problem space and then narrow it down. This helped us to identify all the possible user segments for their product, before selecting the most relevant segments that we chose to prioritise and keep in mind when developing the product further. double diamond This expand-than-narrow thinking exercise is a great opportunity to get team members to share their ideas and visions for a product, which can bring a lot of value for all involved when done in a workshop environment. Workshops allow each member of the team to share their personal ideas and beliefs, and enable the whole team to converge on prioritised areas. This gives teams the platform for constructive discussions and to reach an agreed direction on what their next steps should be. (For more on the value of workshops, the book Sprint by @Jake Knapp is a must read.) To enable all this, virtually, some preparation work was needed. To set the scene, I began by creating the essential ‘virtual assets’ which included: whiteboards for each participant, post-it-like coloured boxes with text inside of them, prioritisation stickers (yellow and red), 2x2 graphs, table for the final priority areas. On the following day, we were ready to go and all participants joined a Zoom call and logged in to Figma to get started. The digital workshop involved the following: A brief explanation of how to operate Figma and what our workshop would work. Running -like exercises to brainstorm all the possible user segments (A). Crazy eight Synthesising and organising the different user segments (B). Building 2x2 graphs with key identified variables to prioritise user segments (C). Prioritising which user segments to focus on–first individually, and then collectively (B and D). What worked well on Figma each user was able to jot down their ideas effectively in their own whiteboards. Doing individual design exercises: coming together as a team to discuss similarities and differences in our individual answers worked great. I ended up copy-pasting the relevant ideas which enabled us to synthesise the material more effectively for future reference. Coming together to brainstorm: the red and yellow stickers worked as well digitally as they do in the real world. Prioritisation exercises: making 2x2 graphs was very easy and perhaps more effective than it is in real-world workshops because of our ability to mould geometric shapes at our will (e.g. we made them big and small to represent the user segments’ relative market sizes). Creating 2x2 graphs: unlike the physical world, which requires post-its, markers, stickers, and a room, joining in this digital workshop cost us nothing on top of our usual internet bills. It was totally free: What didn’t work so well Despite my quick intro, some people who were unfamiliar with Figma did struggle to create new post-its and change text fonts. This highlights a requirement for a less complex tool at the cost of having less plasticity. Initial struggle in modifying shapes: a valuable part of being in a workshop is the opportunity to be amongst the participants, and I think we can all agree that the feeling of being in a room with a group of participants is unique and un-replicable digitally. However, I think we can do better than what we have now , which is being represented by an arrow with our names (see below) - note that I’d rather be a potato than an arrow. I don’t have the answer to the problem of digital presence, but it’s worth noting some interesting experiments that are emerging: 2D avatars solutions by and , and 3D/virtual reality tools such as . People’s presence in the virtual space is missing: Remo The Online Town Cryptovoxels we were able to draw 2x2 graphs, but imagine how impressive it would be if we could integrate an editable table linked to a range of possible graphs? Creating virtual graphs for analysis could be greatly enhanced: splitting in smaller groups is a great way to divide and conquer information, which means you can get a lot more done within the time of a workshop. We were unable to do this exercise in Figma (although we could have done this by using the paid version of Zoom). Splitting in teams was not possible: this may be due to the large sidebars (on left and right) which got in the way of seeing the whiteboards. The view of the workshop felt slightly clunky: In several cases, some participants were looking over (i.e. copying) each other's work by simply moving to each others’ whiteboards. Cheeky cheeky. No clear division between different workspaces: https: //media.giphy.com/media/d1E1msx7Yw5Ne1Fe/giphy.gif What else is available today As put it, “knowledge work is becoming increasingly remote as online collaboration tools improve.” So why shouldn’t we also put workshops on digital platforms? It turns out that some companies are trying to enable that by developing the appropriate technology to support dynamic workshops online. Jesse Powel Google (@Gsuite) is one of them. As part of their strategy to create the work software of the future, it recently launched , a free collaboration tool designed for virtual workshops, which can also be used in conjunction to their . Jamboard Jamboard digital whiteboard, worth $4,999 To be fair, this tool provides everything you can think of, when it comes to real-life workshops: post-its, drawing boards, ability to put and take out images, different white boards, you name it. With this tool, Google brought the physical workshop into the digital realm. But, it must be said, that is not the same as making workshop digital. By ‘bringing’ it to the screen exactly as they are in the analogue world, Google also carried over the limitations of physical workshops to the digital realm, which is arguably the land of ‘everything is possible’ (or should be). In other words: Google did not fully consider how digital can add to the physical workshop experience, instead of simply replicating it. To provide just three examples of the Jamboard experience: but using magnetic grids, we could make digital workshops organised and clean instead. Figma enables that. It’s a highly messy environment much like real world workshops: What about the infinite array of shapes we could use in a digital environment? Figma enables that too. There is a lack of objects and a limited ability to modify them. that are commonplace in digital applications, such as tables, graphs and functions. There is a lack of tools and functionalities After using Figma I felt constricted with Jamboard, which is ironic considering that the latter is the fit-for-purpose tool. Looking forward What this exercise has revealed to me is that workshops can go digital, no doubt about it. Most of the limitations I’ve encountered so far when running digital workshops are related to the tools I used, rather than to a generic incompatibility between workshops and online experiences. So far, I’ll stick with the impression that versatile tools like Figma can go a long way for enabling excellent digital workshops, while fit-for-purpose tools still have a long way to go to do the same. Importantly, when building the collaborative tools of the future, we should not simply ‘bring’ physical activities into the digital realm exactly as they are. Instead, we should and enable us to do things that would be impossible elsewhere. explore the limitless possibilities of the digital realm to expand our experiences When building the future, let’s empower our users with the malleability of the digital world. In the meantime, those of us working from home can start by digitising activities that we used to believe were tied to their physical conditions, be that with a costly fit-for-purpose software or just an extra dose of imagination.

Figma

figma.com

2130 employees

Since 2012

COMPANY RANKING

Figma

EVERGREEN INDEX #2719

See more notable links about Figma

Apply to get your Tech Company News Page live on HackerNoon.com today!

Read More Tech Stories Related to #Figma

Figma

Figma

figma.com

2130 employees

Since 2012

COMPANY RANKING

Figma

EVERGREEN INDEX #2719

Related CompaniesRank

Figma Story MentionsComplete List

See more notable links about Figma

Apply to get your Tech Company News Page live on HackerNoon.com today!

Read More Tech Stories Related to #Figma

Figma