Figma

532 posts

figmaNov 14, 20181 min readCurated summary

Nominate photography for the 2018 Unsplash Awards | Figma Blog

Unsplash’s 2018 Awards celebrated the photographers whose free contributions helped build the platform’s alternative to traditional stock photography. The awards featured 13 categories, with selected images showcased throughout November and December and judged for overall excellence. Photographers could submit entries through December 7, 2018. ## Unsplash’s Contribution to Stock Photography - Founded in 2013, Unsplash challenged conventional stock photography with a curated collection of high-quality, freely shared images. - Its success depended on photographers’ generosity, skill, and willingness to contribute their work. - The awards were created to recognize and thank these contributors. ## 2018 Award Categories - Aerial photography - Animals and wildlife - Astrophotography - Black and white - Food and drink - Interiors and architecture - Mobile photography - Nature and landscapes - People and portraits - Sports - Street photography - Tech and business - Unsplash community ## Submission and Judging - Submissions were open through **December 7, 2018**. - Unsplash planned to feature work across the categories during November and December. - Judges selected the best featured image in each category. - Entrants could consult Unsplash’s Awards page for category definitions, judge information, and evaluation criteria. Photographers interested in participating were encouraged to submit their work through the Unsplash Awards website.

Figma Design Photography Unsplash

figmaNov 13, 20182 min readCurated summary

How to set up your Pages in Figma | Figma Blog

Figma Pages can organize design files in ways that match a team’s product, process, or design-system needs. The article emphasizes that there is no single ideal workflow; Pages provide flexible separation for responsive designs, app features, process stages, and atomic design components. ## Platform or Screen Size - Create separate Pages for Android, iOS, desktop, or other responsive breakpoints. - Use frame presets and constraints to build platform-specific layouts. - Each Page can contain its own prototype, making platform-specific user testing easier. ## App Feature - Organize Pages around major product areas such as profiles, home screens, or other features. - Designers can work independently while still referencing the broader product. - Separate prototypes allow teams to test individual feature flows. ## Design Process Stage - Use Pages to show progress and distinguish exploratory work from finalized designs. - Possible structures include: - Thumbnail, wireframes, designs, and archive - Documentation, staging, and ready for review - Sitemap, wireframes, mockups, QA, and marketing screenshots - A “Done” Page helps developers identify which designs are ready to build. - Early ideation and brainstorming can remain separate from polished work. ## Atomic Design Method - Dedicate Pages to atomic design levels: - Atoms, such as typography and icons - Molecules, such as buttons - Organisms, such as complete pages - Consistent Page naming improves Team Library search. - Components can use simpler names like “selected” or “hovered,” since their Page already identifies them as buttons or other component types. Ultimately, teams should choose a Page structure that reflects how they design and collaborate, rather than follow a universal template.

Figma Design Systems Prototyping User Interface+2

figmaNov 7, 20183 min readCurated summary

Using constraints & magic numbers to build responsive layouts in Figma | Figma Blog

LittleBits built a responsive design system to support four apps across mobile and tablet platforms with a small team and six-month deadline. They combined Figma constraints with an 8-pixel “magic number” and proportional scaling rules that were shared with their React implementation. This approach allowed one template per screen to adapt across devices with minimal redesign and engineering adjustments. ## Establishing an 8-Pixel Layout System - Existing designs were analyzed to identify recurring dimensions and spacing. - Most values were already close to multiples of 8, so 8 became the system’s base unit. - Common sizes included: - Buttons and form controls: 32, 48, 56, 64, and 96px - Text: 16, 24, 32, and 48px - Padding and gutters: 16, 24, and 32px - Larger cards: 240px high - Using a shared numeric scale helped harmonize typography, controls, margins, and padding. ## Combining Constraints with Scaling Rules - Figma constraints allowed elements to stretch, remain pinned to edges, or align with grid columns. - Constraints alone were not sufficient to make one layout work equally well on small phones, larger phones, and tablets. - The team compared screen dimensions, calculated proportional relationships, and rounded the ratios into practical whole-number scaling rules. - These rules were implemented in React alongside normal layout constraints. - Designers used Figma’s Scale tool and frame resizing to preview how a single template would appear on different devices. - Testing showed that tablet and small-phone layouts worked well without extensive device-specific adjustments. ## Designing Content for Different Aspect Ratios - To avoid maintaining separate video and animation files for each screen size, content was produced in a 4:3 format. - Important content was placed inside safe areas so it could be cropped cleanly for 16:9 displays. - This allowed the same media assets to support multiple screen dimensions. ## Handling Text and Internationalization - The 8-pixel system was treated as a guideline rather than an absolute rule. - Smaller text sizes sometimes used 4-pixel increments, such as 12px and 20px, because minor size changes had a significant visual impact. - The app was translated into six languages, including German, where longer words could exceed available space. - Code automatically reduced text to the next smaller heading size when it did not fit. - Additional heading sizes were introduced to support these adjustments while preserving smooth transitions between heading levels. ## Practical Scope of the System - The app mostly used straightforward layouts with centered elements and two- or three-column structures. - The team did not need complex responsive patterns beyond proportional scaling and basic constraints. - The combination of a consistent spacing scale, reusable templates, Figma constraints, and shared React rules provided an efficient foundation for responsive design.

Figma Design Systems React Responsive Design+2

figmaNov 7, 20182 min readCurated summary

Creating atomic components for an atomic design system in Figma | Figma Blog

littleBits built an atomic design system in Figma to support four mobile and tablet apps across iOS and Android within a six-month roadmap. Drawing on Atomic Design and Bootstrap, the team organized reusable styles and components while adapting the structure to their actual workflow. They concluded that a simplified system aligned with React Native components was more practical than rigidly preserving separate “molecule” and “organism” categories. ## Atoms: Styles, colors, and icons - Text styles and colors were defined with Figma Styles. - A customized icon set based on Modern Pictograms was imported and converted into components. - Colors used semantic names inspired by Bootstrap, including categories for: - UI states - Grayscale values - Brand colors - Backgrounds - Overlays - Outlines - Semantic naming made future theme changes safer. For example, `bg-light` could consistently represent backgrounds while `ui-dark` represented foreground elements. ## Simplifying molecules and organisms - The team found that complex molecules and organisms were rarely reused across multiple templates. - Instead, both categories were grouped under the simpler name “Components.” - This structure mapped more naturally to the React Native components being developed in parallel. - Components included cards, tooltips, and foundational controls such as buttons. ## Combining styles without unnecessary components - Figma Styles enabled designers to combine text styles and color swatches directly. - Rather than creating separate components for every color-and-text combination, the team documented combinations in a style guide and applied styles as needed. - Mixing text styles within a single text box also supported copy with variable lengths. - This approach reduced document complexity and improved usability and performance. ## Reusable button components - Buttons were treated differently because they appeared frequently and included styling details such as outlines that were harder to manage centrally in Figma. - The team created nested components for: - Primary buttons - Secondary buttons - Tertiary buttons - Other frequently repeated custom buttons - These reusable button components provided a consistent foundation for the broader design system. The resulting system balanced atomic design principles with the team’s real reuse patterns, creating a practical Figma library that supported both design work and React Native implementation. The next step was applying these components to responsive layout templates.

Figma Design Systems React Native Atomic Design+2

figmaNov 5, 20182 min readCurated summary

Figma year in review: 2018 | Figma Blog

Figma’s 2018 review describes a shift from building a collaborative design tool to building an open platform and global community around it. After launching publicly in 2016 and raising $25 million in Series B funding, Figma expanded its API, attracted businesses and developers, and grew adoption among large organizations. The company concludes that partnerships, integrations, and community initiatives will remain central to its growth. ## From Product to Community - Figma marked roughly two years since its public launch in September 2016. - In 2018, its focus expanded beyond the core product to include: - The Figma Platform - API-powered integrations - Community events and resources - Adoption across departments in major organizations - Microsoft used Figma’s API to automate parts of its developer handoff process. ## The Figma Platform - Figma launched what it called the first web API for a design tool. - Its web-based architecture enabled integrations that would have been difficult with isolated desktop software. - Companies such as Uber and GitHub used the API to customize their design workflows even before the public launch. - Seven months later, businesses were being built on the platform, including paid services. ### Community-built tools - PDF exporting - Style-guide generation - Find-and-replace tools for text and layer names - JavaScript libraries for working with the Figma API ### Commercial integrations - Avocode and Zeplin connected Figma designs to developer handoff workflows. - Principle added advanced animation capabilities. - Relay for Figma pushed designs directly into codebases. - Pagedraw converted Figma designs into React. - Overflow synchronized designs for user-flow diagrams. - Haiku converted designs into production-ready components. Figma expected partnerships and additional integrations to become an even larger focus in 2019. ## Building a Global Community - Figma hosted design-system meetups in cities around the world, initially covering eight cities and later reaching 17 countries. - Events connected designers and encouraged detailed discussions about systematic design. - Figma launched DesignSystems.com to share practices and stories from teams at companies including Airbnb, GitHub, Braintree, and Segment. - The company viewed community connections and shared knowledge as an extension of its open-platform strategy. Figma’s 2018 direction was clear: continue investing in an accessible web-based tool while enabling an ecosystem of integrations, businesses, and designers around it.

Figma Design Systems React JavaScript+3

figmaOct 29, 20183 min readCurated summary

Designers use Figma to bring Uber to the unbanked | Figma Blog

Uber’s expansion into emerging markets required designing for differences in language, literacy, devices, culture, location, and user roles. For its cash-payment initiatives, product designer Femke van Schoonhoven adopted Figma after fragmented tools made collaboration and research iteration difficult. Figma became a shared, web-based source of truth that reduced communication overhead, improved engineer handoff, and enabled distributed teams to work together more effectively. ## Designing for Diverse Markets - Uber serves millions of riders across dozens of countries, requiring experiences that work across very different local contexts. - Designers conduct extensive research, including riding with drivers and testing designs in real-world environments. - Emerging-market design must account for: - Language and literacy - Device limitations - Culture and location - Whether the user is a rider, driver, or another participant - Cash payments were particularly important for reaching users without access to traditional banking. ## Problems with the Previous Workflow - The Cash team used separate tools for design, prototyping, sharing, feedback, and engineering handoff. - Designers had to repeatedly import and export files and communicate project status outside the design tool. - During field research, only one person could edit a design at a time, preventing real-time iteration with teammates. - This made it difficult to respond immediately to feedback from Uber drivers. ## Figma Enables Real-Time Collaboration - Van Schoonhoven moved existing files into Figma through a simple drag-and-drop process. - She could create prototypes using local languages and realistic, in-context materials. - Multiple team members could edit the same design simultaneously, whether working nearby or across countries. - Figma’s file organization made designs easier to locate and maintain. ## A Single Source of Truth - Stakeholders could access the latest designs directly instead of requesting updates by email. - Figma reduced communication overhead by an estimated 75 percent. - Engineers could be invited into design files, view current changes, and comment in context. - Early engineering involvement made handoff faster and less error-prone. - The shared workspace helped replace siloed work with a central design repository. ## Supporting Distributed Projects - Figma provided the collaborative foundation for projects involving designers in Amsterdam, San Francisco, and other locations. - Teams could access shared Uber platform components and work from the same current files. - Because the tool was web-based, stakeholders could share designs and obtain approvals more quickly. Figma helped Uber’s designers adapt payment experiences for unbanked users by combining rapid iteration, shared context, and cross-location collaboration. For distributed product teams working across complex markets, a centralized collaborative design environment can substantially reduce friction from research through engineering handoff.

Figma Prototyping Product Design Collaborative Design+4

figmaOct 22, 20182 min readCurated summary

Animate your Figma designs with our new Principle integration | Figma Blog

Figma introduced an integration with Principle that lets designers turn static Figma files into advanced, interactive prototypes without coding. Designs can be imported into Principle, animated with realistic transitions and interactions, and later synchronized with Figma while preserving those animations. The integration combines Figma’s collaborative design workflow with Principle’s simple but powerful motion-prototyping tools. ## Importing Figma Designs into Principle - Open Principle, choose **Import**, and authorize Figma as a design source. - Imported designs can be enhanced with: - Scrolling pages - Swipeable image cards - Interactive button states - Spring, ease-in, ease-out, and linear animations - These features help static designs behave more like real mobile applications. ## Principle’s Visual Prototyping Approach - Principle provides a visual interface intended to feel familiar to interface designers. - Users can create realistic prototypes without learning to code. - Its balance of simplicity and power helps designers remain focused on visual creativity rather than switching into an engineering mindset. ## Synchronizing Changes Between Figma and Principle - Designers can continue editing the original Figma file after importing it. - Principle detects Figma changes and merges them into the imported prototype. - For example, resizing a button in Figma automatically updates its size in Principle while retaining the animations already assigned to it. ## API-Based Integration - The integration was built using Figma’s web-based API. - Principle’s creator used Figma’s API documentation and API Explorer to understand and test how individual files and objects are represented. - The API Explorer lets developers enter a Figma file ID and inspect the resulting API calls, making it easier to experiment with the platform. The integration is recommended for designers who want to add sophisticated motion and interaction to Figma designs quickly. Import a Figma file into Principle, refine its animations visually, and use synchronization to keep the prototype aligned with ongoing design changes.

Figma User Experience Prototyping Motion Design+2

figmaOct 10, 20182 min readCurated summary

Introducing Smart Selection - speed up your design explorations | Figma Blog

Smart Selection is designed to reduce the repetitive work involved in arranging and refining multiple objects in Figma. It lets designers adjust spacing, position, and size directly on the canvas, helping them explore ideas faster while preserving familiar design workflows. The accompanying Tidy Up feature automatically organizes uneven selections into consistently spaced layouts. ## Smart Selection - Works automatically on selections or groups of three or more objects with uniform spacing. - Pink handles between objects let users adjust the spacing of all items at once. - A ring control allows objects to be rearranged quickly. - Selecting an item’s pink ring enables resizing by dragging its edges. - The feature is implemented as a direct canvas interaction rather than a separate tool or object type. ## Tidy Up - Tidy Up converts messy arrangements into evenly spaced groups suitable for Smart Selection. - It shifts selected items closer together while maintaining consistent spacing. - Unlike a traditional distribute command, it ensures spacing is even and compact. - It is useful for organizing tables, toolbars, and large sets of screens. - A layout containing 20 screens, for example, can be aligned in one action instead of manually correcting 19 separate gaps. - The command is available through the right sidebar, with shortcuts: - macOS: `⌥⌘T` - Other platforms: `Ctrl-Alt-T` ## Future Development - Figma planned to add support for two-dimensional grids. - The team invited users to provide feedback through the in-app help button or Spectrum. Smart Selection and Tidy Up are intended to replace tedious manual resizing, moving, and spacing adjustments with fast, intuitive canvas interactions, allowing designers to spend more time exploring creative possibilities.

Figma User Interface Design Tools Interaction Design+2

figmaOct 9, 20182 min readCurated summary

Figma's New Finger Tips | Figma Blog

Figma’s redesigned keyboard shortcut panel is inspired by Douglas Engelbart’s 1968 demonstration of fluid, two-handed computer interaction. The post argues that combining mouse control with practiced keyboard shortcuts lets designers work through motor memory and enter a state of flow. Figma’s new panel aims to make shortcuts easier and more enjoyable to discover and learn. ## Engelbart’s Two-Handed Computing - Douglas Engelbart’s landmark demo presented computers as tools for personal work and collaboration, not merely corporate calculation. - He used a mouse in one hand and a chorded “keyset” in the other: - The mouse selected objects. - The keyset issued commands, such as deleting a word while moving toward it. - This combination made his interaction appear remarkably fluid—like “dealing lightning with both hands.” - The effect depended on motor memory: repeated physical actions become instinctive, allowing users to focus on their goals rather than the mechanics of the tool. ## Keyboard Shortcuts and Creative Flow - Skilled Figma users similarly move across the canvas, restyle objects, and create designs without looking at their hands. - A mouse is relatively easy for beginners to learn, while keyboard shortcuts require deliberate practice before becoming automatic. - Mastering both devices can help designers work faster and maintain focus on the problems they are solving. ## Figma’s Redesigned Shortcut Panel - The old shortcut panel was difficult to scan and occupied much of the screen, interfering with learning through experimentation. - The new panel appears beneath the canvas and can be opened through the help menu or with **Ctrl+Shift+?**. - Shortcuts are organized into categories based on the user’s work: - Shape and vector tools - Typography - Two-handed mouse-and-keyboard combinations - Beginner-friendly shortcuts - Examples include using **Alt** while moving the mouse to measure objects and **⌘+\\** to hide interface chrome. - The panel highlights shortcuts as they are pressed and remembers them, encouraging users to reflect on and expand their shortcut habits. Figma’s approach treats shortcut learning as a gradual path toward fluency: provide relevant suggestions, reinforce what users already use, and reveal powerful combinations that can eventually become second nature.

Figma User Interface Design Keyboard Shortcuts Input Devices+2

figmaOct 2, 20182 min readCurated summary

We made a mistake with our API Challenge, and we’re sorry | Figma Blog

Figma apologized for launching an API challenge that the design community viewed as unpaid “spec work.” The challenge aimed to encourage a Figma-to-Sketch export and support a more open design ecosystem, but Figma acknowledged that its enthusiasm overshadowed the risk of exploiting creative labor. The company paused the challenge and later decided not to pursue any version of it. ## The API Challenge and Its Goal - Figma launched a challenge focused on building a Figma-to-Sketch export. - Its stated purpose was to promote an open ecosystem and help fund tools for exporting data from Figma. - The initiative was intended to expand interoperability within the design toolchain. ## Community Criticism - Designers quickly criticized the challenge as “spec work”—unpaid creative work submitted with no guaranteed compensation. - The backlash reflected broader concerns about skilled workers being asked to produce valuable work without fair payment. - Figma recognized that the challenge conflicted with its stated belief that creatives should be paid. ## Figma’s Response - CEO Dylan Field acknowledged that the company had made a mistake. - Figma said it had been “swept away” by its enthusiasm for making the platform more open. - The company paused the challenge and considered alternative structures that would not require participants to work without guaranteed compensation. - In a later update dated November 19, 2018, Figma said it would not move forward with any version of the challenge at that time. Figma’s experience illustrates the importance of designing developer and creative programs around clear compensation and consent, especially when participants’ work could directly benefit a commercial product.

Figma API Design Tools Sketch+2

figmaSep 26, 20182 min readCurated summary

Multiplayer, IRL | Figma Blog

Figma launched Local Communities to help designers connect, learn, and collaborate in person after successful Design System Meetups across eight cities and four continents. The initiative began with groups in more than 20 cities, supported by regional Designer Advocates who gather feedback and help organize events. Figma’s goal is to build communities around members’ real local needs—not just product tips and workflows. ## From Meetups to Local Communities - Design System Meetups sparked deeper conversations about: - Running effective design critiques - Open design culture - Everyday challenges and successes - New professional partnerships - The events showed Figma that its community wanted more opportunities for in-person connection. - Local Communities launched in cities including Accra, Amsterdam, Berlin, Boston, Copenhagen, Lagos, London, New York, San Francisco, Seattle, and Tel Aviv. ## A Community Shaped by Local Needs - Cities were selected based on factors such as: - Existing Figma evangelists and meetup organizers - Concentrations of Figma users - Geographic diversity - Communities are intended to support learning, networking, and sharing beyond basic Figma instruction. - Members can suggest workshops, pitch events, or request a new community in their city through an online form. ## Regional Designer Advocates Figma created three Designer Advocate roles to support communities across different regions and time zones: - **Tom Lowry — North America** - Previously a senior UX designer at OpenText. - Created Figma tutorials, component architecture guidance, and the Material Design resource kit. - Also taught an online course about building design portfolios. - **Zach Grosser — Europe** - Former communications designer at Square, where he created executive presentations and the IPO roadshow deck. - Introduced Figma to Square’s design team in 2013. - Joined Figma to support design education after becoming an early product adviser and moving to Amsterdam. - **Namnso Ukpanah — Africa** - Organized a Lagos design systems meetup that attracted more than 300 designers and developers. - Helped onboard 21 Figma ambassadors across 11 cities and seven countries. - Continued this community work while serving as lead designer at Hotels.ng. ## Community Participation - Designer Advocates act as Figma’s local representatives and help turn community ideas into events. - Figma encouraged members to propose topics such as: - Hiring diverse design teams - Speed networking for freelancers and organizations - Workshops and other city-specific events - The program remained open-ended, with Figma relying on local participants to identify what their communities needed most. Figma’s recommendation is to participate actively: share ideas, propose events, or help establish a Local Community where one does not yet exist.

Figma Design Systems User Experience Material Design+1

figmaSep 20, 20183 min readCurated summary

Aisle Rocket Studios, the agency behind Whirlpool, masters collaboration | Figma Blog

Aisle Rocket Studios (ARS), a multi-office agency serving brands such as Whirlpool and Maytag, adopted Figma to solve the challenges of remote collaboration and fragmented workflows. By making Figma the shared source of truth, ARS brought designers, writers, developers, and clients into the same browser-based workspace. The result was faster iteration, more inclusive collaboration, and a more efficient creative process. ## Fragmented Files and Remote Collaboration - ARS had more than 250 employees, four offices, and remote associates supporting over 25 brands. - Creative work was scattered across native files in Sketch, Photoshop, and other tools. - When Creative Director Matt Carson joined the Whirlpool account remotely under a tight deadline, the lack of a centralized process became especially apparent. - Figma’s multiplayer functionality offered a real-time workspace for collaboration across locations and time zones. ## Figma as the Shared Source of Truth - The Whirlpool team quickly replaced disconnected workflows with a centralized Figma process. - Team members designed and iterated together in a single file. - They used Figma for internal meetings, stakeholder feedback, and client prototypes. - Clients could review interactive concepts without logging in or waiting for developers to build the experience, shortening review cycles. ## More Inclusive Creative Work - Figma enabled ARS to conduct roughly 80% of its creative process in the browser. - Writers could edit copy directly within designs instead of working separately and handing it off later. - This made copy an active design element and gave non-designers more influence over the final product. - Developers could review designs early, helping identify technical constraints before handoff and reducing back-and-forth. ## A Leaner, More Effective Team - The Whirlpool account team became faster and more collaborative after consolidating its tools and files. - Its success attracted attention across ARS, prompting other teams to adopt the same workflow. - Both ARS and Whirlpool reported savings in time and money without sacrificing creativity. - Open, collaborative design became a standard the agency wanted to apply more broadly. ## Building a Shared Design System - ARS’s next step was to create greater consistency across Whirlpool’s digital brand. - Following atomic design principles, the team planned to build standardized “atoms” in Figma. - These components would be stored in a team library as a central source of truth. ARS’s experience suggests that browser-based collaborative tools can unify distributed teams and make the creative process more democratic. Centralizing design, copy, development input, prototypes, and reusable components in one shared workspace can improve speed, communication, and consistency.

Figma Design Systems Prototyping Sketch+3

figmaSep 19, 20182 min readCurated summary

Figma Feature Highlight: Component Overrides | Figma Blog

Figma’s component overrides let designers balance consistency with contextual flexibility. Designers can customize individual instances—such as changing text, colors, effects, or visibility—without detaching them from the original component. This means updates to the parent component continue to propagate while preserving each instance’s unique changes. ## Balancing Consistency and Flexibility - Design systems rely on reusable components such as lists, avatars, buttons, and status bars. - Real interfaces still require variations based on context, including different text, colors, and interaction states. - Overrides avoid rebuilding these variations from scratch or breaking instances away from their shared component. ## How Component Overrides Work - An instance remains connected to its parent component after properties are changed. - Parent-component updates continue to flow into the instance. - Customized properties remain distinct in that particular instance. - Overridable properties include: - Colors, fills, opacity, and blend modes - Text and type alignment - Strokes and styles - Effects such as shadows and blurs - Visibility ## Practical Design Examples - **Information lists:** Create one cell component, then override the text in each instance with unique data. - **Button states:** Use one button component and alter its background, opacity, shadow, or other properties for hover, pressed, or inactive states. - **Address books:** Reuse a circular avatar component while overriding its fill with different profile photographs. - **Creative compositions:** Multiple flipped and duplicated instances can be combined into effects such as a kaleidoscope. ## Creating a Kaleidoscope - Convert an illustrated frame into a component. - Duplicate instances to the right and below, flipping them horizontally or vertically. - Place a final duplicate in the remaining space to form a 2×2 arrangement. - Edit the original component and watch the changes appear across the connected instances. Component overrides are most useful when a design system needs reusable foundations without eliminating meaningful variation. Use shared components for structure, then apply overrides for content, states, and context-specific styling.

Figma Design Systems Prototyping User Interface+1

figmaSep 4, 20182 min readCurated summary

Figma Feature Highlight: Sketch Import | Figma Blog

Figma’s Sketch Import feature helps designers move from Sketch to Figma without rebuilding existing work. The post argues that it supports migration, cross-platform collaboration, and hybrid workflows while preserving much of a Sketch file’s structure and fidelity. Users can import files through drag-and-drop, the toolbar, or keyboard shortcuts. ## Why Sketch Import Matters - **Eases the transition to Figma** - Designers switching from Sketch can bring over previous projects instead of recreating them. - This lowers the cost and friction of adopting Figma. - **Supports cross-platform teams** - Sketch is Mac-only, while Figma works across platforms. - Developers and teammates on Windows or Linux can import Sketch files to review designs and specs. - **Enables flexible workflows** - Designers can continue working independently in Sketch and move files into Figma for critiques, comments, and collaboration with remote stakeholders. ## Fidelity and Design-System Support - The importer preserves: - Pages - Resizing constraints - Vectors and other design elements - Sketch symbols are converted into Figma components. - This is particularly useful for teams creating or maintaining shared design systems. - Figma presents the importer as highly accurate, while recommending in-app support if a file does not import correctly. ## How to Import a Sketch File Users can import Sketch files in three ways: - Drag and drop the file into Figma. - Use the import option in the toolbar. - Use: - **Command + Shift + K** on Mac - **Control + Shift + K** on Windows Figma automatically creates a new Figma file containing the imported content. Sketch Import is a practical bridge for teams adopting Figma: it preserves existing work while making collaboration and cross-platform access easier.

Figma Design Systems User Experience Sketch+2

figmaAug 28, 20183 min readCurated summary

The University of the Arts London’s Accidental Path to a Design System | Figma Blog

UAL’s fragmented history across six colleges created inconsistent digital experiences and made collaboration difficult. Midway through a website redesign, the UX team switched from Sketch to Figma, gaining real-time collaboration and a shared source of truth. That change unexpectedly led to a flexible design system that aligned designers, developers, stakeholders, and external agencies while accelerating delivery. ## A Fragmented Digital Identity - UAL consists of six colleges, each with its own history, identity, and website practices. - Individual teams preferred implementing their own styles, resulting in inconsistent digital experiences. - As part of a 2017 Digital Transformation Program, UAL began redesigning its core website to become more user-centric. - Although a design system was not initially the main objective, it emerged naturally during the project. ## Switching from Sketch to Figma - The team struggled with Sketch’s siloed files, versioning problems, syncing delays, and limited collaboration. - These issues were especially difficult because stakeholders and agencies were distributed across 14 campuses. - Figma enabled browser-based, real-time collaboration and allowed the team to import Sketch files easily. - Designers, developers, executives, and other stakeholders could work from one centralized source of truth. - The shared workspace improved transparency and helped repair the disconnect between design and development. ## Building the Design System - Since the website had to be built largely from scratch, the team prioritized creating reusable design-system foundations. - The design system was intended to unify not only the website but also UAL’s broader digital channels. - Workshops with students and business partners helped identify essential features, components, and inconsistencies. - The system had to support UAL’s complex brand, including variations in color, typography, and visual personality. - Figma’s team libraries created a living, accessible version of the brand guidelines. - Figma Styles allowed color, text, and effect styles to be managed independently, providing additional flexibility. ## Faster Delivery Through Reusable Components - The team used components to create base pages that served as templates for future pages. - Developers could build new pages more quickly and see how designs translated into code. - Designers and developers worked from the same system, reducing communication gaps and improving coordination. - The design system became both a visual foundation and a practical workflow for speeding up website production. UAL’s experience shows that a design system can emerge from solving everyday collaboration and consistency problems. Centralized tools, reusable components, shared libraries, and close designer-developer collaboration helped transform an unwieldy redesign into a faster and more unified digital process.

Figma Design Systems User Experience Web Development+2